滚动图片代码jquery（图片左右滚动代码）

今天给各位分享滚动图片代码jquery的知识，其中也会对图片左右滚动代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、js实现图片左右滚动
• 2、带缩略图多屏轮播的jQuery左右滚动banner焦点图代码，到了第十一张小图片就不自动滚下去了？
• 3、jquery点击按钮图片上下滚动怎么做？
• 4、jQuery实现带滚动导航效果的全屏滚动相册实例
• 5、轮播图怎么停止自动轮播jquery
• 6、jquery 跑马灯 怎么 实现 循环

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左右滚动banner焦点图代码，到了第十一张小图片就不自动滚下去了？

肯定的 你要那种连续滚动的 要在小图前后各家一张图片才可以 最前面加最后一张最后面加最前面 然后判断

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实现带滚动导航效果的全屏滚动相册实例

本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册。分享给大家供大家参考。具体如下：

运行效果图如下：

主要代码如下：

$(function()

{

//加载时的图片

var

$loader=

$('#st_loading');

//获取的ul元素

var

$list=

$('#st_nav');

//当前显示的图片

var

$currImage

=

$('#st_main').children('img:first');

//加载当前的图片

//同时显示导航的项

$('img').load(function(){

$loader.hide();

$currImage.fadeIn(3000);

//滑出导航

setTimeout(function(){

$list.animate({'left':'0px'},500);

},

1000);

}).attr('src',$currImage.attr('src'));

//计算出将被显示的略缩图所在的div元素的宽度

buildThumbs();

function

buildThumbs(){

$list.children('li.album').each(function(){

var

$elem

=

$(this);

var

$thumbs_wrapper

=

$elem.find('.st_thumbs_wrapper');

var

$thumbs

=

$thumbs_wrapper.children(':first');

//每张略缩图占有180像素的宽度和3像素的间距(margin)

var

finalW

=

$thumbs.find('img').length

*

183;

$thumbs.css('width',finalW

+

'px');

//是这元素具有滚动性

makeScrollable($thumbs_wrapper,$thumbs);

});

}

//点击菜单项目的时候（向上向下箭头切换）

//使略缩图的div层显示和隐藏当前的

//打开菜单（如果有的话）

$list.find('.st_arrow_down').live('click',function(){

var

$this

=

$(this);

hideThumbs();

$this.addClass('st_arrow_up').removeClass('st_arrow_down');

var

$elem

=

$this.closest('li');

$elem.addClass('current').animate({'height':'170px'},200);

var

$thumbs_wrapper

=

$this.parent().next();

$thumbs_wrapper.show(200);

});

$list.find('.st_arrow_up').live('click',function(){

var

$this

=

$(this);

$this.addClass('st_arrow_down').removeClass('st_arrow_up');

hideThumbs();

});

//点击略缩图，改变大的图片

$list.find('.st_thumbs

img').bind('click',function(){

var

$this

=

$(this);

$loader.show();

$('img

class="st_preview"/').load(function(){

var

$this

=

$(this);

var

$currImage

=

$('#st_main').children('img:first');

$this.insertBefore($currImage);

$loader.hide();

$currImage.fadeOut(2000,function(){

$(this).remove();

});

}).attr('src',$this.attr('alt'));

}).bind('mouseenter',function(){

$(this).stop().animate({'opacity':'1'});

}).bind('mouseleave',function(){

$(this).stop().animate({'opacity':'0.7'});

});

//隐藏当前已经打开了的菜单的函数

function

hideThumbs(){

$list.find('li.current')

.animate({'height':'50px'},400,function(){

$(this).removeClass('current');

})

.find('.st_thumbs_wrapper')

.hide(200)

.andSelf()

.find('.st_link

span')

.addClass('st_arrow_down')

.removeClass('st_arrow_up');

}

//是当前的略缩图div层滚动

//当鼠标移至菜单层的时候会自动地进行滚动

function

makeScrollable($outer,

$inner){

var

extra

=

800;

//获取菜单的宽度

var

divWidth

=

$outer.width();

//移除滚动条

$outer.css({

overflow:

'hidden'

});

//查找容器上的最后一张图片

var

lastElem

=

$inner.find('img:last');

$outer.scrollLeft(0);

//当用户鼠标离开菜单的时候

$outer.unbind('mousemove').bind('mousemove',function(e){

var

containerWidth

=

lastElem[0].offsetLeft

+

lastElem.outerWidth()

+

2*extra;

var

left

=

(e.pageX

-

$outer.offset().left)

*

(containerWidth-divWidth)

/

divWidth

-

extra;

$outer.scrollLeft(left);

});

}

});

希望本文所述对大家的jQuery程序设计有所帮助。

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

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

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

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

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

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

jquery 跑马灯 怎么 实现 循环

打开 Dreamweaver

新建 HTML 文档；

修改标题为"跑马灯"

保存为 index.html 文件。

jquery跑马灯 图片不间断滚动效果

首先，编写跑马灯部分的静态 HTML 代码，把图片排列起来

在 body 和 /body 标签中添加以下代码：

div

　ul

liimg src="img/1.jpg" //li

liimg src="img/2.jpg" //li

liimg src="img/3.jpg" //li

liimg src="img/4.jpg" //li

liimg src="img/5.jpg" //li

liimg src="img/6.jpg" //li

liimg src="img/7.jpg" //li

　/ul

/div

jquery跑马灯 图片不间断滚动效果

给上一步的 HTML 代码中的 div 标签增加 class 属性，如下：

　div class="con"

编写跑马灯部分的 CSS 样式代码，代码放在 head 和 /head 标签中，如下：

style type="text/css"

　ul{list-style:none; padding:0; margin:0;}

　.con{ width:1105px; height:225px; overflow:hidden; border:2px solid #666; margin:10px auto 0 auto; padding:5px 0 0 5px;}

　.con ul li{ float:left; margin:0 5px 10px 0;}

　.con ul li img{ display:block; width:209px; height:209px; padding:2px; border:1px solid #ccc;}

/style

jquery跑马灯 图片不间断滚动效果

引入 JQuery 库

　script type="text/javascript" src="jquery-1.11.0.min.js"/script

引入 Marquee 插件

　script type="text/javascript" src="marquee2.js"/script

代码放在 /body 标签前，如图：

jquery跑马灯 图片不间断滚动效果

给 div 增加 marquee 类

　div class="con marquee"

保存文件，在浏览器中打开，就可以看到图片开始滚动了。

jquery跑马灯 图片不间断滚动效果

图片默认的滚动方向是“向上滚动”

如果要修改图片滚动的方向，可以给 div 指定 direction 属性，属性值可以取：

　up 上

　down 下

　left 左

　right 右

jquery跑马灯 图片不间断滚动效果

完整的例子放在百度网盘中，需要的请发邮件到 xdhy_dn@foxmail.com

主题写 “百度经验”。自动回复下载地址

关于滚动图片代码jquery和图片左右滚动代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。