轮播图jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../day48/jquery-3.2.1.js"></script>
<title>Title</title>
<style>
.outer{
width: 790px;
height: 340px;
margin: 80px auto;
position: relative;
}
.img li{
position: absolute;
list-style: none;
top: 0;
left: 0;
}
.num{
position: absolute;
bottom: 18px;
left: 270px;
list-style: none;
}
.num li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-left: 4px;
}
.btn{
position: absolute;
top:50%;
width: 30px;
height: 60px;
background-color: lightgrey;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.7;
margin-top: -30px;
display: none;
}
.left{
left: 0;
}
.right{
right: 0;
}
.outer:hover .btn{
display: block;
}
.num .active{
background-color: red;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li class="hide"><a href=""><img src="img/2.jpg" alt=""></a></li>
<li class="hide"><a href=""><img src="img/3.jpg" alt=""></a></li>
<li class="hide"><a href=""><img src="img/4.jpg" alt=""></a></li>
<li class="hide"><a href=""><img src="img/5.jpg" alt=""></a></li>
<li class="hide"><a href=""><img src="img/6.jpg" alt=""></a></li>
</ul>
<ul class="num">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
<script>
var i=0;
//功能1： 鼠标悬浮到图标的位置时实现切换
$(".num li").mouseover(function () {
$(this).addClass("active").siblings().removeClass("active");
var $icon_index=$(this).index();
i=$icon_index;
$(".img li").eq($icon_index).removeClass("hide").siblings().addClass("hide")
});
// 自动轮播 setInterval(fn,1000)
function foo() {
if(i==5){
i=-1
}
i++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).removeClass("hide").siblings().addClass("hide");
}
var ID=setInterval(foo,1000);
// 悬浮终止定时器
$(".outer").hover(function () {
// 终止定时器
clearInterval(ID)
},function () {
// 重新开启一个定时器
ID=setInterval(foo,1500);
});
// 通过按钮实现切换
$(".right").click(function () {
foo()
});
function bar() {
if(i==0){
i=6
}
i--;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).removeClass("hide").siblings().addClass("hide");
}
$(".left").click(function () {
bar()
})
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017-08-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
