HTML 之轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index1</title>
<style>
*{margin: 0;
padding: 0;
}
ul{
list-style:none;
}
.outer{
margin: 50px auto;
height: 340px;
width: 790px;
position: relative;
}
.img li{
position:absolute;
top: 0;
left:0;
}
.num {
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
}
.num li{
display: inline-block;
height: 20px;
width: 20px;
background-color: gray;
color: #ffffff;
text-align:center;
line-height:20px;
border-radius:50%;
margin: 0 10px;
}
.btn{
position: absolute;
height: 60px;
width: 30px;
background-color: darkgray;
color: #ffffff;
text-align: center;
line-height: 60px;
top:50%;
margin-top: -30px;
display: none;
}
.left_btn{
left: 0;
}
.right_btn{
right: 0;
}
.outer:hover .btn{
display:block;
}
.current{
background-color:red!important;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a><img src="image/1.jpeg"/></a></li>
<li><a><img src="image/2.jpeg"/></a></li>
<li><a><img src="image/3.jpeg"/></a></li>
<li><a><img src="image/4.jpeg"/></a></li>
</ul>
<ul class="num">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="left_btn btn"> < </div>
<div class="right_btn btn"> > </div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(".num li").mouseover(function(){
$(this).addClass("current").siblings().removeClass("current");
var index = $(this).index();
i = index;
$(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
})
var time = setInterval(move, 1500);
var i = 0;
function move(){
if(i==3){
i=-1;
}
i++;
$(".num li").eq(i).addClass("current").siblings().removeClass("current");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
function moveL(){
if(i==0){
i=4;
}
i--;
$(".num li").eq(i).addClass("current").siblings().removeClass("current");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
$(".outer").hover(function(){
clearInterval(time);
},function(){
time=setInterval(move,1500);
})
$(".right_btn").click(function() {
move();
})
$(".left_btn").click(function() {
moveL();
})
</script>
</body>
</html>
参考资料
