循环滚动幻灯片（无插件）

最新推荐文章于 2024-07-17 15:26:15 发布

AlenCheng

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量810

点赞数 1

分类专栏： jQuery 文章标签： class function div timer javascript 2010

本文链接：https://blog.csdn.net/ck199007081001/article/details/7578071

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是今天自己写的一个循环切换的幻灯片，没有使用插件，贴出来和大家分享下，互相交流交流，也希望找出其中的不足，加以更新。。。。另外在我的资源中也附下载.

js.代码

<script language="javascript" src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
	var $imgItems = $("#imgPlay #actor li");           //获取所有的图片信息
	var count = $imgItems.length;                      //总数
	var $move = $("#imgPlay #actor");                   
	var moveWidth = $imgItems.eq(0).outerWidth(true); //移动宽度
	var index = 0;				           //当前索引
	var $spans;					  //焦点图标集合
	//添加焦点
	var addFocus = function(){					    
		var span = "";
		for(var i=0;i<count;i++){
			span += i==0 ? "<span class='on'></span>" : "<span></span>";
		}
		$spans = $(span);
		$("#numInner").empty().append($spans);
		$("#imgPlay div.num p.mc").width($("#numInner").width());
		$("#imgPlay div.num p.mc").append($spans);
	}	
	addFocus();
	//焦点单击事件
	$spans.click(function(){
		var currentIndex = $spans.filter(".on")         //获取当前存在焦点的索引
			.prevAll().length;
		index = $(this).prevAll().length;               //获取当前点击的索引
		if(currentIndex==count-1 && index==0){          //如果存在焦点的索引为最后一个，用点击的为第一个
			change("last",500,-(count)*moveWidth);
		}else if(currentIndex==0 && index==count-1){   //如果存在焦点的索引为第一个，用户点击的为最后一个
			change("first",500,0);
		}else{						//普通切换
			change("",500,-index*moveWidth);
		}
	});
	var autoMove = function(){						 //自动切换
		index==count-1 ?  index = 0 : index++;
		index==0 ?　change("last",500,-(count)*moveWidth) : change("",500,-index*moveWidth);
	}
	var timeObj = setInterval(autoMove,5000);
	//图片切换  类型first，last :时间:位移
	var change = function(type,timer,moveX){
		if(type=="first"){									    //当前为第一张时，用户点击上一页
			var $last = $imgItems.eq($imgItems.length-1).clone(true);
			$last.prependTo($move);                                     
			$move.width($move.width()+moveWidth);
			$move.stop(true,true).css("marginLeft",-moveWidth).animate({marginLeft:0},timer,function(){
				$move.css("marginLeft",-index*moveWidth);	    //将move的margnleft值变为0；
				$last.remove();                                     //移除克隆的最后一张
			});
		}else if(type=="last"){                                //当前为最后一张时，用户点击下一张
			var $first = $imgItems.eq(0).clone(true);
			$first.appendTo($move);
			$move.width($move.width()+moveWidth);
			$move.stop(true,true).animate({marginLeft:moveX},timer,function(){
				$move.css("marginLeft",0);				        //将move的margnleft值变为0；
				$first.remove();				                //移除克隆来的第一张
			}); 
		}else{                                                 //普通切换
			$move.stop(true,true).animate({marginLeft:moveX},timer);
		}
		$("div.num p.mc span").eq(index).addClass("on")        //切换当前索引图标
			.siblings("span").removeClass("on");
	}
	//鼠标进入清除计时器，鼠标离开添加计时器
	$("div.next ,div.prev ,p.mc").mouseout(function(){
		timeObj = setInterval(autoMove,5000);
	}).mouseover(function(){
		clearInterval(timeObj);
	})
	//点击下一张/上一张
	$("div.next ,div.prev").click(function(){  
		$(this).attr("class")=="prev" ? index-- : index++;     //上一张index--，下一张index++
		if(index>=count){
			index = 0;
			change("last",500,-(count)*moveWidth);
			return;
		}
		if(index<0){
			index = count - 1;
			change("first",500,-moveWidth);
			return;
		}
		change("",500,-index*moveWidth);
	});
});
</script>

html.代码

<body style="text-align:center">
<DIV id=imgPlay>
  <UL class=imgs id=actor>
    <LI><A href="#" target=_blank><IMG title=板长寿司2010罗志祥舞法舞天北京演唱会 src="images/01.jpg"></A>
      <DIV class=btn><A title=立即购买 href="#" target=_blank>立即购买</A></DIV>
    </LI>
    <LI><A href="#" target=_blank><IMG title=张学友2011巡回演唱会北京站 src="images/02.jpg"></A>
      <DIV class=btn><A title=立即购买 href="#" target=_blank>立即购买</A></DIV>
    </LI>
    <LI><A href="#" target=_blank><IMG title=爱无止境Air Supply空气补给站北京演唱会 src="images/03.jpg"></A>
      <DIV class=btn><A title=立即购买 href="#" target=_blank>立即购买</A></DIV>
    </LI>
    <LI><A href="#" target=_blank><IMG title=2010迈克学摇滚中国巡演北京演唱会  src="images/04.jpg"></A>
      <DIV class=btn><A title=立即购买 href="#" target=_blank>立即购买</A></DIV>
    </LI>
    <LI><A href="#" target=_blank><IMG title=2010张杰北京演唱会 src="images/05.jpg"></A>
      <DIV class=btn><A title=立即购买 href="#" target=_blank>立即购买</A></DIV>
    </LI>
    <LI><A href="#" target=_blank><IMG title=海上良宵”蔡琴2010北京演唱会 src="images/06.jpg"></A>
      <DIV class=btn><A title=立即购买 href="#" target=_blank>立即购买</A></DIV>
    </LI>
  </UL>
  <DIV class=num>
    <P class=lc></P>
    <P class=mc></P>
    <P class=rc></P>
  </DIV>
  <DIV class=num id=numInner></DIV>
  <DIV class=prev>上一张</DIV>
  <DIV class=next>下一张</DIV>
</DIV>
</body>

AlenCheng

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
循环滚动幻灯片（无插件）

这是今天自己写的一个循环切换的幻灯片，没有使用插件，贴出来和大家分享下，互相交流交流，也希望找出其中的不足，加以更新。。。。另外在我的资源中也附下载.js.代码$(document).ready(function(){ var $imgItems = $("#imgPlay #actor li"); //获取所有的图片信息 var count = $imgIte
复制链接

扫一扫