jquery点击按钮图片上下滚动怎么做？

!DOCTYPE html

成都创新互联公司从2013年成立，先为吉木乃等服务建站，吉木乃等地企业，进行企业商务咨询服务。为吉木乃企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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效果 点击小图展示大图，下面小图是有左右按钮的 可循环的无缝 滚动。 上面大图自动播放

网上这类插件非常多，无非就是自己下下来，修改下样式就好了，其他的如动画轮播js是没必要去修改的，小图可以吧css中的按钮改成图片而已，没必要自己写哦，费脑子，

求教jquery大神，关于手机端的导航手指左右滑动

写代码有些麻烦，给个关键建议。你大概是在拖动页面上遇到麻烦吧！要实现在触控设备上手指拖动元素，不能用mousemove哟，这个是没用的，要用到touchstart(手指接触触摸屏)，touchmove(手指在触摸屏上移动)，touchend(手指离开触摸屏)。touchmove调用的函数里最好填上event.preventDefault() 否则有些浏览器对touchmove也不管用哟！这个还可以开发多点触控，你自己去研究吧！

有关触摸事件参考这里: ;uid=374119f2442b2126e94b23ef1419d180hid=6b989aa1182219e3e0883131a232b00apos=2cid=9pi=di=time=1412014181458from=clickrestype=1pagetype=0000000000000402

jquery 图片轮播（可用于wap页面）

是这个效果吧，直接去Swiper中文网下载就行了

!--演示地址;

!--使用方法--

link rel="stylesheet" href="css/idangerous.swiper.css"

script src="js/idangerous.swiper-2.x.min.js"/script

div class="swiper-container"

div class="swiper-wrapper"

div class="swiper-slide" Slide1/div

div class="swiper-slide" Slide2/div

div class="swiper-slide" Slide3/div

/div

/div

script type="text/javascript"

var mySwiper = new Swiper('.swiper-container');  

/script

分享标题：jquery滑动图片,jquery 滑动
本文路径：http://kswjz.com/article/dsijjod.html