jQuery按钮控制单排图片切换代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery按钮控制单排图片切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery按钮控制单排图片切换代码</title>
<meta name="description" content="Tutorial : Consecutive Slide">
<meta name="author" content="Webstuffshare">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">

	<div id="binder">
		<div class="prev"></div>
		<ul class="list">
			<li><img src="images/item/1.png" width="78" /></li>
			<li><img src="images/item/2.png" width="78" /></li>
			<li><img src="images/item/3.png" width="78" /></li>
			<li><img src="images/item/4.png" width="78" /></li>
			<li><img src="images/item/5.png" width="78" /></li>
			<li><img src="images/item/6.png" width="78" /></li>
			<li><img src="images/item/7.png" width="78" /></li>
			<li><img src="images/item/8.png" width="78" /></li>
			<li><img src="images/item/9.png" width="78" /></li>
			<li><img src="images/item/10.png" width="78" /></li>
			<li><img src="images/item/11.png" width="78" /></li>
			<li><img src="images/item/12.png" width="78" /></li>
			<li><img src="images/item/13.png" width="78" /></li>
			<li><img src="images/item/14.png" width="78" /></li>
			<li><img src="images/item/15.png" width="78" /></li>
			<li><img src="images/item/16.png" width="78" /></li>
			<li><img src="images/item/17.png" width="78" /></li>
			<li><img src="images/item/18.png" width="78" /></li>
		</ul>
		<div class="next"></div>
	</div>

</div>


<script src="jquery-1.6.4.min.js"></script>
<script src="script.js"></script>
</body>
</html>

JS代码(script.js):

$(document).ready(function(){
	//InitializeonMoving= false;
	item= $('.list li');
	itemReverse= item.get().reverse();
	itemSize= item.size();
	itemDisplayed= 6;
	itemToSlide= itemDisplayed * 9;
	currentSlide= 1;
	page= Math.round(itemSize/itemDisplayed);
	//Next button clicked$('.next').click(function(){
	if(onMoving || currentSlide >= 3) return false;
	onMoving = true,currentSlide++;
	$.each(item,function(){
	var i = $(this).index();
	var delay = i * 100;
	window.setTimeout(function (index){
	return function (){
	item.eq(index).stop().animate({
	'right':'+='+itemToSlide+'em'}
,function(){
	if(index >= itemSize-1) onMoving = false;
}
);
}
;
}
(i),delay);
}
);
}
);
	//Previous button clicked$('.prev').click(function(){
	if(onMoving || currentSlide == 1) return false;
	onMoving = true,currentSlide--;
	$.each(itemReverse,function(){
	var i = $(this).index();
	var delay = i * 100;
	window.setTimeout(function (index){
	return function (){
	$(itemReverse).eq(index).stop().animate({
	'right':'-='+itemToSlide+'em'}
,function(){
	if(index >= 0) onMoving = false;
}
);
}
;
}
(i),delay);
}
);
}
);
}
);

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;}
body{font-family:Raleway,Arial;background:url('images/background.png');text-align:center;color:#fff;font-size:13px;margin-top:3%;}
h3{font-size:50px;margin-bottom:1em;text-shadow:2px 2px 0px rgba(0,0,0,0.1);}
#content{display:block;width:900px;margin:20px auto;text-align:center;position:relative;}
#binder{display:block;width:700px;vertical-align:top;overflow:hidden;margin-right:auto;margin-left:auto;}
.list{display:inline-block;list-style-type:none;margin:0;width:100000px;text-align:left;background:url('images/wood.png') bottom left no-repeat;}
.list li{display:inline-block;width:78px;margin:2.2em 1.4em;position:relative;vertical-align:bottom;}
.next,.prev{display:block;position:absolute;width:35px;height:35px;cursor:pointer;border-radius:5px;}
.next{margin-top:-7.2em;right:5%;background:url('images/next.png') center center no-repeat;}
.next:hover{background:rgba(255,255,255,0.3) url('images/next.png') center center no-repeat;}
.prev{margin-top:3em;left:5%;background:url('images/prev.png') center center no-repeat;}
.prev:hover{background:rgba(255,255,255,0.3) url('images/prev.png') center center no-repeat;}

附件:下载该文件资源,减少时间成本(增值服务)