87,904
社区成员
发帖
与我相关
我的任务
分享在线等！！！图片跳转问题。
想要的效果：
滚动，带左右按钮的。
效果已经有了代码贴在下面了。
但是问题是：初始阶段，点击向左的箭头滚动到了最后一个图片上，问题来了，他是把所有的图片都滚动一次再到了最后一张上，我想要他直接到最后一张。同样的当想有依次滚动到最后一张的时候 应该 下一张是第一张。他又多了一个 所有的图片往回滚动再到了第一张。我就是不想要 这两个动作 而想： 当最后一张的时候 直接滚动显示1 而不是 所有的都滚动一次才到一。同理 当第一张的时候向左点击 是滚动显示 最后一张 而不是滚动所有在到一。
废话不多说了。贴代码如下。求大神修改。小弟感激不尽。
滚动，带左右按钮的。
效果已经有了代码贴在下面了。
但是问题是：初始阶段，点击向左的箭头滚动到了最后一个图片上，问题来了，他是把所有的图片都滚动一次再到了最后一张上，我想要他直接到最后一张。同样的当想有依次滚动到最后一张的时候 应该 下一张是第一张。他又多了一个 所有的图片往回滚动再到了第一张。我就是不想要 这两个动作 而想： 当最后一张的时候 直接滚动显示1 而不是 所有的都滚动一次才到一。同理 当第一张的时候向左点击 是滚动显示 最后一张 而不是滚动所有在到一。
废话不多说了。贴代码如下。求大神修改。小弟感激不尽。
<!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>test2</title>
<style type="text/css">
.newlistdiv { width:565px; height:200px; padding:0 40px; position:relative; float:left;}
.newlistdiv .btnLeft { width:25px; height:40px; background:url(images/btnLeft.jpg) no-repeat; position:absolute; left:0px; top:80px;}
.newlistdiv .btnRight { width:25px; height:40px; background:url(images/btnRight.jpg) no-repeat; position:absolute; right:0px; top:80px;}
.newcnt { width:565px; height:200px; position:relative; overflow:hidden; }
.newcnt .newlist { width:800%; height:200px; position:absolute; top:0; left:0;}
.newlist .newtextall { width:565px; float:left; position:relative; z-index:0;height:200px;}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery(".newlistdiv").each(function(){jQuery(this).news('.newcnt',1);});
})
jQuery.fn.news=function(parent_div,page_size){
var positionleft=0;
var o=jQuery(this).find(parent_div);
var w = o.width();
var showbox = jQuery(this).find('.newlist');
var len = showbox.find('.newtextall').length;
var page_count = Math.ceil(len / page_size);
showbox.width(w*page_count);
//向左滚动
jQuery(this).find('.btnLeft').click(function(){
if (!showbox.is(':animated')) {
if (positionleft == 0) {
positionleft=positionleft-w * (page_count - 1);
showbox.animate({
left:positionleft
}, 500);
} else {
positionleft=positionleft+w
showbox.animate({
left:positionleft
}, 500);
}
}
});
//向右滚动
jQuery(this).find('.btnRight').click(function(){
if (!showbox.is(':animated')) {
if (positionleft == -w * (page_count - 1)) {
positionleft=0;
showbox.animate({
left: 0
}, 500);
}else {
positionleft=positionleft-w;
showbox.animate({
left:positionleft
}, 500);
}
}
});
}
</script>
</head>
<body>
<div class="newlistdiv">
<div class="btnLeft"></div>
<div class="btnRight"></div>
<div class="newcnt">
<div class="newlist">
<div class="newtextall">
1
</div>
<div class="newtextall">2
</div>
<div class="newtextall">3
</div>
<div class="newtextall">4
</div>
<div class="newtextall">5
</div>
</div>
</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
我自是年少-韶华倾负 2013-01-15
- 打赏
- 举报
多谢多谢 多谢 多谢
Go 旅城通票 2013-01-14
- 打赏
- 举报
嘿嘿，效果改好丢这里了，有需要就点开看http://www.coding123.net/article/20130114/image-roll-left-right.aspx
我自是年少-韶华倾负 2013-01-14
- 打赏
- 举报
呃 谢谢 大神。能在有滚动的效果么？就是当到最后一张跳第一张的时候 就想正常滚动那样的 滚动过去么 ？
Go 旅城通票 2013-01-14
- 打赏
- 举报
去掉动画就好了。。直接设置属性
//向左滚动
jQuery(this).find('.btnLeft').click(function () {
if (!showbox.is(':animated')) {
if (positionleft == 0) {
positionleft = positionleft - w * (page_count - 1);
showbox.css('left', positionleft);//////////////
/*showbox.animate({
left: positionleft
}, 500);*/
} else {
positionleft = positionleft + w
showbox.animate({
left: positionleft
}, 500);
}
}
});
//向右滚动
jQuery(this).find('.btnRight').click(function () {
if (!showbox.is(':animated')) {
if (positionleft == -w * (page_count - 1)) {
positionleft = 0;
showbox.css('left', 0);////////////////
/*showbox.animate({
left: 0
}, 500);*/
} else {
positionleft = positionleft - w;
showbox.animate({
left: positionleft
}, 500);
}
}
});
