用js做一个简单的图片轮播效果。
思路如下：用JavaScript来控制轮播的图片的样式（margin-left）。用计时器来控制图片的自动播放。鼠标点击控制图片的翻页。
效果图如下。具有以下功能：1.自动图片轮播 2.左右切换图片 3.底下小按钮切换图片。
话不多说，代码如下。
首先肯定是HTML代码`这个没什么说的，先插入需要轮播的图片。底下切换图片的按钮，还有左右按键。
<div class="block">
<div class="box_big ">
<div class="box"><img src="img/7.jpg" alt=""/></div>
<div class="box"><img src="img/5.jpg" alt=""/></div>
<div class="box"><img src="img/6.jpg" alt=""/></div>
<div class="box"><img src="img/8.jpg" alt=""/></div>
<div class="box"><img src="img/9.jpg" alt=""/></div>
<div class="box"><img src="img/7.jpg" alt=""/></div>
</div>
<div class="spot">
<div class="spot_list">1</div>
<div class="spot_list">2</div>
<div class="spot_list">3</div>
<div class="spot_list">4</div>
<div class="spot_list">5</div>
</div>
<div class="btn">
<div class="left_btn"><span> < </span></div>
<div class="right_btn"><span> > </span></div>
</div>
</div>
然后是给代码添加样式。添加好后基本样式就已经完成了。让图片横排列。超出父容器部分隐藏。记得给图片的margin-left添加过渡效果（如图）接下来就是让他动起来！！！
<style>
* {
margin: 0;
padding: 0;
}
.block {
width: 700px;
height: 400px;
border: 1px solid black;
margin: 100px auto;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.box_big {
position: absolute;
width: 4200px;
height: 400px;
}
.nav {
transition: margin-left 0.5s linear;
}
.box {
width: 700px;
height: 400px;
float: left;
}
img {
width: 100%;
height: 100%;
}
.spot {
position: absolute;
width: 100%;
text-align: right;
bottom: 5px;
}
.spot_list {
width: 30px;
height: 30px;
font-size: 20px;
text-align: center;
border: 1px solid gray;
border-radius: 5px;
line-height: 30px;
font-weight: bolder;
margin: 10px;
display: inline-block;
background: rgba(255, 255, 255, 0.3);
}
.btn {
width: 100%;
height: 80px;
position: absolute;
margin: 0 auto;
top: 160px;
}
.left_btn, .right_btn {
width: 30px;
height: 80px;
z-index: 15;
background: rgba(255, 255, 255, 0.3);
text-align: center;
line-height: 80px;
border-radius: 8px;
}
.left_btn {
float: left;
}
.right_btn {
float: right;
}
</style>
这块是最重要的的部分，js代码
思路如下，先获取元素，让图片切换下一张，这里我使用count++*元素的marginLeft值。count加一次图片就会切换下一张。然后把这段代码放在计时器中，图片就可以自动切换下一张了。切换的时候底下的小图标的背景色也跟着切换。
ipt>
var box = document.getElementsByClassName("box_big")[0];
var spot = document.getElementsByClassName("spot_list");
var block = document.getElementsByClassName("block")[0];
var left_btn = document.getElementsByClassName("left_btn")[0];
var right_btn = document.getElementsByClassName("right_btn")[0];
var time = null;
var count = 0;
//计时器
function showtime() {
time = setInterval(function () {
mate();
}, 1000);
}
//正常滚动
function mate() {
box.className = "box_big nav";
spot[count].style.background = "rgba(255, 255, 255, 0.3)";
count++;
spot[count > box.children.length - 2 ? 0 : count].style.background = "rgba(91,91,91,0.8)";
box.style.marginLeft = (count * -700) + "px";
//添加一次性计时器
setTimeout(function () {
//判断count的值。如果大于图片长度，就重0开始+
if (count > box.children.length - 2) {
count = 0;
box.className = "box_big";
box.style.marginLeft = "0px"
}
}, 500)
}
然后设置鼠标进入计时器关闭，鼠标离开计时器打开。
block.onmouseenter = function () {
clearInterval(time);
};
//鼠标出来计时器打开
block.onmouseleave = function () {
showtime();
};
接下来，来做底下鼠标放在地下图标的时候切换对应的图片。这里我用的是for循环。
for (var i = 0; i < spot.length; i++) {
spot[i].index = i;
spot[i].onmouseenter = function () {
spot[count].style.background = "rgba(255, 255, 255, 0.3)";
this.style.background = "rgba(91,91,91,0.8)";
count = this.index;
box.style.marginLeft = (count * -700) + "px";
}
}
上面大部分功能已经完成，现在剩下最后一步，左右键切换图片的上一张和下一张。用鼠标点击事件。左边很简单，直接执行开始时候的方法即可（切换方向和自动切换方向相同）。右边用count–
//图片左边划
left_btn.onclick = function () {
mate();
};
//图片右边划
right_btn.onclick = function () {
spot[count].style.backgroundColor = "rgba(255,255,255,0.3)";
count--;
if (count < 0) {
box.className = "box_big";
count = box.children.length - 2;
box.style.marginLeft = "-3500px";
}
//添加一次性计时器
setTimeout(function () {
box.className = "box_big nav";
box.style.marginLeft = (-700 * count) + "px";
spot[count].style.backgroundColor = "rgba(91,91,91,0.8)";
}, 1);
};
到这里就已经写完了。
完整js代码如下：
<script>
//首先获取元素，这里获取了所有需要的元素。
var box = document.getElementsByClassName("box_big")[0];
var spot = document.getElementsByClassName("spot_list");
var block = document.getElementsByClassName("block")[0];
var left_btn = document.getElementsByClassName("left_btn")[0];
var right_btn = document.getElementsByClassName("right_btn")[0];
var time = null;
spot[0].style.background = "rgba(91,91,91,0.8)";
var count = 0;
showtime();
//鼠标进入计时器停止
block.onmouseenter = function () {
clearInterval(time);
};
//鼠标出来计时器打开
block.onmouseleave = function () {
showtime();
};
//点的事件
for (var i = 0; i < spot.length; i++) {
spot[i].index = i;
spot[i].onmouseenter = function () {
spot[count].style.background = "rgba(255, 255, 255, 0.3)";
this.style.background = "rgba(91,91,91,0.8)";
count = this.index;
box.style.marginLeft = (count * -700) + "px";
}
}
//图片左边划
left_btn.onclick = function () {
mate();
};
//图片右边划
right_btn.onclick = function () {
spot[count].style.backgroundColor = "rgba(255,255,255,0.3)";
count--;
if (count < 0) {
box.className = "box_big";
count = box.children.length - 2;
box.style.marginLeft = "-3500px";
}
setTimeout(function () {
box.className = "box_big nav";
box.style.marginLeft = (-700 * count) + "px";
spot[count].style.backgroundColor = "rgba(91,91,91,0.8)";
}, 1);
};
//计时器
function showtime() {
time = setInterval(function () {
mate();
}, 1000);
}
//正常滚动
function mate() {
box.className = "box_big nav";
spot[count].style.background = "rgba(255, 255, 255, 0.3)";
count++;
spot[count > box.children.length - 2 ? 0 : count].style.background = "rgba(91,91,91,0.8)";
box.style.marginLeft = (count * -700) + "px";
setTimeout(function () {
if (count > box.children.length - 2) {
count = 0;
box.className = "box_big";
box.style.marginLeft = "0px"
}
}, 500)
}
</script>
</body>
