jquery实现两种轮播效果

╰+攻爆jí腚メ 2022-07-20 12:06 206阅读 0赞

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

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

![Center][]

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

html结构如下

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>

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

![Center 1][]

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

html结构如下：

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或者疑问欢迎与我讨论。

[Center]: /images/20220719/b1c2a93c8bca46e1aad3e4d54f71f0d6.png
[Center 1]: /images/20220719/04b2aad8200b4c9dbc3367cc61cd8f03.png