JS特效——轮播图

最新推荐文章于 2024-05-11 17:40:25 发布

键.

最新推荐文章于 2024-05-11 17:40:25 发布

阅读量676

点赞数

分类专栏：前端特效文章标签： html css html5 javascript

本文链接：https://blog.csdn.net/beekim/article/details/120102311

版权

前端特效专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.原生JS普通轮播图

效果：
在这里插入图片描述
实现：

<div class="box">
	<ul class="imgs">
		<li class="active" ><img src="imgs/kasa0.jpg" ></li>
		<li ><img src="imgs/kasa1.jpg" ></li>
		<li><img src="imgs/kasa2.jpg" ></li>
		<li><img src="imgs/kasa3.jpg" ></li>
		<li><img src="imgs/kasa4.jpg" ></li>
		<li><img src="imgs/kasa5.jpg" ></li>
		<li><img src="imgs/kasa6.jpg" ></li>
		<li><img src="imgs/kasa7.jpg" ></li>
	</ul>
	<ul class="dots">
		<li class="active" value="0"></li>
		<li value="1"></li>
		<li value="2"></li>
		<li value="3"></li>
		<li value="4"></li>
		<li value="5"></li>
		<li value="6"></li>
		<li value="7"></li>
	</ul>
	<div class="next">
		<span><</span>
		<span>></span>
	</div>
</div>

*{
	padding:0;
	margin: 0;
}
li{
	list-style: none;
}
a{
text-decoration: none;
}
div.box{
	width: 1100px;
	height: 550px;
	margin: 20px auto;
	border: 2px solid purple;
	position: relative;
}
div.box>ul.imgs>li img{
	width: 1100px;
	height: 550px
}
div.box>ul.imgs>li{
	position: absolute;
	display: none;
}

.box .imgs .active{
	display: block;
}
div.box>ul.dots{
	display: flex;
	position: absolute;

	right: 100px;
	bottom: 10px;
}
div.box>ul.dots>li{
	margin: 10px;
	width: 10px;

	height: 10px;
	background-color: white;
	border-radius: 50%;
}
div.box>ul.dots>li.active{
	background-color: #dc18c3;
}

div.box> .next>span{
	position: absolute;
	display: block;
	width: 40px;
	height: 80px;
	color: white;
	text-align: center;
	background-color: rgba(0,0,0,0.5);
	line-height: 80px;
	font-size: 20px;
}
div.box> .next>span:first-child{
	left: 0;
	top: 230px;
}
div.box> .next>span:last-child{
	right: 0;
	top: 230px;
}

var num=0;
var imgList=document.querySelectorAll('.imgs li');
var dotList=document.querySelectorAll('.dots li');
var box=document.querySelector('.box');
var span=document.querySelectorAll('.next span');

function run(){
	for(var k=0;k<imgList.length;k++){
		imgList[k].removeAttribute('class')
		dotList[k].removeAttribute('class')
	}
	num++
	var n=num%imgList.length
	imgList[n].setAttribute('class','active')
	dotList[n].setAttribute('class','active')
		//console.log(n)
}

var time=setInterval(function(){
	run()
},1000)

//鼠标移入暂停循环图片
box.onmouseover=function(){
	clearInterval(time)
}

box.onmouseout=function(){
	time=setInterval(function(){run()},1000)
}

//点击小圆点
for(var l=0;l<dotList.length;l++){
	dotList[l].onclick=function(){
	console.log(this.value)
	num=this.value-1
	run()
	}
}

//上下一张
span[0].onclick=function(){
	console.log('num:'+num)
	if(num<=0){
		num=imgList.length-2
	}else{
		num-=2
	}
	run()
}	
span[1].onclick=function(){
	run()
}

将上例修改为用jQuery编写：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var num=0
	var imgList=$('.imgs li')
	var dotsList=$('.dots li')
	var span=$('.next span')
	var time;
	
	function run(){
		num++
		num%=imgList.length
		//图片动
		imgList.eq(num).siblings().removeAttr("class")
		imgList.eq(num).attr({class:"active"})
		//小圆点动
		dotsList.eq(num).siblings().removeAttr("class")
		dotsList.eq(num).attr({class:"active"})
	}
	
	//图片轮播
	time=setInterval(run,1000)
	
	//鼠标移入暂停轮播
	$('.box').mouseenter(function(){
		clearInterval(time)
	})
	$('.box').mouseleave(function(){
		time=setInterval(run,1000)
	})
	
	//点击小圆点
	dotsList.click(function(){
		//获取当前点击远点的属性value的值
		num=$(this).index()-1
		run()
	})
	//点击上下张
	span.eq(0).click(function(){
		if(num<=0){
			num=imgList.length-2
		}else{
			num-=2
		}
		run()
	})
	span.eq(1).click(function(){
		run()
	})
	
})
</script>

