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" />
<meta http-equiv="content-language" content="zh-cn" />
<title>jQuery左右滑动切换图片代码</title>
<style>
*{margin:0px;padding:0px;list-style-type:none;}
.v_out{width:748px;margin:20px auto;overflow:hidden;}
.v_show{width:665px;overflow:hidden;position:relative;height:280px;float:left}
.v_cont{ width:6650px;position:absolute;left:0px;top:0px;}
.v_cont ul{float:left;text-align:center;line-height:50px;}
.v_cont ul li{width:665px;height:250px;background:#f8f8f8;float:left;margin-top:3px;}

/*---圆圈---*/
.v_out_p{position:relative;overflow:visible}
.circle{position:absolute;left: 40px;top: 290px;}
.circle li{width:120px;height:60px;float:left;margin-right:10px;background:#ccc}
.circle .circle-cur{background:#f00}

/*---切换---*/
.prev,.next{float:left;padding:105px 9px 0}
.prev a{ background:#f00;}
.prev .ico_1{ background:url(input_a.gif) no-repeat 0 -3757px;}

.next a{background:#f00 }
.next .ico_2{background:url(input_a.gif) no-repeat right -3757px;}
.prev,.prev a,.next,.next a{width:21px;height:28px; display:block}

</style>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>

</head>

<body>

<div class="v_out v_out_p">
<div class="prev"><a href="javascript:void(0)"></a></div>
<div class="v_show">

<div class="v_cont">
<ul>
<li index="0" style="background:#f00">[第1讲]</li>
<li index="1" style="background:#ff0">[第2讲]</li>
<li index="2" style="background:#f0f">[第3讲]</li>
<li index="3" style="background:#999">[第4讲]</li>
<li index="4" style="background:#666">[第5讲]</li>
</ul>
</div>

</div>

<div class="next"><a href="javascript:void(0)"></a> </div>


<ul class="circle">

<li class="circle-cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>

</ul>

</div>

<script type="text/javascript">
  
		 $(function(){

				/*======next======*/
				$(".next a").click(function(){ nextscroll() });

				function nextscroll(){

						var vcon = $(".v_cont ");
						var offset = ($(".v_cont li").width())*-1;
						
						vcon.stop().animate({left:offset},"slow",function(){

							 var firstItem = $(".v_cont ul li").first();
							 vcon.find("ul").append(firstItem);
							 $(this).css("left","0px");

							 circle()
							
						});  
					
				};


				function circle(){
					  
						var currentItem = $(".v_cont ul li").first();
						var currentIndex = currentItem.attr("index");

						$(".circle li").removeClass("circle-cur");
						$(".circle li").eq(currentIndex).addClass("circle-cur");
						
				}

				//setInterval(nextscroll,2000)
				 
				/*======prev======*/
				$(".prev a").click(function(){

						var vcon = $(".v_cont ");
						var offset = ($(".v_cont li").width()*-1);

						var lastItem = $(".v_cont ul li").last();
						vcon.find("ul").prepend(lastItem);
						vcon.css("left",offset);
						vcon.animate({left:"0px"},"slow",function(){
							 circle()
						})

				 });

			   /*======btn====circle======*/
				 var animateEnd = 1;

				$(".circle li").click(function(){

					   if(animateEnd==0){return;}

					   $(this).addClass("circle-cur").siblings().removeClass("circle-cur");
					
						var nextindex = $(this).index();
						var currentindex = $(".v_cont li").first().attr("index");
						var curr = $(".v_cont li").first().clone();
						
						if(nextindex > currentindex){

								for (var i = 0; i < nextindex - currentindex; i++) {
									 
									 var firstItem = $(".v_cont li").first();
									 $(".v_cont ul").append(firstItem); 
										
								}

								$(".v_cont ul").prepend(curr);

								var offset = ($(".v_cont li").width())*-1;

								if(animateEnd==1){

									animateEnd=0;	
									$(".v_cont").stop().animate({left:offset},"slow",function(){

											$(".v_cont ul li").first().remove();
											$(".v_cont").css("left","0px");
											animateEnd=1;

									}); 

								} 

						}else{

								var curt = $(".v_cont li").last().clone();

								for (var i = 0; i < currentindex - nextindex; i++) {
									 var lastItem = $(".v_cont li").last();
									 $(".v_cont ul").prepend(lastItem);
								}

								$(".v_cont ul").append(curt);

								var offset = ($(".v_cont li").width())*-1;

								$(".v_cont").css("left",offset);
										

								  if(animateEnd==1){

										animateEnd=0;	
										$(".v_cont").stop().animate({left:"0px"},"slow",function(){
											
											$(".v_cont ul li").last().remove();
											animateEnd=1;
										  
										}); 

									} 
							
							}
				});
		 })
</script>
</body>
</html>

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