轮播器是在制作网站时常常运用到的一种功能
一、简单的轮播器
通过一个简单的轮播器，来为大家介绍轮播器的原理
首先为大家展示效果
上图为该例子要实现的效果展示，在图片会自动播放的同时，还拥有左右按钮供人操作
编写html与css代码
<style>
*{
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;
}
</style>
</head>
<body>
<div class="carousel">
<span> < </span>
<span> > </span>
<ul>
<li><img src="images/天空奇幻.jpg"></li>
<li><img src="images/海洋天空.jpg"></li>
<li><img src="images/雪景树.jpg"></li>
<li><img src="images/天空奇幻.jpg"></li>
</ul>
</div>为左右按钮添加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);
})();
热门评论
-
分度I2018-10-20 0
查看全部评论代码有缺失
js里：
leftBtu. = function(){move("left")};
改为：
leftBtu.onclick = function(){move("left")};