jquery图片滚动代码（jq实现图片滚动效果）

本篇文章给大家谈谈jquery图片滚动代码，以及jq实现图片滚动效果对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、轮播图怎么停止自动轮播jquery
• 2、Jquery插件，SuperSlide图片的循环滚动功能
• 3、js实现图片左右滚动
• 4、jquery点击按钮图片上下滚动怎么做？

轮播图怎么停止自动轮播jquery

我不是很清楚你要问什么：轮播是“滚动”么？

1：如果你是想去掉图片的轮播效果，而这个滚动效果是由jquery控制的话，去掉控制滚动部分的jquery代码即可！

2：你是要鼠标放上去之后停止滚动。这个需要加鼠标事件，鼠标上移滚动停止。

3：点击按钮控制图片滚动。和鼠标事件差不多，只不过把鼠标事件换成按钮事件而已。

或者说是其他的展示方式？

Jquery插件，SuperSlide图片的循环滚动功能

将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

js实现图片左右滚动

代码：

    title/title

    style

        body{

            margin:0;

            padding:0;

            background-color:transparent;

        }

        div{

            width:350px;

            overflow:hidden;

        }

        table img{

            width:100px;

            height:100px;

        }

    /style

/head

body

    div id="picScroll"

        table

            tr

                tdaimg src="../pic/1.jpg" //a/td

                tdaimg src="../pic/2.jpg"/a/td

                tdaimg src="../pic/3.jpg"/a/td

                tdaimg src="../pic/4.jpg"/a/td

                tdaimg src="../pic/5.jpg"/a/td

            /tr

        /table

    /div

/body

/html

script

    var target = $('#picScroll');

    var left = 0;

    var speed = 30;

    function Marqeen() {

        if (target[0].offsetWidth = left) {

            left -= target[0].offsetWidth;

        }

        else {

            left++;

        }

        target.scrollLeft(left);

    }

    $(function () {

        var marQueen = window.setInterval(Marqeen, speed);

        target.mouseover(function () {

            clearInterval(marQueen);

        });

        target.mouseout(function () {

            marQueen = window.setInterval(Marqeen, speed);

        });

    });

/script

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

!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图片滚动代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于jq实现图片滚动效果、jquery图片滚动代码的信息别忘了在本站进行查找喔。