jquery点击按钮图片上下滚动怎么做？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery点击按钮图片上下滚动怎么做？相关的知识，希望对你有一定的参考价值。
jquery点击按钮图片上/下滚动，如图。怎么做？如果是横向的，要左右滚动怎么做？
<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(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> 参考技术A 这个原理和左右滚动是一样的，只是改变了方向而已。
jq的animate()方法就可以做到。先给需要滚动元素设置定位属性，这样改动这个元素的top值和bottom值就可以达到上下滚动的目的。
具体的写法请参考http://www.jquery123.com/ 的animate方法的解释。这里有很详细的参数和方法使用。
既然选择了学写程序，就一定要主动学习，而是不看着一堆参数就仍了。
加油！ 参考技术B 网上搜很多的
点击两侧的上下按钮，图片相对应滚动。
<!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>无标题文档</title>
<script src="Scripts/run.js" src="Scripts/run.js" type="text/javascript"></script>
<style>
#gd {
list-style: none;
height:655px;
margin-left:-28px;
border: 1px solid #F6C;
}
#gd li {
width: 527px;
height: 658px;
display: block;
float: left;
/*margin: 9px 15px;*/
}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.min.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: ‘+=1640px‘ }, 800);
n--;
}
});
$(‘#toright‘).click(function () {
if (!$(‘#gd‘).is(‘:animated‘) && pic_length > n + 5) {
$(‘#gd‘).animate({ left: ‘-=1640px‘ }, 800);
n++;
}
});
})
</script>
</head>
<body>
<div style="width:1920px;height:904px;background:#f3f5f7;">
<div style="height:100%; margin-left:2%;margin-right:2%;border:1px solid #ff00dc;">
<p style="margin:0px; text-align:center;padding-top:50px;padding-bottom:50px; font-family:‘汉仪特细等线简‘;font-size:40px;color:#222222;">成功项目实例</p>
<div style="margin-top:15%;width:24px;height:48px;float:left;cursor:pointer; border:1px solid #0026ff;"id="toleft">
<img width="24" height="48" src="网页图片和标注/首页/滑动点/z.png" />
</div>
<style>
#gundongtude {
padding-right: 20px;
}
</style>
<div style="width:1650px;height:658px;float:left;overflow: hidden; border:1px solid #33F; margin-left:50px; margin-right:50px; " >
<ul style="position:relative;width:9999em;" id="gd">
<li id="gundongtude"><img src="网页图片和标注/首页/rolling1-1.png" width="527" height="658" /></li>
<li id="gundongtude"><img src="网页图片和标注/首页/rolling2-1.png" width="527" height="658" /></li>
<li id="gundongtude"><img src="网页图片和标注/首页/rolling3-1.png" width="527" height="658" /></li>
<li id="gundongtude"><img src="网页图片和标注/首页/rolling4-1.png" width="527" height="658" /></li>
<li id="gundongtude"><img src="网页图片和标注/首页/rolling2-1.png" width="527" height="658" /></li>
<li id="gundongtude"><img src="网页图片和标注/首页/rolling3-1.png" width="527" height="658" /></li>
</ul>
</div>
<div style="width:24px;height:46px;float:left;cursor:pointer;border:1px solid #000; margin-top:15%;" id="toright">
<img width="24" height="46" src="网页图片和标注/首页/滑动点/y.png" />
</div>
</div>
</div>
</body>
</html>
以上是关于jquery点击按钮图片上下滚动怎么做？的主要内容，如果未能解决你的问题，请参考以下文章
android 上下滑动按钮 按钮图片翻转180度从正面到反面 再滑动回到正面 如此循环 就代码 先谢谢了
用html怎么做上下滚动的文字或者图片(就跟那种小广告一样~)