jQuery带数字左右按钮控制图片切换特效代码

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

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

以下是 jQuery带数字左右按钮控制图片切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery带数字左右按钮控制图片切换</title>
<link rel="stylesheet" href="css/index.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>

</head>

<body>

<div id="container">
	<div id="list">
		<img src="images/1.png" alt="1" data="3/1"/>
		<img src="images/1.png" alt="1" data="3/1"/>
		<img src="images/2.png" alt="2" data="3/2"/>
		<img src="images/3.png" alt="3" data="3/3"/>
		<img src="images/1.png" alt="3" data="3/3"/>
	</div>
	<a href="javascript:;" id="prev" class="arrow"><img src="images/index-2.png"/><span >3/1</span></a>
	<a href="javascript:;" id="next" class="arrow"><img src="images/index-3.png"/></a>
</div>
</body>
</html>

JS代码(index.js):

$(function (){
	var container = $('#container');
	var list = $('#list');
	var prev = $('#prev');
	var next = $('#next');
	var index = 1;
	var len = 3;
	var interval = 2000;
	var timer;
	function animate (offset){
	var left = parseInt(list.css('left')) + offset;
	if (offset>0){
	offset = '+=' + offset;
}
else{
	offset = '-=' + Math.abs(offset);
}
list.animate({
	'left':offset}
,300,function (){
	if(left > -200){
	list.css('left',-624 * len);
}
if(left < (-624 * len)){
	list.css('left',-624);
}
}
);
}
function play(){
	timer = setTimeout(function (){
	next.trigger('click');
	play();
}
,interval);
}
function stop(){
	clearTimeout(timer);
}
next.bind('click',function (){
	if (list.is(':animated')){
	return;
}
if (index == 3){
	index = 1;
	$("#prev span").html("3/1");
}
else{
	index += 1;
	$("#prev span").html("3/"+index);
}
animate(-624);
}
);
	prev.bind('click',function (){
	if (list.is(':animated')){
	return;
}
if (index == 1){
	index = 3;
	$("#prev span").html("3/3");
}
else{
	index -= 1;
	$("#prev span").html("3/"+index);
}
animate(624);
}
);
	//hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。该方法触发 mouseenter 和 mouseleave 事件。注意：如果只规定了一个函数，则它将会在 mouseenter 和 mouseleave 事件上运行。 container.hover(stop,play);
	play();
}
);

CSS代码(index.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
/*幻灯片样式开始*/
#container{width:624px;height:765px;margin:20px auto;border:1px solid #EAEEF1;overflow:hidden;position:relative;}
#list{height:765px;width:1872px;width:3120px;position:absolute;z-index:1;left:-624px;}
#list img{float:left;width:624px;height:765px;display:block;}
.arrow{cursor:pointer;display:block;line-height:38px;text-align:center;height:38px;position:absolute;z-index:2;top:300px;}
.arrow img{vertical-align:top;}
#prev{width:56px;left:2px;}
#next{width:28px;right:2px;}
.arrow span{color:#4a4a4a;font-size:12px;position:absolute;left:30px;}

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