* {
padding: 0;
margin:0;
}
ul {
list-style: none;
}
.out {
width: 640px;
height: 270px;
margin:50px auto;
position: relative;
}
.out .img li {
position: absolute;
left:0;
top:0;
display: none;
}
.out .num {
position: absolute;
bottom: 20px;
left: 0;
font-size:0px;
text-align:center;
width: 100%;
}
.out .num li {
width: 20px;
height: 20px;
line-height:20px;
border-radius:50%;
background:#666;
color: #fff;
text-align:center;
display: inline-block;
font-size:16px;
margin:0 3px;
cursor: pointer;
}
.out .num li.active {
background:#a00;
}
.out .btn {
position:absolute;
top: 50%;
margin-top:-30px;
width: 30px;
height: 60px;
line-height:60px;
background:rgba(0, 0, 0, 0.5);
font-size:40px;
color: #fff;
text-align:center;
display: none;
}
.out .left {
left: 0;
}
.out .right {
right: 0;
}
.out:hover .btn {
display: block;
cursor: pointer;
}
</style>
<body>
<div class="out ">
<ul class="img ">
<li>
<a href="# ">
<img src="image/1.jpg " alt=" ">
</a>
</li>
<li>
<a href="# ">
<img src="image/2.jpg " alt=" ">
</a>
</li>
<li>
<a href="# ">
<img src="image/3.jpg " alt=" ">
</a>
</li>
<li>
<a href="# ">
<img src="image/4.jpg " alt=" ">
</a>
</li>
<li>
<a href="# ">
<img src="image/5.jpg " alt=" ">
</a>
</li>
</ul>
<ul class="num ">
</ul>
<div class="left btn ">
<</div>
<div class="right btn ">></div>
</div>
</body>
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript">
$(function() {
//程式碼初始化
var size=$(".img li").size();
for (var i = 1; i <= size; i++) {
var li="<li>"+i+"</li>";
$(".num").append(li);
};
//手動控制輪播效果
$(".img li").eq(0).show();
$(".num li").eq(0).addClass("active");
$(".num li").mouseover(function() {
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
i=index;
$(".img li").eq(index).fadeIn(300).siblings().fadeOut(300);
})
//自動
var i = 0;
var t = setInterval(move, 1500);
//核心向左的函式
function moveLeft() {
i--;
if (i == -1) {
i = size-1;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
}
//核心向右的函式
function move() {
i++;
if (i == size) {
i = 0;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
}
//定時器的開始與結束
$(".out").hover(function() {
clearInterval(t);
}, function() {
t = setInterval(move, 1500)
})
//左邊按鈕的點選事件
$(".out .left").click(function() {
moveLeft();
})
//右邊按鈕的點選事件
$(".out .right").click(function() {
move();
})
})
</script>
複製程式碼