JQ 多张图的无缝滚动

slider.css

*{
	padding: 0;
	margin: 0;
}
li{
	list-style-type: none;
}
body{
	margin: 50px;
}
.wrap{
	border: 3px solid #f00;
	width: 600px;
	height: 200px;
	position: relative;
	overflow: hidden;
}
.wrap ul{
	overflow: hidden;
	position:absolute;
	width: 1600px;
	left: 0;
	top: 0;
	_height:1px;
}
.wrap ul li{
	float: left;
	width: 200px;
}

slider.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slider</title>
<link rel="stylesheet" href="slider.css">
</head>
<body>
<a href="javascript:;" class="goLeft">向左走</a>
<a href="javascript:;" class="goRight">向右走</a>
<div class="wrap">
    <ul>
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
        <li><img src="4.jpg" alt=""></li>
        <li><img src="5.jpg" alt=""></li>
    </ul>
</div>
<script src="jquery.js"></script>
<script src="slider.js"></script>
</body>
</html>

slider.js

// 如果想要使一个元素运动起来，一般情况下这个元素须要具有position属性absolute/relative
$(function(){
	var oul = $('.wrap ul');
	var oulHtml = oul.html();
	oul.html(oulHtml+oulHtml)
	var timeId = null;
	
	var ali = $('.wrap ul li');
	var aliWidth = ali.eq(0).width();
	var aliSize = ali.size();
	var ulWidth = aliWidth*aliSize;
	oul.width(ulWidth);	//1600px
	
	var speed = 2;

	function slider(){

		if(speed<0){
			if(oul.css('left')==-ulWidth/2+'px'){
	 		oul.css('left',0);
		 	}
		 	oul.css('left','+=-2px');
		}

	 	
		if(speed>0){
			if(oul.css('left')=='0px'){
	 		oul.css('left',-ulWidth/2+'px');
		 	}
		 	oul.css('left','+='+speed+'px');
		}
	 	
	 }
	
	// setInterval()函数的作用是：每隔一段时间，执行该函数里的代码
	 timeId = setInterval(slider,30);

	$('.wrap').mouseover(function(){
		// clearInterval()函数的作用是用来清除定时器
		clearInterval(timeId);
	});

	$('.wrap').mouseout(function(){
		timeId = setInterval(slider,30);
	});

	$('.goLeft').click(function(){
		speed=-2;
	});

	$('.goRight').click(function(){
		speed=2;
	});
});

效果图：

JQ 多张图的无缝滚动

猜你喜欢