Jquery实现左右轮播效果

本文主要用Jquery框架实现左右轮播效果，这个框架可以通过http://jquery.com/下载。

首先展示下静态布局h5代码，代码非常简单。

<div id="slide">
		<ul class="pic-list">
			<li><img src="banner1.jpg"></li>
			<li><img src="banner2.jpg"></li>
			<li><img src="banner3.jpg"></li>
			<li><img src="banner1.jpg"></li>
		</ul>
		<div class="btn next">&gt;</div>
		<div class="btn prev">&lt;</div>
		<ul class="icon-list">
			<li class="active"></li>
			<li></li>
			<li></li>
		</ul>
	</div>

以下代码为样式布局部分。通过先li左浮动，设置ul的overflow值为hidden，将其他图片隐藏。主要结构如下图，黑色框内部分为可见部分。其他部分为不可见。至于为什么多放一张图1，稍后会解释。

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul,li{
			list-style-type: none;

		}
		#slide{
			height: 400px;
			width: 600px;
			margin: 100px auto;
			position: relative;
			overflow: hidden;
		}
		.pic-list{
			width: 2400px;
			height: 400px;
			position: absolute;
			top: 0;
			left: 0;
		}
		.pic-list li{
			float: left;
		}
		.pic-list li img{
			width: 600px;
			height: 400px;
		}
		.btn{
			opacity: 0;
			position: absolute;
			top: 50%;
			height: 50px;
			width: 50px;
			/*opacity: 0.5;*/
			border-radius: 5px;
			cursor: pointer;
			user-select: none;
			background: white;
			font-size: 25px;
			line-height: 50px;
			text-align: center;
			transition: all 1s;
			transform: translateY(-50%);
		}
		.next{
			right: 0;
		}
		.icon-list{
			position: absolute;
			bottom: 10px;
			left: 50%;
			transform: translateX(-50%);
		}
		.icon-list li{
			float: left;
			margin: 0 5px;
			height: 10px;
			width: 10px;
			border-radius: 50%;
			background: #ccc;
			cursor: pointer;
		}
		.icon-list .active{
			background: #fff;
		}
	</style>

静态布局后，布局如下图所示

静态布局后，最后开始写入JS代码，实现轮播效果，其他的不说，先上代码

<script type="text/javascript">
		$(function(){
			var timer = null; //声明一个全局定时器
			var index = 0;	/
			$(".next").click(function(){ //下一张
				next();
			});
			$(".prev").click(function(){ //上一张
				prev();
			})
			function next(){
				index++;
				if(index > 2){
					/*
					当图片到最后一张时跳回第一张，本例中在最后一张中放入了第一张的图片，为实现无缝切换图片的效果。
					*/
					 $(".pic-list").animate({left:-(index)*600},500); 
					 index = 0;
					 $(".pic-list").animate({left:0},0); //
				}
				$(".pic-list").animate({left:-index*600},500);
				iconHover(index);
			}
			function prev(){
				index--;
				if(index < 0 ){
					index = 2;
					$(".pic-list").animate({left:-(index+1)*600},0);
				}
				$(".pic-list").animate({left:-index*600},500);
				iconHover(index);
			}
			function auto(){ 
				timer = setInterval(function(){ //设置自动播放的定时器
					next();
					iconHover(index);
			},2000) 
			}
			auto();
			$("#slide").mouseover(function(){ //鼠标移入 定时器取消
				clearInterval(timer);
				$('.btn').css("opacity",0.5)
			})
			$("#slide").mouseleave(function(){ //鼠标离开 定时器开启
				auto();
				$('.btn').css("opacity",0)
			})
			//鼠标碰触圆点图标实现图片左右轮播
			$(".icon-list li").mouseover(function(){ 
				var index = $(this).index();
				$(".pic-list").animate({left:-index*600},500);
				iconHover(index);
			})
			//实现被选图片对应圆点图标索引更新
			function iconHover(index){
				$(".icon-list li").eq(index).addClass("active").siblings().removeClass("active");
			}
			
		})
	</script>

来源：CSDN

作者：一点自立的码农

链接：https://blog.csdn.net/weixin_39230257/article/details/82431354

标签

轮播