web前端：js-DOM原生轮播图实现解构稳基础框架顺手捏来

1.html<标签>解析

html实现

效果图

2.js页面元素获取，及初始化创建轮播圆点解析

javascript

3.点击事件逻辑：切换图片及圆点样式更新

javascript

单点效果图

4.less布局

.common-title {}

.common-ps {}

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

overflow: hidden;

body {

height: 100%;

#wrap {

width: 600px;

height: 900px;

border: 5px solid steelblue;

border-radius: 8%;

background: antiquewhite;

box-shadow: 2px 2px 5px #000000;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: 2% auto;

text-align: center;

transition: 2s;

//绝对定位，子元素继承位置

position: absolute;

.ct {

margin: 10px auto;

}

.cps {

margin-left: 60%;

}

&:hover {

background: seashell;

}

#btn1 {

transition: 1s !important;

}

.cevent-carousel {

margin-top: 1%;

left: 7%;

position: absolute;

.carousel-img {

img {

width: 500px;

height: 300px;

}

}

button {

position: relative;

//nth-child所包含的元素必须和父元素相同，这里父元素为button，这个为span，需要nth-of-type()

&:nth-of-type(1) {

span {

position: absolute;

font-size: 20px;

color: white;

margin-top: -8px;

left: 61%;

}

}

&:nth-of-type(2) {

span {

position: absolute;

font-size: 20px;

color: white;

margin-top: -8px;

left: 61%;

}

}

}

}

.cevent-carousel-pro {

position: absolute;

top: 55%;

.carousel-img {

img {

width: 500px;

height: 300px;

}

}

button {

position: relative;

//nth-child所包含的元素必须和父元素相同，这里父元素为button，这个为span，需要nth-of-type()

&:nth-of-type(1) {

span {

position: absolute;

font-size: 20px;

color: white;

margin-top: -8px;

left: 61%;

}

}

&:nth-of-type(2) {

span {

position: absolute;

font-size: 20px;

color: white;

margin-top: -8px;

left: 61%;

}

}

}

#dotReplacePic {

position: absolute;

list-style: none;

text-align: center;

width: 100%;

margin-left: 30%;

top: 103%;

li {

float: left;

width: 30px;

height: 30px;

background: steelblue;

color: white;

border: 2px solid silver;

border-radius: 50%;

opacity: .8;

margin: 0 1.5%;

transition:1s;

&:hover {

background: tomato;

opacity: .7;

transform: scale(1.5);

}

}

}

}

}

}

}

5.js操纵页面元素

/* DOM-html-document对象

* 注意：$(function(){}) jQuery中，获取btn的value失效，需要转为window.onload

*/

