图片轮换其实就这几行代码

最新推荐文章于 2024-04-25 23:08:15 发布

原创最新推荐文章于 2024-04-25 23:08:15 发布 · 525 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

63 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的简单图片轮播插件。该插件通过点击左右箭头来切换图片，并支持自动播放功能及鼠标悬停暂停效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮换</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function(){

	
	var $this=$(".wyj");
	var $li=$this.find(".uls li");
	$li.eq(0).show().siblings().hide();
  	var index=$this.find(".uls li:visible").index();
	var lenght=$li.length;
	//alert(lenght)

	//alert(index)
	//alert($("#ss").index())
	
$("#left").click(function(e) {
	//alert(index);
	index=index-1;
	if(index<=0){
		index=lenght-1;
			}
	$li.eq(index).show().siblings().hide();
});
$("#right").click(function(e) {
	righ();
});

var righ=function(){
	index=index+1;
	if(parseInt(index)>lenght-1){	
			index=0;
			}
	$li.eq(index).show().siblings().hide();}

timer=setInterval(function(){
righ();
	},500);
$("#left,#right").hover(function(e) {
    clearInterval(timer);
},function(){
timer=setInterval(function(){
righ();
	},500);})
})


</script>
<style>
*{ margin:0px; padding:0px;}
ul li{ list-style:none;}
.wyj{  overflow: hidden; position: relative; height:300px; width:800px; height:300px; margin:0 auto; margin-top:100PX; }
/*.uls li{ display:none;}*/
</style>

<body>

<div class="wyj">
<ul class="uls">
<li ><img src="images/banner_01.jpg"></li>
<li ><img src="images/banner_02.jpg"></li>
<li><img src="images/banner_03.jpg"></li>
<li ><img src="images/banner_04.jpg"></li>
</ul>
<img src="images/rotaleft.gif" width="26" height="99" id="left" style="position:absolute; left:3px; top:110px; cursor:pointer;">
<img src="images/rotaright.gif" width="26" height="99" id="right" style="position:absolute; right:3px; top:110px; cursor:pointer;">
</div>

</body>
</html>