<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
width: 500px;
height: 500px;
margin-top: 100px;
margin-left: 290px;
position: relative;
}
.img li{
position: absolute;
list-style: none;
top:0;
left: 0;
}
.num{
position: absolute;
bottom: 150px;
left: 0;
list-style: none;
margin-left: 300px;
}
.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;
width: 30px;
height: 60px;
background-color: grey;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.3;
margin-top:150px;
display: none;
}
.outer:hover .btn{
display: block;
}
.left{
left: 0;
}
.right{
right: -290px;
}
.num .active{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href=""><img src="//img11.360buyimg.com/da/jfs/t4441/49/1784702367/91632/480f1bfc/58e60c72Nbe6e37f1.jpg" title="jd1" ></a></li>
<li><a href=""><img src="//img13.360buyimg.com/da/jfs/t4453/304/2090907070/122737/8821f7ec/58eb6de8Nd3a1b8fe.jpg" title="jd2" ></a></li>
<li><a href=""><img src="//img1.360buyimg.com/da/jfs/t4915/42/882494763/136605/c0df87b5/58e9ec51Na0becbb9.jpg" title="jd3" ></a></li>
<li><a href=""><img src="//img14.360buyimg.com/da/jfs/t4924/166/986079800/154274/6832fccd/58eb6e6eNa2cf5872.jpg" title="jd4" ></a></li>
<li><a href=""><img src="//img1.360buyimg.com/da/jfs/t4576/37/1783288975/114963/5b28403c/58e600aaNf0a41c82.jpg" title="jd5" ></a></li>
<li><a href=""><img src="//img13.360buyimg.com/da/jfs/t4522/79/1905196885/120099/7f653940/58e768e9N021ccf82.jpg" title="jd6" ></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 src="jquery-3.2.0.js"></script>
<script>
//通过jq自动创建按钮标签
var num_img=$('.img li').length;
for (i=0;i<num_img;i++){
$('.num').append('<li></li>')
}
$('.num li').eq(0).addClass('active');
//手动轮播
$('.num li').mouseover(function () {
var index=$(this).index()//拿到当前下标索引值
$(this).addClass('active');
$(this).siblings().removeClass('active');
// $('.img li').eq(index).show(1).siblings().hide(1)
$('.img li').eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
});
//自动轮播（设置定时器）
var c=setInterval(go,1500);
var i=0;
function go() {
if(i==num_img-1){
i=-1
}
i++;
$('.num li').eq(i).addClass('active');
$('.num li').eq(i).siblings().removeClass('active');
// $('.img li').eq(index).show(1).siblings().hide(1)
$('.img li').eq(i).stop().fadeIn().siblings().stop().fadeOut()
}
//
function go_l() {
if(i==0){
i=num_img
}
i--;
$('.num li').eq(i).addClass('active');
$('.num li').eq(i).siblings().removeClass('active');
// $('.img li').eq(index).show(1).siblings().hide(1)
$('.img li').eq(i).stop().fadeIn().siblings().stop().fadeOut()
}
$('.outer').hover(function () {
clearInterval(c)
},function () {
c=setInterval(go,1500);
})
//button加定播
$('.right').click(go);
$('.left').click(go_l)
</script>
</body>
</html>
浙公网安备 33010602011771号