提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

基于jquery实现点击左右按钮图片横向滚动

jQuery 实现 基于 图片 点击 按钮 滚动 左右
2023-06-13 09:14:49 时间
点击左右按钮图片横向滚动jquery，一次滚动四个，图片滚动完成，自动回到第一个版面：
效果图如下：

复制代码代码如下:

<!DOCTYPEhtml>
<htmllange="en">
<head>
<title>点击左右按钮图片横向滚动</title>
<metacharset=utf-8"/>
<styletype="text/css">
*{margin:0;padding:0;}
body{font-size:12px;}
.box{height:66px;float:left;width:440px;overflow:hidden;position:relative;}
.boxli{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;}
.boxli:hover{color:#999;}
.boxli.active{background-position:-174px0;color:#555;cursor:default;}
a.prev,a.next{background:url(http://www.shengyijie.net/images/left_02.png)no-repeat00;display:block;width:23px;height:43px;float:left;margin:15px000;cursor:pointer;}
a.next{background-image:url(http://www.shengyijie.net/images/right_02.png)}
.scroll_list{width:10000em;position:absolute;}
</style>
<!--引入jQuery-->
<scriptsrc="http://jt.875.cn/js/jquery.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
varpage=1;
vari=4;//每版四个图片
//向右滚动
$(".next").click(function(){//点击事件
varv_wrap=$(this).parents(".scroll");//根据当前点击的元素获取到父元素
varv_show=v_wrap.find(".scroll_list");//找到视频展示的区域
varv_cont=v_wrap.find(".box");//找到视频展示区域的外围区域
varv_width=v_cont.width();
varlen=v_show.find("li").length;//我的视频图片个数
varpage_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(){//点击事件
varv_wrap=$(this).parents(".scroll");//根据当前点击的元素获取到父元素
varv_show=v_wrap.find(".scroll_list");//找到视频展示的区域
varv_cont=v_wrap.find(".box");//找到视频展示区域的外围区域
varv_width=v_cont.width();
varlen=v_show.find("li").length;//我的视频图片个数
varpage_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>
<!--例子-->
<divclass="scroll"style="margin:0auto;width:550px;">
<!--"prevpage"link-->
<aclass="prev"href="#"></a>
<divclass="box">
<divclass="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>
<!--"nextpage"link-->
<aclass="next"href="#"></a>
</div>
</body>
</html>

相关文章