欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

【练习】jQuery图片滚动js

由于我是自己项目写自己的代码,可能无法套用到你的网站上,不过可以学习一下!

自己写的一个图片滚动,js非常蛋疼。记录在此!。

效果图

jQuery(".k_left.this").live("click",function(){
	jQuery(this).removeClass("this");
	var wid = 168;//div宽度
	var jpic = jQuery(".gwli").index()+1;//几张图片
	var zongw = 168*jpic-5*168;	//总共显示4张图片,在还有5张的时候取消点击事件
	var offset = jQuery(".gwul").css("left");//当前位置
	//alert(parseInt(offset));
	if(offset=="0px"){
		jQuery(".gwul").stop().animate({left:-wid},1000,function(){
			jQuery(".k_left").addClass("this");
			});
		jQuery(".k_right").addClass("this");
		}else{
			//alert(parseInt(offset));
			jQuery(".gwul").stop().animate({left:-wid+parseInt(offset)},1000,function(){
			if(zongw==-parseInt(offset)){//总共显示4张图片,在还有5张的时候取消点击事件
		   jQuery(".k_left").removeClass("this");		
		}else{	
			jQuery(".k_left").addClass("this");
		}
			});			
			}
	});
jQuery(".k_right.this").live("click",function(){
	jQuery(this).removeClass("this");
	var wid = 168;//div宽度
	var jpic = jQuery(".gwli").index()+1;//几张图片
	var offset = jQuery(".gwul").css("left");//当前位置
	//alert(parseInt(offset));
		//alert(parseInt(offset));
			jQuery(".gwul").stop().animate({left:wid+parseInt(offset)},1000,function(){
					if(wid==-parseInt(offset)){//在还有1张的时候取消右边点击事件
				jQuery(".k_right").removeClass("this");		
					}	else{
				jQuery(".k_right").addClass("this");
					}
				});
			jQuery(".k_left").addClass("this");		
	
	});
