要求
实现图片轮播
1.图片自动切换（定时器）；
2.鼠标悬停在图片上图片不切换（清除定时器）
3.鼠标悬停在按钮上时显示对应的图片（鼠标悬停事件）
4.鼠标悬停在图片上是现实左右箭头
5.点击左键切换到上一张图片，但图片为第一张时，点击切换到最后一张图片
6.点击右键切换到下一张图片，但图片为最后一张时，点击切换到第一张图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#my_ul li{
list-style: none;
position: absolute;
}
#container{
width: 450px;
height: 270px;
position: relative;
margin: 0 auto;
}
.none{
display: none;
}
#my_ul2 li{
list-style: none;
width: 25px;
height: 25px;
background-color: white;
line-height: 25px;
text-align: center;
float: left;
margin: 5px;
border-radius: 5px;
}
#my_ul2{
position: absolute;
right: 0;
bottom: 0px;
width: 245px;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="container">
<ul id="my_ul">
<!-- 图片资源 -->
<li><img src="img/01.jpg" ></li>
<li><img src="img/02.jpg" ></li>
<li><img src="img/03.jpg" ></li>
<li><img src="img/04.jpg" ></li>
<li><img src="img/05.jpg" ></li>
<li><img src="img/06.jpg" ></li>
<li><img src="img/07.jpg" ></li>
</ul>
<ul id="my_ul2">
<!-- 按钮图标 -->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
var i = 1;//负责记录轮播到第几个
$("#my_ul li:gt(0)").addClass("none");//默认第一张图片显示剩下的不显示
var time = setInterval(run,3000);
$("#my_ul li").mouseover(function(){//鼠标放上停止波动
clearInterval(time);
})
$("#my_ul li").mouseout(function(){//鼠标移开继续波动
time = setInterval(run,3000);
})
$("#my_ul2 li").mouseover(function(){//鼠标在图标按钮上
clearInterval(time);//先停止波动
var index = $("#my_ul2 li").index(this);//获取当前鼠标放在哪一个li上
i = index + 1;//将i重新赋值从li这个位置开始
for(var j = 1 ; j <= 7 ; j++){
if(j != index+1){//将不是li位置的元素隐藏
$("#my_ul li:nth-child(" + j + ")").hide(1);
}else{//将li位置元素显示
$("#my_ul li:nth-child(" + j + ")").show(1);
}
}
}
)
$("#my_ul2 li").mouseout(function(){//鼠标移开继续滚动
time = setInterval(run,3000);
})
function run(){
if(i == 7){//如果i到达最后的位置重置它
$("#my_ul li:nth-child(" + i + ")").fadeToggle(3000);
i = 1;
$("#my_ul li:nth-child(" + i + ")").fadeToggle(3000);
}else{
$("#my_ul li:nth-child(" + i + ")").fadeToggle(3000);//隐藏
i++;
$("#my_ul li:nth-child(" + i + ")").fadeToggle(3000);//显示
}
return i;
}
})
</script>
</body>
</html>
思路
一.图片自动切换（定时器）；
- 首先详见第一张图片展示剩下的隐藏
- 然后使用定时器依次将第i张图片隐藏，然后将第i+1张图片显示然后i++；
二.鼠标悬停在图片上图片不切换（清除定时器） - 鼠标放上停止定时器
- 鼠标移开开启定时器
三.鼠标悬停在按钮上时显示对应的图片（鼠标悬停事件） - 首先停止计时器
- 获取到当前鼠标停在第几个li上
var index = $("#my_ul2 li").index(this);
- 将i的值改为当前显示的是第几个li
- 通过循环将li元素显示剩下的隐藏
- 最后当鼠标移开的时候重新开启计时器
4.鼠标悬停在图片上是现实左右箭头
5.点击左键切换到上一张图片，但图片为第一张时，点击切换到最后一张图片
6.点击右键切换到下一张图片，但图片为最后一张时，点击切换到第一张图片
感觉剩下的需求和第三条需求差不多就不写了
扫一扫
672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
