jquery手写简单轮播效果

青旅半醒 2023-06-16 08:21 17阅读 0赞

**基于jquery的简单轮播效果**

1.  **无缝轮播、前进后退、指示器（分页器）**
2.  **使用时注意设置组外层宽高**

**html代码**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet" href="index.css" />
    		<script src="jquery-1.11.0.js"></script>
    		<script src="index.js"></script>
    		<style>
    			/* 使用此代码，需要手动设置最外层的大小 */
    			.swiper {
    				width: 1000px;
    				height: 300px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="swiper">
    			
    			<ul class="inner clearfix">
    				<li><img src="images/1.jpg" alt="" /></li>
    				<li><img src="images/2.jpg" alt="" /></li>
    				<li><img src="images/3.jpg" alt="" /></li>
    				<li><img src="images/4.jpg" alt="" /></li>
    				<li><img src="images/5.jpg" alt="" /></li>
    			</ul>
    			
    			<ol class="indicators clearfix"></ol>
    			
    			<div class="control">
    				<span class="prev"><</span>
    				<span class="next">></span>
    			</div>
    		</div>
    	</body>
    </html>

**css代码**

/*初始化*/
    *{
    	margin: 0;
    	padding: 0;
    }
    /* 清除浮动 */
    .clearfix:after{
    	content: "";
    	display: block;
    	clear: both;
    }
    ul,ol,li{
    	list-style: none;
    }
    /*清楚图片的底部留白*/
    img{
    	vertical-align: middle;
    }
    /*轮播区域*/
    .swiper{
    	margin: 0 auto;
    	position: relative;
    	overflow: hidden;
    	background-color: pink;
    }
    /*轮播图*/
    .swiper ul.inner{
    	position: absolute;
    	left: 0;
    	top: 0;
    	height: 100%;
    }
    .swiper ul.inner li{
    	float: left;
    	height: 100%;
    }
    .swiper ul.inner li:hover{
    	cursor: move;
    }
    .swiper ul.inner li img{
    	width: 100%;
    	height: 100%;
    }
    /*指示器*/
    .swiper ol.indicators{
    	position: absolute;
    	left: 50%;
    	transform: translateX(-50%);
    	bottom: 10px;
    }
    .swiper ol.indicators li{
    	float: left;
    	width: 5vw;
    	height: 5vw;
    	max-width: 15px;
    	max-height: 15px;
    	text-align: center;
    	cursor: pointer;
    	background-color: lightgray;
    	margin: 0 3px;
    	border-radius: 50%;
    	border: 3px darkslategray solid;
    	
    }
    .swiper ol.indicators li.current{
    	background-color: orange;
    	border-color: #fff;
    }
    /*控制器*/
    .control span{
    	vertical-align: middle;
    	font-size: 32px;
    	position: absolute;
    	width: 50px;
    	height: 50px;
    	text-align: center;
    	line-height: 45px;
    	cursor: pointer;
    	background-color: rgba(255,255,255,0);
    	border-radius: 5px;
    	color: #ccc;
    }
    .control span.prev{
    	left: 10px;
    	top: 50%;
    	transform: translateY(-50%);
    }
    .control span.next{
    	right: 10px;
    	top: 50%;
    	margin-top: -25px;
    }
    .control span:hover{
    	background-color: rgba(0,0,0,.3);
    	color: white;
    }

**jquery代码**

$(function() {
    	/* 初始化页面 */
    	// 轮播总个数
    	var lists = $(".inner li").length
    	// 轮播图大小设置
    	$(".inner").width(100 * (lists + 1) + "%")
    	$(".inner li").width(100 / (lists + 1) + "%")
    	// 创建指示器
    	for (var i = 0; i < lists; i++) {
    		$("<li></li>").appendTo(".swiper .indicators")
    	}
    	$(".indicators li").eq(0).addClass("current")
    	/*定义参考值*/
    	var index = 0;
    	// 每次位移的距离
    	var step = $(".inner li").width();
    	/*鼠标选择指示器时，改变指示器状态，图片对应移动*/
    	$(".indicators li")
    		.mouseenter(function() {
    			//鼠标滑过的指示器，添加.current,去掉所有兄弟的.current
    			$(this).addClass("current").siblings().removeClass("current")
    			//获取鼠标滑过的为第几个
    			index = $(this).index()
    			//轮播图针对性位移：使用动画改变位置，动画执行时间为500ms
    			$(".inner").stop().animate({
    				left: -index * step
    			}, 500)
    		})
    
    	/*实现无缝对接 --将第一张图克隆一份到最后。这样总共有6张图，5个指示器。接下来就是数学运算的过程*/
    	$(".inner li").eq(0).clone(true).appendTo(".inner")
    	/*鼠标点击左侧*/
    	$(".prev").click(function() {
    		// 每次位移的距离
    		step = $(".inner li").width();
    		//定义结束条件：不能一直变大。某个值时将参考值归零，并将整个轮播图瞬间归位
    		if (index == lists) {
    			$(".inner").css("left", 0)
    			index = 0;
    		}
    		index++;
    		//点击之后，参考值加一，图片动画移动
    		$(".inner").stop().animate({
    			left: -index * step
    		}, 500)
    		//显示最后一张图时，指示器指示第一个，其余情况指示器对应指示
    		if (index == lists) {
    			$(".indicators li").eq(0).addClass("current").siblings().removeClass("current")
    		} else {
    			$(".indicators li").eq(index).addClass("current").siblings().removeClass("current")
    		}
    	})
    	//右侧点击
    	$(".next").click(function() {
    		// 每次位移的距离
    		step = $(".inner li").width();
    		//定义结束条件
    		if (index == 0) {
    			$(".inner").css("left", -lists * step)
    			index = lists;
    		}
    		index--;
    		$(".inner").stop().animate({
    			left: -index * step
    		}, 500)
    		$(".indicators li").eq(index).addClass("current").siblings().removeClass("current")
    	})
    	//使用定时器，循环点击 左侧按钮
    	var time = setInterval(function() {
    		$(".prev").trigger('click')
    	}, 2000)
    	//鼠标进入 轮播范围停止轮播，离开之后重新开启轮播
    	$(".swiper").hover(function() {
    		clearInterval(time)
    	}, function() {
    		time = setInterval(function() {
    			$(".prev").trigger('click')
    		}, 2000)
    	})
    })