版权声明：版权所有-江西服装学院 https://blog.csdn.net/qq_38263696/article/details/83474335
<!DOCTYPE html>
<html>
<head>
<title>notebook</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none;
}
.v_show li{
float:left;
}
.content{
width: 480px;
height: 300px;
position:absolute;
overflow: hidden;
}
.v_show{
width:1920px;
position: absolute;
}
img{
width: 480px;
height: 300px;
}
.radiu{
position: absolute;
z-index: 100;
top:260px;
left:180px;
}
.radiu > span{
display: inline-block;
width: 10px;
height:10px;
background-color: blue;
margin:0 10px;
border-radius: 10px;
background-color: #fff;
text-indent: -99999px;
}
.radiu >span.current{
background-color:green;
width:40px;
}
button{opacity:0.7;width: 0px;height: 0px; border-radius:40px;border:40px solid black;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<div class="content">
<div class="v_show">
<ul>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
</div>
<div class="radiu">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<button type="button" style="position:absolute;top:110px;left:-40px;" id="left_btn"></button>
<button type="button" style="position: absolute;top:110px;left:440px;" id="right_btn"></button>
</div>
</body>
<script>
var $content=$(".content")
$content.offset({top:(innerHeight-$content.height())/2,left:(innerWidth-$content.width())/2});
var $radiu=$(".radiu");
var $span= $radiu.find("span");
var page=2;
var key=true;
var timer;
var $v_show=$(".v_show");
var v_show_width=$v_show.width();
function change(){
$span.eq(page-1).addClass("current").siblings().removeClass("current");
$v_show.stop(true,false)
.animate({left:"-"+(page-1)*$content.width()},200,function(){
if(key){clearTimeout(timer);
timer=setTimeout(function(){page++;if(page==5)page=1;change();},3000);}
}
);
}
$span.hover(function(){
clearTimeout(timer);
page=parseInt(this.innerHTML);
key=false;
change();
},function(){key=true;change();});
$("#left_btn").click(function(event){
clearTimeout(timer);
if(page==1)page=4;
else page--;
key=false;
change();
event.stopPropagation();
event.preventDefault();
}).hover(function(){
clearTimeout(timer);
},function(){key=true;change();});
$("#right_btn").click(function(){
clearTimeout(timer);
if(page==4)page=1;
else page++;
key=false;
change();
}).hover(function(){
clearTimeout(timer);
},function(){key=true;change()});
</script>
</html>
