无缝式轮播图

最新推荐文章于 2020-05-28 12:26:19 发布

web_seeker

最新推荐文章于 2020-05-28 12:26:19 发布

阅读量391

点赞数 1

分类专栏：轮播图文章标签：轮播图无缝轮播图

本文链接：https://blog.csdn.net/web_seeker/article/details/52606785

版权

轮播图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、html部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无缝滚动轮播图</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/scrollpic.js"></script>
</head>

<body>
	<div class="con">
    	<div class="con_in">
        	<ul class="c_pic">
        		<li><a href="javascript:;"><img src="img/01.jpg" width="400" height="307"></a></li>
        		<li><a href="javascript:;"><img src="img/02.jpg" width="400" height="307"></a></li>
        		<li><a href="javascript:;"><img src="img/03.jpg" width="400" height="307"></a></li>
        		<li><a href="javascript:;"><img src="img/04.jpg" width="400" height="307"></a></li>
        	</ul>
            <ol class="c_order">
            	<li class="current"></li>
            	<li></li>
            	<li></li>
            	<li></li>
            </ol>
        </div>
        <button class="btn_l"></button>
        <button class="btn_r"></button>
    </div>
</body>
</html>

2、css部分

@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; list-style:none; border:none;}

.con{ width:400px; height:307px; margin:100px auto; border:5px solid #ccc; position:relative;}
.con_in{ width:400px; height:307px; overflow:hidden; position:relative;}

.c_pic{ width:2000px; height:307px; position:absolute;}
.c_pic li{ float:left;}

.c_order{ width:96px; height:13px; position:absolute; left:40%; bottom:10px;}
.c_order li{ width:13px; height:13px; background:url(../img/00.png) 0 -1px no-repeat; float:left; margin:0 3px;}
.c_order li.current{ background-position:0 -27px; cursor:pointer;}

.btn_l,.btn_r{ width:50px; height:50px; background:url(../img/arr.png) no-repeat -1px 0; position:absolute; cursor:pointer;}
.btn_l{ left:-20px; top:129px;}
.btn_r{ background-position:-53px 0; right:-20px; top:129px;}

3、js部分

// JavaScript Document
$(function(){
	var timer = null;
	var numOl = 0;
	var numUl = 0;
	$('.c_pic').append($('.c_pic li').eq(0).clone(true));	
	var myFn = function(){
		numOl++;
		if(numOl >3){
			numOl = 0;//ol li 个数小于 ul li的个数。所以有两个极值判断，且ul li到第五个后，大于第五个的赋值到第二个图片以实现无缝的概念。	
		}
		
		numUl++;
		if(numUl > 4){
			<strong>numUl = 1;
			$('.c_pic').css('left','0');</strong>//实现无缝滚动，沿着同一个方向，不折回。	
		}
		var move = -400 * numUl;
		
		$('.c_order li').eq(numOl).addClass('current').siblings().removeClass('current');
	 	$('.c_pic').stop().animate({'left':move+'px'},1000);
	}
	timer = setInterval(myFn,1500);
	
	$('.con').hover(function(){
		clearInterval(timer);	
	},function(){
		timer = setInterval(myFn,1500);
	})
	
	$('.c_order li').click(function(){
		$(this).addClass('current').siblings().removeClass('current');
		<strong>numOl = $(this).index();</strong>//保证ol和ul的li点击和离开都一一对应
		<strong>numUl = $(this).index();</strong>
		var move = -400 *numUl;
		$('.c_pic').stop().animate({'left':move+'px'},1000);
	})
	
	$('.btn_r').click(function(){
		myFn();	
	})
	
	$('.btn_l').click(function(){
		numOl--;
		if(numOl<0){
			numOl = 3;
		}
		$('.c_order li').eq(numOl).addClass('current').siblings().removeClass('current');
		
		numUl--;
		if(numUl<0){
			<strong>numUl = 3;
			$('.c_pic').css('left','-1600px');</strong>//设置到极值后的滚动位置，实现无缝	
		}
		var move = -400 * numUl;
		$('.c_pic').stop().animate({'left':move+'px'},1000);
			
	})
})