13518219792
主要是css代码 调的，有些效果会把CSS代码页写到js里面，看情况的，根源上都是调节div的宽度和高度
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：主机域名、网络空间、营销软件、网站建设、汨罗网站维护、网站推广。
你需要每次点击标签切换的时候 都执行一次点击箭头的事件 就可以了（或者初始化一下）
意思就是当你 切换标签的时候 让滚动执行完毕
!DOCTYPE html
html lange="en"
head
title点击左右按钮图片横向滚动/title
meta 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()
no-repeat 0 0; display:block;width:23px;height:43px; float:left;
margin:15px 0 0 0; cursor:pointer;}
a.next { background-image:url()}
.scroll_list{ width:10000em; position:absolute; }
/style
!-- 引入jQuery --
script src="" 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
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
li7/li
li8/li
li9/li
li10/li
li11/li
li12/li
li13/li
li14/li
li15/li
li16/li
/ul
/div
/div
!-- "next page" link --
a class="next" href="#"/a
/div
/body
/html
需要添加jquery文件才可以调试
复制代码
代码如下:
script
type="text/javascript"
src="jquery.js"/script
script
type="text/javascript"
$(function(){
//alert($('#findclose').closest('div').attr('id'));
var
pic_length
=
$('#gd
li').length;
var
n
=
0;
$('#toleft').click(function(){
if
(!$('#gd').is(':animated')
n)
{
$('#gd').animate({left:'+=120px'},500);
n--;
}
});
$('#toright').click(function(){
if
(!$('#gd').is(':animated')
pic_length
n+5)
{
$('#gd').animate({left:'-=120px'},500);
n++;
}
});
})
/script
style
type="text/css"
ul{
list-style:none;
margin:0px;
padding:0px;
text-align:center;
}
#gd
li
{
width:90px;
height:80px;
display:block;
float:left;
margin:9px
15px;
}
/style
div
style="width:702px;height:100px;background:#ccc;margin:0
auto"
div
style="width:30px;height:30px;background:red;margin:35px
10px;float:left;cursor:pointer;"
id="toleft"/div
div
style="width:600px;height:98px;float:left;border:1px
solid
#777;overflow:
hidden;"
ul
style="list-style:
none
outside
none;height:98px;display:block;background:yellow;position:relative;width:9999em;"
id="gd"
li
style="background:red"/li
li
style="background:orange"/li
li
style="background:green"/li
li
style="background:navy"/li
li
style="background:blue"/li
li
style="background:purple"/li
li
style="background:pink"/li
li
style="background:gray"/li
/ul
/div
div
style="width:30px;height:30px;background:red;margin:35px
10px;float:left;cursor:pointer;"
id="toright"/div
/div
将javascript代码替换为如下，
script type="text/javascript"jQuery(".scroolWarp").slide({ titCell:".hd ul", mainCell:".bd ul",effect:"left",vis:6,scroll:6,autoPlay:true,autoPage:true});/script
你好，修改成了每页显示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() no-repeat 0 0; display:block;width:23px;height:43px; float:left; margin:15px 0 0 0; cursor:pointer;}
a.next { background-image:url()}
.scroll_list{ width:10000em; position:absolute; }
/style
!-- 引入jQuery --
script src="" 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
li1/li li2/li li3/li li4/li
li5/li li6/li li7/li li8/li
li9/li li10/li li11/li li12/li
li13/li li14/li li15/li li16/li
/ul
/div
/div
!-- "next page" link --
a class="next" href="#"/a
/div
/body
/html
