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

最新推荐文章于 2021-06-16 02:43:08 发布

九木旭

最新推荐文章于 2021-06-16 02:43:08 发布

阅读量471

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/xdprintf/article/details/49558811

版权

javascript 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

<!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>

九木旭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片轮换其实就这几行代码

图片轮换$(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
复制链接

扫一扫