Jquery 实现无缝滑动轮播图特效

最新推荐文章于 2024-05-14 17:19:58 发布

借汝之光，得以光明

最新推荐文章于 2024-05-14 17:19:58 发布

阅读量3.5k

点赞数 1

分类专栏： Web前端开发文章标签：轮播图滑动轮播图 jquery 无缝轮播图

本文链接：https://blog.csdn.net/weixin_44588495/article/details/95797602

版权

Web前端开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

效果图

正常的滑动轮播图在换到末尾时会有一个大的回滚，转移到第一张图片。这样给客户的视觉冲击十分的不好，所以我给大家分享一下原创的无缝轮播图。
在这里插入图片描述

源代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</titl
	<style>
	.lun{
		width:100%;
		min-width: 1200px;
	}
	.lun .main{
		position: relative;
		overflow: hidden;
	}
	.lun .lun_bo{
		overflow: hidden;
		position: absolute;
	}
	.lun .lun_bo:hover{
		cursor: pointer;
	}
	.lun .lun_bo img{
		display: block;
		float:left;
	}
	.lun .btn_demo{
		width:100%;
		height:100px;
		background: rgba(0,0,0,0.5);
		position:absolute;
		bottom: 0;
		left:0;
		z-index: 1000;
	}
	.lun .btn_disc{
		overflow: hidden;
		text-align: center;

	}
	.lun .desc{
		color: #fff;
		text-align: center;
		font-size: 20px;
		margin: 15px;
	}
	.lun a{
		width:15px;
		height:15px;
		background: #fff;
		border-radius: 50%;
		margin: 5px;
		display: inline-block;
	}
	.lun a:hover{
		cursor: pointer;
	}
	.lun .direct{
		background: transparent;
		position: absolute;
		top: 200px;
		height: 30px;
		line-height: 25px;
		text-align: center;
		font-size: 40px;
		padding: 3px;
		border: 4px solid #fff;
		color: #fff;
		font-weight: 700;
		display: none;
	}
	.lun .left{
		left:70px;
	}
	.lun .right{
		right:70px;
	}
	.lun .direct:hover{
		cursor: pointer;
	}
			
</style>
</head>
<body>
	<div class="lun">
		<div class="main">
			<div class="lun_bo">
				<img  src="../images/lun5.png" alt="">
				<img  src="../images/lun1.png" alt="">
				<img  src="../images/lun2.png" alt="">
				<img  src="../images/lun3.png" alt="">
				<img  src="../images/lun4.jpg" alt="">
				<img  src="../images/lun5.png" alt="">
				<img  src="../images/lun1.png" alt="">
			</div>
			<div class="btn_demo">
				<div class="desc"></div>
				<div class="btn_disc">
					<a id="1" class="circle"></a>
					<a id="2" class="circle"></a>
					<a id="3" class="circle"></a>
					<a id="4" class="circle"></a>
					<a id="5" class="circle"></a>
				</div>
			</div>
			<div class="left direct"><</div>
			<div class="right direct">></div>
		</div>
	</div>
<script src="../js/jquery.js"></script>
<script>
$(function(){
	var scrollIndex = 1;
	var $lunbo = $(".lun_bo");
	var $circle = $(".circle");
	var $main = $('.lun .main');
	var isAnimated = false;
	var len;
	var arr = ["立德树人 知行合一",
			   "求是 筑基 勤勉 致用",
			   "实事求是 笃学诚行",
			   "博学 求真 惟恒 创新",
			   "历史学院召开本科教学专题会议"]
	function init(){
		// 动态设置轮播图的大小
		var $m_width = $main.width();
		$('.lun_bo>img').css("width",$m_width);
		// 设置图片父容器的大小
		$('.lun_bo').css("width",$m_width*7+"px");
		// $('.lun_bo').css("left")
		var $lun_height = $('.lun_bo').height();
		$(".lun .main").css("height",$lun_height + "px");
		// 设置轮播图初始的left
		$('.lun_bo').css("left",-$m_width*scrollIndex +"px");
		showCir();
		showContent();
	}
	init();
	$(window).on("resize load",function(){
		init();
	})
	// 轮播图滚动
	function lunShow(){
		len = $('.lun .main').width();
		$lunbo.animate({left:-len*scrollIndex+"px"},function(){
			show();
		});	
	}
	function show(){
		//right
		if(scrollIndex <= 0){
			$lunbo[0].style.left = -5*len+"px";
			scrollIndex = 5;
		}
		//left
		if(scrollIndex>=6){
			$lunbo[0].style.left=-1*len+"px";
			scrollIndex = 1;
		}
		showCir();
		showContent();
		isAnimated = false;
	}
	function showCir(){
		$circle.css("background","#fff");
		$circle.eq(scrollIndex -1).css("background","red");
	}
	function autoPlay(){
		if(!isAnimated){
			isAnimated = true;
			scrollIndex++;
			lunShow();
		}
	}
	function showContent(){
		$(".lun .desc").empty();
		$(".lun .desc").append(arr[scrollIndex -1]);
	}
	$(".lun .left").on("click",function(){
		if(!isAnimated){
			isAnimated = true;
			scrollIndex++;
			lunShow();
		}
	})
	$(".lun .right").on("click",function(){
		if(!isAnimated){
			isAnimated = true;
			scrollIndex--;
			lunShow();
		}
	})
	$(".btn_disc>a").on("click",function(){
		if(!isAnimated){
			isAnimated = true;
			scrollIndex=this.id;
			lunShow();
		}
	})
	var timer = setInterval(autoPlay,2000);
	$main.on("mouseout",function(){
		$(".lun .left").css("display","none");
		$(".lun .right").css("display","none");
		timer = setInterval(autoPlay,2000);
	})
	$main.on("mouseover",function(){
		$(".lun .left").css("display","block");
		$(".lun .right").css("display","block");
		clearInterval(timer);
	})
})	
	
</script>
</body>
</html>

借汝之光，得以光明

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Jquery 实现无缝滑动轮播图特效

效果图正常的滑动轮播图在换到末尾时会有一个大的转移，转移到第一张图片。这样给客户的视觉冲击十分的不好，所以我给大家分享一下原创的无缝轮播图。源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</titl &l...
复制链接

扫一扫

专栏目录