<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery-2.1.4.min.js"></script>
<script>
//手动轮播效果
$(function () {
var size=$(".img li").size();
//根据图片数量，动态添加,<li>标签个数，无需再下文手动添加
for (var i=1;i<=size;i++){
var li="<li>"+i+"</li>"
$(".num").append(li);
}
$(".num li").eq(0).show(); //eq根据索引选择
$(".num li").mouseover(function () {
$(this).addClass("active").siblings().removeClass("active"); //当前标签加上active效果，其他兄弟标签取消active效果
var index=$(this).index();
i = index;
$(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
});
i=0;
var t= setInterval(move,1500)
function move() {
i++;
if(i==size){
i=0;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
};
function moveL() {
i--;
if (i==-1){
i = size-1;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
$(".out").hover(function () {
clearInterval(t);
}),function () {
t=setInterval(move,1500);
};
$(".out .right").click(function () {
move()
});
$(".out .left").click(function () {
moveL()
});
});
</script>
</head>
<body>
<div class="out">
<ul class="img">
<li><a href="#"><img src="images/001.jpg" ></a></li>
<li><a href="#"><img src="images/002.jpg" ></a></li>
<li><a href="#"><img src="images/003.jpg" ></a></li>
<li><a href="#"><img src="images/004.jpg" ></a></li>
<li><a href="#"><img src="images/005.jpg" ></a></li>
</ul>
<ul class="num">
<!--<li class="active">1</li>-->
<!--<li>2</li>-->
<!--<li>3</li>-->
<!--<li>4</li>-->
<!--<li>5</li>-->
</ul>
<div class="left btn"><</div>
<div class="right btn">></div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.out{
width: 730px;
height: 454px;
/*border: 8px solid mediumvioletred;*/
margin: 50px auto;
position: relative;
}
.out .img li{
position: absolute;
left: 0;
top: 0;
}
.out .num{
position: absolute;
left:0;
bottom: 20px;
text-align: center;
font-size: 0;
width: 50%;
}
.out .btn{
position: absolute;
top:50%;
margin-top: -30px;
width: 30px;
height: 60px;
background-color: aliceblue;
color: black;
text-align: center;
line-height: 60px;
font-size: 40px;
display: none;
}
.out .num li{
width: 20px;
height: 20px;
background-color: grey;
color: #fff;
text-align: center;
line-height: 20px;
border-radius: 50%;
display: inline;
font-size: 18px;
margin: 0 10px;
cursor: pointer;
}
.out .num li.active{
background-color: red;
}
.out .left{
left: 0;
}
.out .right{
right: 0;
}
.out:hover .btn{
display: block;
}
style
时间： 2024-08-01 12:59:13