效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
ul,ol{
list-style-type: none;
padding: 0;
margin: 0;
}
.box{
width: 560px;
height: 300px;
position: relative;
margin: 100px auto;
overflow: hidden;
}
.ul_list{
position: relative;
width: 560px;
height: 300px;
overflow: hidden;
}
.ul_list li{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
border: 1px solid #ccc;
}
.ul_list li img{
width: 560px;
height: 300px;
}
.ul_list li.show{
display: block;
}
.btn .leftBtn,.btn .rightBtn{
position: absolute;
height: 30px;
width: 30px;
top: 50%;
background: #000;
border-radius: 5px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.btn .leftBtn:hover,.btn .rightBtn:hover,.ol_list li:hover{
cursor: pointer;
}
.leftBtn{
left: 10px;
}
.rightBtn{
right: 10px;
}
.ol_list{
position: absolute;
bottom: 10px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
font-size: 0;
overflow: hidden;
}
.ol_list li{
float: left;
margin-right: 10px;
width: 10px;
height: 10px;
background: #000;
border-radius: 180px;
}
.ol_list li.active{
background: red;
}
</style>
<body>
<div class="box">
<ul class="ul_list">
<li><img src="images/0.jpg" alt="">1</li>
<li><img src="images/1.jpg" alt="">2</li>
<li><img src="images/2.jpg" alt="">3</li>
<li><img src="images/3.jpg" alt="">4</li>
<li><img src="images/4.jpg" alt="">5</li>
</ul>
<div class="btn">
<div class="rightBtn"></div>
<div class="leftBtn"></div>
</div>
<ol class="ol_list">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script src="js/jquery.min.js"></script>
<script>
var idx = 0;
var during = 500;
$(".rightBtn").on("click",function(){
rightHandle();
});
//左按钮点击事件
$(".leftBtn").on("click",function(){
$(".ul_list li").eq(idx).stop(true).fadeOut(during);
idx--;
$(".ul_list li").eq(idx).stop(true).fadeIn(during);
if(idx < 0){
idx = $(".ul_list li").length -1;
}
$(".ul_list li").eq(idx).stop(true).fadeIn(during);
$(".ol_list li").eq(idx).addClass('active').siblings().removeClass('active');
});
// 小圆点的点击事件，每一个都点击
$(".ol_list li").each(function(i){
$(this).on("click",function(a){
$(".ul_list li").eq(idx).stop(true).fadeOut(during);
idx = i;
$(".ul_list li").eq(idx).stop(true).fadeIn(during);
$(this).addClass('active').siblings().removeClass('active');
})
});
//右按钮的运动函数
function rightHandle(){
$(".ul_list li").eq(idx).stop(true).fadeOut(during);
idx++;
$(".ul_list li").eq(idx).stop(true).fadeIn(during);
if(idx > $(".ul_list li").length -1){
idx = 0;
}
$(".ul_list li").eq(idx).stop(true).fadeIn(during);
$(".ol_list li").eq(idx).addClass('active').siblings().removeClass('active');
}
// 自己主动运动的过程
var timer = setInterval(rightHandle,1000);
$(".box").mouseenter(function(event) {
/* Act on the event */
clearInterval(timer);
}).mouseleave(function(event){
/* Act on the event */
timer = setInterval(rightHandle,1000);
});
</script>
</body>
</html>