jquery实现两种轮播效果

     我想大家在浏览网页时都接触过轮播图。其实在bootstrap中也有相应的轮播插件,下面我们将抛开对其他JS库和框架的依赖,仅适用jquery来实现两种轮播效果。

     第一种轮播图应该是大家最熟悉的传统轮播图,以淘宝为例:

     这种轮播图的功能大致是这样的:点击左右箭头可以实现图片的切换效果,点击圆点圆点会变色,并快速指向对应的图片,此外,可以无限循环轮播,也就是你一直点图片会一直循环下去。CSS样式会比较多比较杂在这就不给出了,大家可以根据自己的需求,设置position和相应的display来实现定位和切换,其中比较关键的一点是轮播框的最外层容器设置一个overflow:hidden,将溢出隐藏,另外添加一些重复的图片来实现无限循环,因为跳转过程很快,用户是基本感受不到的。将可以实现五张图切换的demo的html和jquery代码贴出,大家可以拿下去试试,自己设置CSS并找一些大小一样的图片即可,如果有什么疑问,欢迎在下面与我交流。

html结构如下

<span style="font-size:18px;"><div id="container">
    <div id="list" >
        <img src="img/5.jpg" alt="1"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="5"/>
    </div>
    <div id="buttons">
        <span class="on"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow"><</a>
    <a href="javascript:;" id="next" class="arrow">></a>
</div></span>

     jquery 代码如下

<span style="font-size:18px;">$(function(){
	var index=0;
	$("#next").click(function(event) {
		$("#list").stop(false,true);
		index++;
		chooseBtn();
		move(-600);
	});

	$("#prev").click(function(event) {
		$("#list").stop(false,true);
		index--;
		chooseBtn();
		move(600);
	});

	$('#buttons>span').click(function(event) {
		$('#buttons>span').removeClass('on');
		$(this).addClass('on');
		var buttonIndex=$(this).index();
		index=buttonIndex;
		var distance=-(buttonIndex+1)*600
		$("#list").css("left",distance+"px")
	});

	function chooseBtn(){
		if(index==5){
			index=0;
		}
		else if(index==-1){
			index=4;
		}
		$('#buttons>span').removeClass('on');
		$('#buttons>span').eq(index).addClass('on');
	}

	function move(range){
		var Pos=parseInt($("#list").css("left"))+range+"px";
		$("#list").animate({"left":Pos},500,function(){
			if(parseInt($("#list").css("left"))==-3600){
				$("#list").css("left","-600px")
			}
			else if(parseInt($("#list").css("left"))==0){
				$("#list").css("left","-3000px")
			}
		});
	}
})</span>

  第二种轮播图以新东方在线的教师信息为例:


     这种轮播图的轮播特效在底部:点左右箭头,底部的多个头像实现滑动,并且橙色边框选中状态随之切换,大图也随着底部被选中的头像进行切换。参照这种效果,我试着自己写了一个能同一时间显示四个小圆圈demo。并且把代码贴在下面。

html结构如下:

<span style="font-size:18px;">  <div id="buttons">
      <div id="contents">
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span class="on">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
      </div>
   </div>
   <div id="list" >
        <img class="active" src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
    </div></span><pre name="code" class="html"><span style="font-size:18px;">  <a href="javascript:;" id="prev" class="arrow">&lt;</a>
  <a href="javascript:;" id="next" class="arrow">&gt;</a></span>

 
     jquery 代码如下 
<span style="font-size:18px;">$(function(){
	var index=3;
	var picindex=0;
	$("#next").click(function(event) {
		$("#contents").stop(true,true);//修正bug,stop必须在click之初就执行,否则将出现bug
		index++;
		picindex++;
		chooseBtn();
		choosePic();
		move(-220);
	});

	$("#prev").click(function(event) {
		$("#contents").stop(true,true);
		index--;
		picindex--;
		chooseBtn();
		choosePic();
		move(220);
	});

	$('#buttons span').click(function(event) {
		var oldDis=$(".on").offset().left;
		var newDis=$(this).offset().left;
		console.log(oldDis,newDis);
		var Distance=(newDis-oldDis)/220;
		console.log(Distance)
		$("#buttons span").removeClass('on');
		$(this).addClass('on');
		for(var i=0;i<Distance;i++){
			$("#next").trigger('click');
		}
	});
	
	function choosePic(){
		if(picindex==4){
			picindex=0;
		}
		else if(picindex==-1){
			picindex=3;
		}

		$('#list img').removeClass('active');
		$('#list img').eq(picindex).addClass('active');
	}

	function chooseBtn(){
		$('#buttons span').removeClass('on');
		$('#buttons span').eq(index).addClass('on');
	}

	function move(range){
		//$("#contents").stop(true,true)
		var Pos=parseInt($("#contents").css("left"))+range+"px";
		$("#contents").animate({"left":Pos},500,function(){
			console.log(index,$("#contents").css("left"));
			if(parseInt($("#contents").css("left"))==-1320){
				$("#contents").css("left","-440px");	
				index=2;
				chooseBtn();
			}
			else if(parseInt($("#contents").css("left"))==0){
				$("#contents").css("left","-880px");	
				index=4;
				chooseBtn();			
			}
		});
	}
})</span>
     一时兴起仓促写的代码难免有处理不当的地方,如果有什么BUG或者疑问欢迎与我讨论。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值