2.原生JS无缝轮播

效果：

实现：

<div class="warp">
	<div class="imglength">
		<img src="imgs/kasa0.jpg" >
		<img src="imgs/kasa1.jpg" >
		<img src="imgs/kasa2.jpg" >
		<img src="imgs/kasa3.jpg" >
		<img src="imgs/kasa0.jpg" >
	</div>
</div>

.warp{
		position: relative;
		width: 800px;
		height: 400px;
		margin:  50px auto;
		overflow: hidden;
	}
	.imglength{
		display: flex;
		width: 500%;
		height: 400px;;
		position: absolute;
		left: 0;
	}
	img{
		display: block;
		width: 800px;
		height: 400px;
	}

var imglength=document.querySelector('.warp .imglength')
	var timer
	var sideleft;
	var side=0;
	
function run(){
	side-=8
	imglength.style.left=side+'px'
	if(side<=-800*4){
		side=0
	}
	if(side%800==0){
		clearInterval(timer)
		setTimeout(function(){
			timer= setInterval(run,10)
		},1000)
	}
}
timer= setInterval(run,10)

3.jQuery无缝轮播图

效果：

实现方式一:(注意本方法布局时多加了一张初始图片)

<div class="warp">
	<div class="imglength">
		<img src="imgs/kasa0.jpg" >
		<img src="imgs/kasa1.jpg" >
		<img src="imgs/kasa2.jpg" >
		<img src="imgs/kasa3.jpg" >
		<img src="imgs/kasa0.jpg" >
	</div>
	<div class="dot">
		<ul>
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
</div>

.warp{
	position: relative;
	width: 800px;
	height: 400px;
	margin:  50px auto;
	overflow: hidden;
	
}
.imglength{
	display: flex;
	width: 500%;
	height: 400px;;
	position: absolute;
	left: 0;
}

img{
	
	display: block;
	width: 800px;
	height: 400px;
}
.warp ul {
	position: absolute;
	z-index: 10;
	list-style: none;
	display: flex;
	bottom: 10px;
}
.warp ul li{
	background-color: #1f0b2c;
	margin: 5px;
	width: 14px;
	height: 14px;
	font-size: 12px;
	text-align: center;
	color: white;
	line-height: 14px;
	border-radius: 50%;
}
.warp ul li.active{
	background-color: #a51dbd;
	color: #faf6ff;
}

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var side=0;
	var timer;
	var i=0;
	timer=setInterval(run,2000)
	 
	function run(){
		if(side<=-800*4){
			side=0
			//到达边界值时，立即完成当前动画
			$('.warp .imglength').animate({left:side+'px'},1000).stop(true,true)
		}
		side-=800;
		//先让图片滚动起来
		$('.warp .imglength').animate({left:side+'px'},1000)
		
		//设置小圆点跟随图片
		i++
		i%=$('ul li').length
		$('ul li').eq(i).addClass('active').siblings().removeClass('active')
	}
})
</script>

方法二：（布局同方法一）

$(function(){
	var i=0;
	var side=0;
setInterval(function(){
	i++
	$('.imglength').animate({left:-$('.imglength img').width()*i+'px'},500,function(){
		if(i>=$('.imglength img').length-1){
			i=0
			$('.imglength').css({left:'0px'})
		}
		
		//小圆点
		$('ul li').eq(i).addClass('active').siblings().removeClass('active')
	})
},2000)
})

方法三：（布局略有不同,此时没有要多的初始图片）

本方法的主要思路为：在图片轮播到第三张时，把第一张图append到盒子最后一张去，这时就能够实现每次切换图片时只是在切换最后两张的位置。

<div class="warp">
	<div class="imglength">
		<img src="imgs/kasa0.jpg" >
		<img src="imgs/kasa1.jpg" >
		<img src="imgs/kasa2.jpg" >
		<img src="imgs/kasa3.jpg" >
	</div>
	<div class="dot">
		<ul>
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
</div>

