轮播器是在制作网站时常常运用到的一种功能
一、简单的轮播器
通过一个简单的轮播器，来为大家介绍轮播器的原理
首先为大家展示效果
上图为该例子要实现的效果展示，在图片会自动播放的同时，还拥有左右按钮供人操作
编写html与css代码
*{ margin: 0; padding: 0; } ol,ul,li{ list-style: none; } .carousel{ position: relative; width: 620px; height: 300px; margin: 100px auto; border: 1px solid black; overflow: hidden; } .carousel>ul{ position: relative; left: 0; width: 2480px; height: 100%; } .carousel>ul>li{ float: left; width: 620px; height: 100%; } .carousel>ul>li img{ width: 100%; height: 100%; } .carousel>span{ position: absolute; top:50%; margin-top: -20px; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 30px; color: white; border-radius: 50%; background-color: rgba(0,0,0,0.4); z-index: 1; } .carousel>span:nth-of-type(1){ left: 20px; } .carousel>span:nth-of-type(2){ right: 20px; } .carouselTransition{ transition: left 1s; } < >
为左右按钮添加js，并绑定点击事件，通过改变".carousel>ul"的left值来使图片切换
(function(){
var carpiselUL =document.querySelector(".carousel>ul");
var leftBtu =document.querySelector(".carousel>span:nth-of-type(1)");//左按钮
var rightBtu =document.querySelector(".carousel>span:nth-of-type(2)");//右按钮
var carouselNum =0; //定义图片容器UL的left值
leftBtu. =function(){move("left")};
rightBtu. =function(){move("right")};
function move(leftRight){
if(leftRight =="left"){
console.log("左边按钮");
carouselNum = carouselNum -620; //620为展示窗口的宽度
var movePx = carouselNum +"px";
}
if(leftRight =="right"){
console.log("右边边按钮");
carouselNum = carouselNum +620;
var movePx = carouselNum +"px";
}
carpiselUL.style.left = movePx;
};
})();
从上图中我们可以发现存在2个问题，第一是图片切换的时候是瞬发的，并没有过渡效果。第二是当到底所有图片的最左或最右端时，继续点击就会出现没有图片了的情况。
首先我们来解决第一个问题，通过“transition”属性来获得过渡效果
先写一个类
.carouselTransition{
transition:left 1s;
}
通过js动态添加
carpiselUL.classList.add("carouselTransition");//添加类名，获得过度效果
第一个问题处理了，现在到第二个问题。
通过这种方式便可以得到轮播的效果，右边按钮相同
最后我只要将overflow属性添加上，在添加定时器去执行“左按钮”，轮播器也就完成了。
(function(){
var carpiselUL = document.querySelector(".carousel>ul");
var leftBtu = document.querySelector(".carousel>span:nth-of-type(1)");//左按钮
var rightBtu = document.querySelector(".carousel>span:nth-of-type(2)");//右按钮
var carouselNum = 0; //定义图片容器UL的left值
leftBtu. = function(){move("left")};
rightBtu. = function(){move("right")};
function move(leftRight){
if(leftRight == "left"){
carpiselUL.classList.add("carouselTransition");//添加类名，获得过度效果
carouselNum = carouselNum - 620; //620为展示窗口的宽度
var movePx = carouselNum + "px";
carpiselUL.style.left = movePx;
if(-carouselNum == 1860){//当达到第4张图片时，将其拖回第一张的位置
carouselNum = 0;
movePx = "0px";
setTimeout(function(){
carpiselUL.classList.remove("carouselTransition");//移除类名，去掉过度效果
carpiselUL.style.left = movePx;
}, 1000);
};
};
if(leftRight == "right"){
if(carouselNum == 0){
carouselNum = -1860;
carpiselUL.classList.remove("carouselTransition");//移除类名，去掉过度效果
movePx = "-1860px";
carpiselUL.style.left = movePx;
setTimeout(function(){
carpiselUL.classList.add("carouselTransition");//添加类名，获得过度效果
carouselNum = carouselNum + 620;
var movePx = carouselNum + "px";
carpiselUL.style.left = movePx;
},100)
}else{
carpiselUL.classList.add("carouselTransition");//添加类名，获得过度效果
carouselNum = carouselNum + 620;
var movePx = carouselNum + "px";
carpiselUL.style.left = movePx;
}
};
};
var timeC = setInterval(function(){
move("left");
},3000);
})();