window.onload = function() {

var btn1 = document.getElementById("btn1");

console.log("mei点", btn1.innerHTML);

var flag = true;

btn1.onclick = function() {

if(flag) {

btn1.innerHTML = "BT Button";

} else {

btn1.innerHTML = "Link Button";

}

flag = !flag;

}

btn1.onmouseenter = function() {

btn1.style.background = "deepskyblue";

}

btn1.onmouseleave = function() {

btn1.style.background = "white";

}

//获取btn

var previous = document.getElementById("btn-previous")

var next = document.getElementById("btn-next");

//获取图片，结果为array数组，需要后面加[index]索引

var imgs = document.getElementsByTagName("img")[0];

console.log("img对象[]:", imgs);

previous.onclick = function() {

console.log("上一张");

imgs.src = "./static/img/logo-500-300-5.jpg";

}

next.onclick = function() {

console.log("下一张");

imgs.src = "./static/img/logo-500-300-1.jpg";

}

//获取btn

var previousPro = document.getElementById("previous")

var nextPro = document.getElementById("next");

var imgList = document.getElementsByClassName("carousel-img-list")[0];

console.log("图片集合：", imgList, "info: ", info);

//获取图片，结果为array数组，需要后面加[index]索引

var imgsPro = ["./static/img/logo-500-300-1.jpg", "./static/img/logo-500-300-5.jpg", "./static/img/logo-500-300-2.jpg", "./static/img/logo-500-300-3.jpg", "./static/img/logo-500-300-4.jpg"];

//保存当前显示图片索引，默认0，第一张

var index = 0;

//共 5 张图片-当前第 1 张

var info = document.getElementById("info");

info.innerHTML = "共 " + imgsPro.length + " 张图片-当前第 " + 1 + " 张";

//原点切换图片

var dotReplacePic = document.getElementById("dotReplacePic");

//在js中创建的元素，想要操作，必须在这里重新获取

var dotLi = document.getElementsByTagName("li");

//每次点击dot，判断index位置

var dotIndex = 0;

//（1）存放li标签

var liNodes = "";

//（2）存放style：css

var liStyle = document.createElement("style");

var liCss = "";

for(var i = 0; i < 5; i++) {

liNodes += "<li></li>";

//这里添加css没有起作用，改为less中添加

liCss = "ul > li:nth-child(" + (i + 1) + "){}";

console.log("liCss: ", liCss);

}

dotReplacePic.innerHTML = liNodes;

liStyle.innerHTML += liCss;

console.log("最后的liStyle：", liStyle);

//放入html

document.head.appendChild(liStyle);

//dot初始化

dotLi[index].style.transform = "scale(1.5)";

dotLi[index].style.opacity = .7;

dotLi[index].style.background = "tomato";

console.log("img对象:", imgs);

previousPro.onclick = function() {

//初始化css样式

dotLi[dotIndex].style.transform = "scale(1)";

dotLi[dotIndex].style.opacity = .8;

dotLi[dotIndex].style.background = "steelblue";

console.log("上一张，索引自减");

index--;

if(index < 0) {

index = imgsPro.length - 1;

}

imgList.src = imgsPro[index];

//在index自减之后记录index位置

dotIndex = index;

dotLi[index].style.transform = "scale(1.5)";

dotLi[index].style.opacity = .7;

dotLi[index].style.background = "tomato";

info.innerHTML = "共 " + imgsPro.length + " 张图片-当前第 " + (index + 1) + " 张";

}

nextPro.onclick = function() {

//初始化css样式

dotLi[dotIndex].style.transform = "scale(1)";

dotLi[dotIndex].style.opacity = .8;

dotLi[dotIndex].style.background = "steelblue";

console.log("下一张，索引自增");

index++;

if(index > imgsPro.length - 1) {

index = 0;

}

imgList.src = imgsPro[index];

//在index自增之后记录index位置

dotIndex = index;

dotLi[index].style.transform = "scale(1.5)";

dotLi[index].style.opacity = .7;

dotLi[index].style.background = "tomato";

info.innerHTML = "共 " + imgsPro.length + " 张图片-当前第 " + (index + 1) + " 张";

}

}

6.html源码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

<title>html-document对象</title>

<link rel="stylesheet" href="../less/6-bootstrap/css/bootstrap.min.css" />

<link rel="stylesheet" href="css/4-js-document.css" />

<body>

<div id="wrap">

<h1 class="ct common-title">原生js-DOM轮播图操作</h1>

<h3 class="cps common-ps">一刀coder</h3>

<button id="btn1" class="btn btn-default">这是个link按钮</button>

<div class="cevent-carousel">

<div class="carousel-img">

<img src="static/img/logo-500-300-1.jpg" alt="..." class="img-thumbnail">

</div>

<button id="btn-previous" class=" btn btn-primary" type="button">上一张 <span>↑</span> P</button>

<button id="btn-next" class="btn-next btn btn-warning" type="button">下一张 <span>↓</span> N</button>

</div>

<div class="cevent-carousel-pro">

<div class="carousel-img img-thumbnail">

<img src="static/img/logo-500-300-1.jpg" alt="..." class="carousel-img-list">

</div>

<button id="previous" class=" btn btn-danger" type="button">上一张 <span>↑</span> P</button>

<button id="next" class="btn-next btn btn-success" type="button">下一张 <span>↓</span> N</button>

<button id="info" class="btn-next btn btn-default disabled" type="button"></button>

<ul id="dotReplacePic">

</ul>

</div>

</div>

</body>

<script type="text/javascript" src="../less/6-bootstrap/js/jquery.min.js"></script>

<script type="text/javascript" src="../less/6-bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/4-js-document.js"></script>

最终效果图

使用JavaScript语言实现横向轮播图效果

}

</script>

</body>

以上就是使用JavaScript语言实现横向轮播图效果详细内容，更多请关注。