<div class="species_kongzhi"><div class="k_left this"></div><div class="k_right"></div><div class="c_content">
<div class="gwul" style="left:0px">
<div class="gwli"><img src="http://shanmao.cityofsteam.com/cityosweb/upload/wpindexgw/chittles_jz.jpg"   /></div>
<div class="gwli "><img src="http://shanmao.cityofsteam.com/cityosweb/upload/wpindexgw/chittles_jz.jpg"  /></div>
<div class="gwli "><img src="http://shanmao.cityofsteam.com/cityosweb/upload/wpindexgw/chittles_jz.jpg"  /></div>
<div class="gwli "><img src="http://shanmao.cityofsteam.com/cityosweb/upload/wpindexgw/chittles_jz.jpg"   /></div>
<div class="gwli"><img src="http://shanmao.cityofsteam.com/cityosweb/upload/wpindexgw/chittles_jz.jpg"  /></div>
<div class="gwli"><img src="http://shanmao.cityofsteam.com/cityosweb/upload/wpindexgw/chittles_jz.jpg"  /></div>
<div class="gwli"><img src="http://shanmao.cityofsteam.com/cityosweb/upload/wpindexgw/chittles_jz.jpg"  /></div>
<div class="gwli"><img src="http://shanmao.cityofsteam.com/cityosweb/upload/wpindexgw/chittles_jz.jpg"  /></div>
</div>
</div></div>
.species_kongzhi{ width:715px; height:105px; z-index:101; top:42px; right:8px; background:#000; position:absolute;background:url(__TMPL__shanmaocss/gw_list.jpg) no-repeat;}
.species_kongzhi .k_left{ width:20px; height:105px;  float:left}
.species_kongzhi .k_left.this{background:url(__TMPL__shanmaocss/gw_k_left.jpg) no-repeat;cursor:pointer;}
.species_kongzhi .k_right{ width:19px; height:105px; float:right}
.species_kongzhi .k_right.this{background:url(__TMPL__shanmaocss/gw_k_right.jpg) -1px 0 no-repeat;cursor:pointer;}
.species_kongzhi .c_content{ width:670px; float:left;  height:101px; margin:4px 0 0 4px; position:relative; overflow:hidden}
.species_kongzhi .c_content .gwul{ width:10000px; height:101px; position:relative;}
.species_kongzhi .c_content .gwli{ float:left; margin:0 2px 0 1px}
.species_kongzhi .c_content .gwli img{ width:165px; height:100px}
.species_kongzhi .c_content .gwli.this img{ border:1px solid #d72b22; width:163px; height:99px}

———————————————————————————————

后面做了功能追加: 点击第一张图片的时候,如果前面有图片则显示前面一张,点击显示中的最后一张图片的时候,这张图片前进一步,后面的图片(如果有的话)显示出来。

js代码如下:

var jpic = jQuery(".gwli").index()+1;
if(jpic<5){//如果初始化图片少于5张则不显示左边的可点击按钮
	jQuery(".k_left").removeClass("this");
	}
jQuery(".gwli").each(function(index){//点击每个图片处理相关操作
	jQuery(this).click(function(){
		jQuery(".gwli").removeClass("this").eq(index).addClass("this");
		var speciespic = jQuery(this).find("img").attr("src");
		str ='<div class="jzpic"><img src="'+speciespic+'" /></div>';
		jQuery("#gw_content").html("").append(str);
		var of = jQuery(this).position().left;
		var offset = jQuery(".gwul").css("left");
		//alert(of)
		//alert(of.left);
		if(of+parseInt(offset)==504){//点击第四张图片的时候显示下一张
			if(jQuery(".k_left").hasClass("this")){
			leftaction();
			}
			}else if(of+parseInt(offset)==0){//点击第一张图片的时候显示前一张,如果有的话
				if(jQuery(".k_right").hasClass("this")){
				rightaction();
				}				
				}
		});
	});
jQuery(".k_left.this").live("click",function(){
	jQuery(this).removeClass("this");
	leftaction();
	});
jQuery(".k_right.this").live("click",function(){
	jQuery(this).removeClass("this");
	rightaction();
	});

function leftaction(){
		var wid = 168;//div宽度
	var jpic = jQuery(".gwli").index()+1;//几张图片
	var zongw = 168*jpic-5*168;	//总共显示4张图片,在还有5张的时候取消点击事件
	var offset = jQuery(".gwul").css("left");//当前位置
	if(zongw==0){
		jQuery(".k_left").removeClass("this");
		}
	if(offset=="0px"){//开始的时候
		jQuery(".gwul").stop().animate({left:-wid},500,function(){
			jQuery(".k_left").addClass("this");
			});
		jQuery(".k_right").addClass("this");
		}else{
			//alert(parseInt(offset));
			jQuery(".gwul").stop().animate({left:-wid+parseInt(offset)},500,function(){
			if(zongw==-parseInt(offset) || zongw==0){//总共显示4张图片,在还有5张的时候取消点击事件
		   jQuery(".k_left").removeClass("this");		
		}else{	
			jQuery(".k_left").addClass("this");
		}
			});			
			}	
	}

function rightaction(){
		var wid = 168;//div宽度
	var jpic = jQuery(".gwli").index()+1;//几张图片
	var offset = jQuery(".gwul").css("left");//当前位置
	//alert(parseInt(offset));
		//alert(parseInt(offset));
			jQuery(".gwul").stop().animate({left:wid+parseInt(offset)},500,function(){
					if(wid==-parseInt(offset)){//在还有1张的时候取消右边点击事件
				jQuery(".k_right").removeClass("this");		
					}	else{
				jQuery(".k_right").addClass("this");
					}
				});
			jQuery(".k_left").addClass("this");	
	}

项目地址(如果不是上图的模样说明还在测试阶段,等待下个版本放出!):http://www.cityofsteam.com/cityosweb/default.php/bestiary

更多

本文固定链接: http://shanmao.me/web/jquery/lian-xi-jquery-tu-pian-gun-dong-js | 山猫的博客

该日志由 admin 于2012年08月03日发表在 jQuery 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 【练习】jQuery图片滚动js | 山猫的博客
关键字: ,