现在是点击右边按钮无限制的切换了.
我想让它切换到了最后就停止切换了.要怎么来判断啊?
关键是这里if(cur == li-1){
return false;
}
自己插入jquery文件.
<!doctype html>
<html>
<head>
<style type="text/css">
*{padding:0;margin:0;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.gallery_pic_small{width:757px;height:50px;position:relative;overflow:hidden;margin-top:8px;margin-left:9px}
.gallery_pic_small_w{width:836px;height:62px; background:url(../images/gallery_nav_bg.jpg) no-repeat;margin:0 auto 46px}
.gallery_small_left{margin-top:22px;margin-left:15px;width:16px;height:16px;overflow:hidden;background:orange;}
.gallery_small_right{background:orange;margin-top:22px;margin-left:10px;width:16px;height:16px;overflow:hidden}
.gallery_pic_small_in{position:absolute;top:0;left:0;}
.gallery_pic_small_in li{float:left;width:;margin-right:13px;width:115px;display:inline}
.gallery_pic_small_in li img{border:1px solid #ccc}
</style>
<script type="text/javascript" src="jquery-1.6.min.js">
</script>
</head>
<body>
<div class="gallery_pic_small_w" id="gallery_pic_small_w">
<div class="gallery_small_left fl" id="gallery_small_left">
<img src="images/003_16.jpg" width="16" height="16">
</div>
<div class="gallery_pic_small fl">
<div class="gallery_pic_small_in" id="gallery_pic_small_in">
<ul>
<li><img src="images/003_03.jpg" width="113" height="44"></li>
<li><img src="images/003_05.jpg" width="113" height="44"></li>
<li><img src="images/003_07.jpg" width="113" height="44"></li>
<li><img src="images/003_09.jpg" width="113" height="44"></li>
<li><img src="images/003_11.jpg" width="113" height="44"></li>
<li><img src="images/003_13.jpg" width="113" height="44"></li>
<li><img src="images/003_17.jpg" width="113" height="44"></li>
</ul>
</div>
</div>
<div class="gallery_small_right fl" id="gallery_small_right">
<img src="images/003_19.jpg" width="16" height="16">
</div>
</div>
<script type="text/javascript">
function gallery_change(o,e,l,r,m){
var li = $(o).find("li").length;
var li_w = m?$(o).find("li").width()+17:$(o).find("li").width();
$(o).find(e).css("width",li*li_w+"px")
var cur =0;
function move(n){
switch(n){
case0:
if(cur ==0){
returnfalse;
}
cur--;
if(m ==true)
{
$(o).find(e).stop(true,true).animate({left:-(768*cur)},400)
}
else{
$(o).find(e).stop(true,true).animate({left:-(1000*cur)},400)
}
break;
case1:
if(cur == li-1){
returnfalse;
}
cur++;
if(m ==true){
$(o).find(e).stop(true,true).animate({left:-(768*cur)},400)
}
else{
$(o).find(e).stop(true,true).animate({left:-(1000*cur)},400)
}
break;
}
}
$(o).find(l).click(function(){
move(0)
})
$(o).find(r).click(function(){
move(1)
})
}
gallery_change("#gallery_pic_small_w","#gallery_pic_small_in","#gallery_small_left","#gallery_small_right",true)
</script>
</body>
</html>
1. 看这代码很纠结...完全没搞明白 m的作用是什么,true了 给 li加的宽度 ,否则 不走了;
2. 768 和 1000 怎么来的我也没看明白,算我笨吧.
3.
if(cur == li-1){
return false;
}
貌似是要根据滚动过去的li的数量来控制,从这里看你似乎是按一次滚动一个li内容,但是实际上
// <div class="gallery_pic_small_in" id="gallery_pic_small_in">
if(m ==true)
{
$(o).find(e).stop(true,true).animate({left:-(768*cur)},400)
}
else{
$(o).find(e).stop(true,true).animate({left:-(1000*cur)},400)
}
你滚动的是固定位置.
(113 + 17) * 7 = 910;113 * 7 = 791;
4. 很抱歉,没理解你的思路,不过我觉得根据你的思路,用left控制;
参数m 是为了有2个滚动效果.进行判断的.这里我只发了一个而已