效果展示:
简要:
小米的轮播图,效果就是“淡入淡出”、“鼠标移上去停止自动轮播”、“鼠标移开继续自动轮播”。差不多是这么一个效果了。
JS必要的知识:
- 事件
- onclick //点击事件
- onmouseover //鼠标移入
- onmouseout //鼠标移出
- 函数
- setInterval() //自动函数
- clearInterval() //清除自动函数
常见的bug:
-
相信你们在自动轮播时,同时快速的点击上下切换按钮,会发现页面会开始不美观了,这个bug相信很多人都遇见过。
-
还有就是当快自动轮播到下一张的时候,突然手动切换了一下图片(举个例子:假设自动轮播时间为2s,当1.6s时,你点击了一下上一张,此时剩下0.4s,0.4s过后又会自动轮播到下一张)这个时间实在是太快了。
以上bug的解决:
请看我JS代码部分的自动轮播(autoPlay函数),我相信你们可以看懂。
开始上代码
body部分:
<div class="banner">
<!-- 轮播图片 -->
<div class="bannerImg">
<ul>
<li class="on">
<img src="images/1.png" width="1226" height="460" />
</li>
<li>
<img src="images/2.png" width="1226" height="460" />
</li>
<li>
<img src="images/3.png" width="1226" height="460" />
</li>
<li>
<img src="images/4.png" width="1226" height="460" />
</li>
<li>
<img src="images/5.png" width="1226" height="460" />
</li>
</ul>
</div>
<!-- 上一张 -->
<div class="left"></div>
<!-- 下一张 -->
<div class="right"></div>
<!-- 小按钮 -->
<div class="dian">
<ul>
<li class="items on" onclick="buttonClick(0)"></li>
<li class="items" onclick="buttonClick(1)"></li>
<li class="items" onclick="buttonClick(2)"></li>
<li class="items" onclick="buttonClick(3)"></li>
<li class="items" onclick="buttonClick(4)"></li>
</ul>
</div>
</div>
CSS部分:
*{
padding: 0;
margin: 0;
}
body{
background-color: rgba(0,0,0,.4);
}
.banner{
width: 1226px;
height: 460px;
margin: 30px auto 0;
position: relative;
}
.banner .bannerImg ul{
list-style-type: none;
}
.banner .bannerImg li{
position: absolute;
opacity: 0;
transition: opacity 2s;
}
/* 图片的隐藏与显示 */
.banner .bannerImg li.on{
opacity: 1;
}
/* 左右 */
.left,
.right{
width: 41px;
height: 69px;
position: absolute;
top: 50%;
margin-top: -34.5px;
border-radius: 5px;
}
.left{
background: url(../images/icon-slides.png) no-repeat -84px 0;
margin-left: 20px;
}
.right{
background: url(../images/icon-slides.png) no-repeat -126px 0;
right: 20px;
}
.left:hover{
background: url(../images/icon-slides.png) no-repeat;
}
.right:hover{
background: url(../images/icon-slides.png) no-repeat -44px 0;
}
/* 点 */
.dian{
position: absolute;
bottom: 20px;
right: 20px;
}
.dian ul{
list-style-type: none;
}
.dian ul li{
width: 8px;
height: 8px;
border-radius: 50%;
margin: 0 4px;
float: left;
border: 2px solid rgba(255,255,255,.6);
background-color: rgba(0,0,0,.4);
cursor: pointer;
}
/* 小按钮的点击样式 */
.dian ul .items.on{
border: 2px solid rgba(0,0,0,.6);
background-color: rgba(255,255,255,.4);
}
JS部分:
var time = 0;//2秒后自动换图
var timeId = -1;//自动函数的ID值,默认-1
var banner = document.querySelector(".banner");//获取banner
var bannerImg = document.querySelectorAll(".bannerImg li");//获取所有的li(图片)
var dian = document.querySelectorAll(".dian li");//获取所有的小按钮
var right = document.getElementsByClassName("right")[0];//获取点击下一张
var left = document.getElementsByClassName("left")[0];//获取点击上一张
index = 0;//图片索引
// 点击下一张
right.onclick=function(){
changeImg(true);
}
// 点击上一张
left.onclick=function(){
changeImg(false);
}
// 自动轮播
function autoPlay(){
timeId = setInterval(function(){
time++;
if(time == 20){
time = 0;
changeImg(true);
}
},100);
}
autoPlay();
// 当鼠标移上banner空间时,停止自动轮播
banner.onmouseover=function(){
clearTimeout(timeId);
}
// 当鼠标移开banner空间时,继续自动轮播
banner.onmouseout=function(){
autoPlay();
}
// 清除样式
function clearStyle(index){
// 清除上一个样式
bannerImg[index].className = "";
dian[index].className = "items";
}
// 添加样式
function addStyle(index){
// 添加样式
bannerImg[index].className = "on";
dian[index].className = "items on";
}
/*
更改图片和小按钮样式
flag:
true:下一张
false:上一张
*/
function changeImg(flag){
time = 0;//用来阻止2秒后自动换图的bug
clearStyle(index);
// 判断是上一张还是下一张
if(flag){
// 下一张
index++;
index %= 5;
}else{
// 上一张
index--;
if(index<0) index = 0;
}
addStyle(index);
}
/*
点击小按钮切换到对应图片
*/
function buttonClick(num){
time = 0;//用来阻止2秒后自动换图所产生的小bug
clearStyle(index);
index = num;
addStyle(index);
}
结束语:
轮播图的套路其实都差不多,掌握其思路,便可一通百通。