【练习】jQuery图片滚动js

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

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

[code lang=”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");

});
[/code]

[code lang=”html”]
<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>
[/code]

[code lang=”css”]
.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}
[/code]

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

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

js代码如下：

[code lang=”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");
}
[/code]

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