$(function(){
	var i=0;
	var side=0;
	var num=0；
	
setInterval(function(){
	i++
	$('.imglength').animate({left:-$('.imglength img').width()*i+'px'},500,function(){
		if(i>=3){
			i=2
			
			// 控制后面两个交替
			$('.imglength').append($('.imglength img').eq(0))
			$('.imglength').css({left:-$('.imglength img').width()*i+'px'})
		}
		
		//小圆点
		num++
		num%=$('.imglength img').length
		$('ul li').eq(num).addClass('active').siblings().removeClass('active')
	})	
},2000)
})

方法四：（此方法与方法三类似，只不过是切换第一二张图）

$(function(){
	var i=0;
	var side=0;
	var num=0;
setInterval(function(){
	i++
	$('.imglength').animate({left:-$('.imglength img').width()*i+'px'},500,function(){
			i=0
			
			// 控制后面两个交替
			$('.imglength').append($('.imglength img').eq(0))
			$('.imglength').css({left:-$('.imglength img').width()*i+'px'})
		
		//小圆点
		num++
		num%=$('.imglength img').length
		$('ul li').eq(num).addClass('active').siblings().removeClass('active')
	})	
},2000)
})

4.jQuery淡入淡出轮播图

效果：

<!-- 轮播图 -->
<div class="swiper">
	<div class="imgs">
		<img src="imgs/index/nav0.jpg" >
		<img src="imgs/index/nav1.jpg" >
		<img src="imgs/index/nav2.jpg" >
		<img src="imgs/index/nav3.jpg" >
	</div>
	<div class="dots">
		<div>
			<p class="active"></p>
			<p></p>
			<p></p>
			<p></p>
		</div>
	</div>
</div>

/* 轮播图 */
 .swiper{
	width: 1518px;
	height:522px;
	margin: 0 auto;
	position: relative;
}
 .swiper .imgs img{
	 position: absolute;
	 width: 1518px;
	 height:522px;
	 opacity: 0;
 }
.swiper .imgs img:first-child{
	opacity: 1;
}
.swiper .dots{
	position: absolute;
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 0;
}
.swiper .dots div{
	width: 100px;
	display: flex;
	justify-content: space-evenly;
}
.swiper .dots p{
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #f9f9f9;
}
.swiper .dots .active{
	background: #40a944;
}

//控制轮播图
$(function(){
	var num=0
	var timer
	
	timer=setInterval(function(){
		//计数，dots跟着变化
		num++
		num%=$('.swiper .imgs img').length
		$('.swiper .dots p').eq(num).addClass('active').siblings().removeClass('active')
		$('.swiper .imgs img').eq(1).animate({opacity:'1'},1500,function(){
			//第二张图片显示完之后，把第一张append到最后去
			$('.swiper .imgs img').eq(1).siblings().css({opacity:'0'})
			$('.swiper .imgs').append($('.swiper .imgs img').eq(0))
		})
	},3000)
	
})

5.jQuery实现炫酷轮播图

效果：

该轮播图的实现过程比较复杂，先分析一下需要实现的有哪些功能：

首先布局3张图放一个大盒子，用定位布局成效果中的样子
理解图片顺时针动起来的原理：图1到最后，图2到最前，图3到中间切z-index值最大
通过animate实现图片顺时针循环转动转动，逆时针是同理的
接下来就实现左右两边的点击切换特效
最后一步是最麻烦的，需要实现的功能是：每一次切换图片之后，都只能让中间的图片有a标签的点击跳转界面的作用
有了上面的思路之后，就可以开始编码了

<div class="top_swipper">
	<div class="top_header">
		<p>精挑细选</p>
	</div>
	<div class="imgsBox">
		<div><img src="../imgs/morestuff/stuffswipper01.png" ></div>
		<div><a href="details.html"><img src="../imgs/morestuff/stuffswipper02.png" ></a></div>
		<div><img src="../imgs/morestuff/stuffswipper03.png"></div>
	</div>
	<div class="imgsider">
		<p><</p>
		<p>></p>
	</div>
</div>

.top_swipper{
	width: 1200px;
	height: 500px;
	position: relative;
}
.top_header{
	height: 60px;
	font-size: 20px;
	text-align: center;
	line-height: 60px;
}

