jQuery点击横向滚动·帮忙改成每页6张图片·每次只滚动一张图片的宽度·最好带上注释·方便我自己修改

<htmlcharset="utf-8"><styletype="text/css">*{margin:0;padding:0;}body{font-size:12px;... <html charset="utf-8">
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.box {height:66px; float:left; width:440px; overflow: hidden; position:relative; }
.box li { display:block; float:left; margin-left:5px; margin-right:5px; width:100px; height:70px;background:#BBB;font-size:50px;color:#ccc;line-height:66px;text-decoration:none;text-align:center; cursor:pointer;}
.box li:hover { color:#999; }
.box li.active { background-position:-174px 0; color:#555;cursor:default;}
a.prev, a.next {background:url(http://www.shengyijie.net/images/left_02.png) no-repeat 0 0; display:block;width:23px;height:43px; float:left; margin:15px 0 0 0; cursor:pointer;}
a.next { background-image:url(http://www.shengyijie.net/images/right_02.png)}
.scroll_list{ width:10000em; position:absolute; }
</style>
<!-- 引入jQuery -->
<script src="http://jt.875.cn/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var page= 1;
var i = 4;//每版四个图片
//向右滚动
$(".next").click(function(){ //点击事件
var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域
var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的视频图片个数
var page_count = Math.ceil(len/i); //只要不是整数，就往大的方向取最小的整数
if(!v_show.is(":animated")){
if(page == page_count){
v_show.animate({left:'0px'},"slow");
page =1;
}else{
v_show.animate({left:'-='+v_width},"slow");
page++;
}
}
});
//向左滚动
$(".prev").click(function(){ //点击事件
var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域
var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的视频图片个数
var page_count = Math.ceil(len/i); //只要不是整数，就往大的方向取最小的整数
if(!v_show.is(":animated")){
if(page == 1){
v_show.animate({left:'-='+ v_width*(page_count-1)},"slow");
page =page_count;
}else{
v_show.animate({left:'+='+ v_width},"slow");
page--;
}
}
});
});
</script>
</head>
<body>
<!-- 例子 -->
<div class="scroll" style="margin:0 auto;width:550px;">
<!-- "prev page" link -->
<a class="prev" href="#"></a>
<div class="box">
<div class="scroll_list">
<ul>
<li>1</li> <li>2</li> <li>3</li> <li>4</li>
<li>5</li> <li>6</li> <li>7</li> <li>8</li>
<li>9</li> <li>10</li> <li>11</li> <li>12</li>
<li>13</li> <li>14</li> <li>15</li> <li>16</li>
</ul>
</div>
</div>
<!-- "next page" link -->
<a class="next" href="#"></a>
</div>
</body>
</html> 展开
 我来答
1个回答
#热议# 什么是淋病？哪些行为会感染淋病？
雷咩咩的fans
推荐于2016-05-18 · 超过39用户采纳过TA的回答
知道小有建树答主
回答量：75
采纳率：0%
帮助的人：80.8万
我也去答题访问个人页
展开全部
你好，修改成了每页显示6张图片。 然后向右滚动的按钮事件改成点一次滚动一张图片的距离。
向左滚动的你按照我那样修改一下就可以了。。
<html charset="utf-8">
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.box {height:66px; float:left; width:660px; overflow: hidden; position:relative; }
.box li { display:block; float:left; margin-left:5px; margin-right:5px; width:100px; height:70px;background:#BBB;font-size:50px;color:#ccc;line-height:66px;text-decoration:none;text-align:center; cursor:pointer;}
.box li:hover { color:#999; }
.box li.active { background-position:-174px 0; color:#555;cursor:default;}
a.prev, a.next {background:url(http://www.shengyijie.net/images/left_02.png) no-repeat 0 0; display:block;width:23px;height:43px; float:left; margin:15px 0 0 0; cursor:pointer;}
a.next { background-image:url(http://www.shengyijie.net/images/right_02.png)}
.scroll_list{ width:10000em; position:absolute; }
</style>
<!-- 引入jQuery -->
<script src="http://jt.875.cn/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var page= 1;
var i = 6;//每版四个图片

var click_time = 0; //用来控制page++

//向右滚动
$(".next").click(function(){ //点击事件
var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域
var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的视频图片个数
var page_count = Math.ceil(len/i); //只要不是整数，就往大的方向取最小的整数

var move_width = v_width/i; //移动距离不是一个box的宽度了，一个box里显示4个li，一次移动一个li，所以移动距离除以4
click_time ++; //点击一次click_time++

if(!v_show.is(":animated")){
if(page == page_count){
v_show.animate({left:'0px'},"slow");
page =1;
}else{
v_show.animate({left:'-='+move_width},"slow"); //移动距离进行了修改
if(click_time == i){ //当click_time等于每页次数的时候 进行page++
page++;
click_time = 0;
}
}
}
});
//向左滚动
$(".prev").click(function(){ //点击事件
var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域
var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的视频图片个数
var page_count = Math.ceil(len/i); //只要不是整数，就往大的方向取最小的整数
if(!v_show.is(":animated")){
if(page == 1){
v_show.animate({left:'-='+ v_width*(page_count-1)},"slow");
page =page_count;
}else{
v_show.animate({left:'+='+ v_width},"slow");
page--;
}
}
});
});
</script>
</head>
<body>
<!-- 例子 -->
<div class="scroll" style="margin:0 auto;width:770px;">
<!-- "prev page" link -->
<a class="prev" href="#"></a>
<div class="box">
<div class="scroll_list">
<ul>
<li>1</li> <li>2</li> <li>3</li> <li>4</li>
<li>5</li> <li>6</li> <li>7</li> <li>8</li>
<li>9</li> <li>10</li> <li>11</li> <li>12</li>
<li>13</li> <li>14</li> <li>15</li> <li>16</li>
</ul>
</div>
</div>
<!-- "next page" link -->
<a class="next" href="#"></a>
</div>
</body>
</html>
追问

大体已经解决·很感谢·

不过到翻到16的时候还可以点击往后翻两个图片的位置·

然后再翻才回到第一页·求解大神啊。。。

能不能给我做出完整版·左边也弄好·

因为jQuery我不是很懂·

或者你自己写一个出来也可以的·不要循环滚动的·

到最后一个图片了点击右箭头就跳回到第一页·

到第一个图片点击左箭头就跳回到最后一页

完成了一定加分

追答
这有字数限制，代码贴不上。。
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式