jquery之无缝轮播

最新推荐文章于 2023-10-19 16:50:00 发布

fengGer的bugs

最新推荐文章于 2023-10-19 16:50:00 发布

阅读量241

点赞数

分类专栏： js总结 js简单案例文章标签：无缝轮播

本文链接：https://blog.csdn.net/qq_41224512/article/details/88078937

版权

js简单案例同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

js总结

11 篇文章 0 订阅

订阅专栏

html文件（图片可更改）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="box">
			<ul class="showList" id="list">
				<li><img src="img/01.jpg"/></li>
				<li><img src="img/02.jpg"/></li>
				<li><img src="img/03.jpg"/></li>
				<li><img src="img/04.jpg"/></li>
				<li><img src="img/05.jpg"/></li>
				
			</ul>
			<!-- 角标 -->
			<ul class="iconList">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
			<!-- 左右按钮 -->
			<div id="btns">
				<span class="prev">&lt;</span>
				<span class="next">&gt;</span>
			</div>
		</div>
	</body>
</html>

css文件

* {
	padding: 0;
	margin: 0;
}

a {
	text-decoration: noen;
}

li {
	list-style: none;
}

.box {
	width: 500px;
	height: 300px;
	margin: 100px auto;
	position: relative;
	overflow: hidden;
}

.showList {
	position: absolute;
}

.box .showList li {
	width: 600px;
	height: 300px;
	float: left;
}

.box .showList li img {
	width: 600px;
	height: 300px;
}

/*角标 */
.box .iconList {
	height: 20px;
	z-index: 99;
	position: absolute;
	bottom: 20px;
	left: 190px;
}

.box .iconList li {
	width: 20px;
	height: 20px;
	float: left;
	background: #fff;
	text-align: center;
	border: 2px solid #ccc;
	border-radius: 50%;
	margin: 5px 2px;
	cursor: pointer;
}

.box .iconList li.select {
	border-color: #fff;
	background: red;
}

/*左右按钮*/ 
.box #btns span{
	display: none;
	position: absolute;
	width: 50px;
	height: 80px;
	background: rgba(0,0,0,0.3);
	color: #fff;
	top:37%;
	font-size: 40px;
	text-align: center;
	line-height:80px;
	cursor: pointer;
} 
#btns .next{
	right:10px;
}
#btns .prev{
	left: 10px;
}

js文件

$(function(){
	var firstImg = $('#list li').first().clone();
	$('#list').append(firstImg).width($('#list li').length*$('#list img').width());
	var count=0;
	var timer;
	autoTime();
	
	// 下一张
	$('.next').click(function(){
	    count++;
	    moveImg(count);
	})
	 
	// 上一张
	$('.prev').click(function(){
	    count--;
	    moveImg(count);
	})
	
	//定时器
	 function autoTime(){
	    timer = setInterval(function(){
	        count++;
	        moveImg(count);
	    }, 3000);
	 
	}
	//封装move函数
	function moveImg(num){
	 
	    // 如果是最后一张图片我们怎么办
	    if(count==$('#list li').length){
	        count = 1;
	        $('#list').css({left:0});
	    }
	 
	    // 是第一张
	    if(count==-1){
	        count=$('#list li').length-2;
	        $('#list').css({left:($('#list li').length-1)*-600});
	    }
	 
	    // 移动图片
	    $('#list').stop().animate({left:count*-600},800);
	 
	    // 角标
	    if(count==($('#list li').length-1)){
	        $('.iconList li').eq(0).addClass('select').siblings().removeClass('select');
	    }else{
	        $('.iconList li').eq(count).addClass('select').siblings().removeClass('select');
	    }
	}
	 
	//移入box清楚定时器，左右按钮显示出来
	$('.box').mouseover(function(){
	    $('.prev').show();
	    $('.next').show();
	    clearInterval(timer);
	}).mouseout(function(){
	    $('.prev').hide();
	    $('.next').hide();
	    autoTime();
	})
	//点击角标
	$('.iconList li').click(function(){
	    count = $(this).index();   
	    moveImg(count);
	})
});