.imgsider p{
	position: absolute;
	top: 230px;
	z-index: 6;
	font-size: 20px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.3);
	box-shadow: 1px 2px 30px rgba(0,0,0,0.1);
	color: #40a944;	
}
.imgsider p:hover{
	background-color: rgba(64, 169, 68, 0.7);
	box-shadow: 1px 2px 30px rgba(0,0,0,0.5);
	color: #ffffff;	
}
.imgsider p:last-child{
	right: 0;
}

.top_swipper .imgsBox{
	width: 1200px;
	height: 400px;
	position: relative;
}
.top_swipper .imgsBox div{
	position: absolute;
}

.top_swipper .imgsBox div img{
	box-shadow: 1px 2px 20px rgba(0,0,0,0.2);
}
.top_swipper .imgsBox div:first-child{
	left: 0;
	z-index: 2;
}
.top_swipper .imgsBox div:nth-child(2){
	left: 100px;
	z-index: 5;
}
.top_swipper .imgsBox div:last-child{
	right: 0;
	z-index: 2;
}

// 控制轮播图
$(function(){
//全局变量a标签和定时器timer
var a
var timer

// 逆时针转动
function runClockwise(){
	$('.imgsBox div').eq(0).animate({left:200+'px'},500)
	$('.imgsBox div').eq(1).animate({zIndex:2,left:0},500,function(){
		//每次移动后要移除当前的a标签
		$(this).append($(this).children().children())
		a=$(this).children().eq(0)
		$(this).children().eq(0).remove()
	
	})
	$('.imgsBox div').eq(2).css({}).animate({zIndex:5,left:100+'px'},500,function(){
			//给该盒子追加a标签
			$(this).append(a)
			// 再把当前图片追加到新建的a标签中
			$(this).children().eq(1).eq(0).append($(this).children().eq(0))
	})
	$('.imgsBox').append($('.imgsBox div').eq(0))
}
// 顺时针转动
function runAnticlockwise(){
	$('.imgsBox div').eq(1).animate({zIndex:2,left:200+'px'},500,function(){
		//每次移动后要移除当前的a标签
		$(this).append($(this).children().children())
		a=$(this).children().eq(0)
		$(this).children().eq(0).remove()
	})
	
	$('.imgsBox div').eq(0).animate({zIndex:5,left:100+'px'},500,function(){
		// 给该盒子追加a标签
		$(this).append(a)
		// 再把当前图片追加到新建的a标签中
		$(this).children().eq(1).eq(0).append($(this).children().eq(0))
	})
	
	$('.imgsBox div').eq(2).css({}).animate({zIndex:2,left:0},500)
	$('.imgsBox').prepend($('.imgsBox div').eq(2))
}


timer=setInterval(runAnticlockwise,3000)


$('.imgsBox ').mouseenter(function(){
	clearInterval(timer)
})
$('.imgsBox ').mouseleave(function(){
	timer=setInterval(runClockwise,3000)
})

$('.imgsider p').eq(0).click(function(){
	runAnticlockwise()
	//阻止连续点击出现的bug
	$(this).hide()
	setTimeout(function(){
		$('.imgsider p').eq(0).show()
	},1000)
	
})
$('.imgsider p').eq(1).click(function(){
	runClockwise()
	//阻止连续点击出现的bug
	$(this).hide()
	setTimeout(function(){
		$('.imgsider p').eq(1).show()
	},1000)
})

})

6，总结

从原生JS的转到用jQuery来编写轮播图的特效，我们是在将一个实现起来比较麻烦的功能，逐渐地改良得书写起来更加简单。但是在通过jQuery注重逻辑性的编写的过程中，我们也可以将轮播图的特效写的更加的华丽，多样。总的来说，不管是哪种轮播图的实现都是基于我们写的第一版原生JS 来进行改良，优化的。只要我们在写之前慢慢分析需要实现的特效功能，再按部就班的编写，那么不管是什么轮播图，我们都可以将它实现。

键.

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JS特效——轮播图

1.原生JS普通轮播图效果：实现：<div class="box"> <ul class="imgs"> <li class="active" ><img src="imgs/kasa0.jpg" ></li> <li ><img src="imgs/kasa1.jpg" ></li> <li><img src="imgs/kasa2.jpg" ></li&gt
复制链接

扫一扫