当前位置：首页 > 代码 > 正文

jquery横向无缝图片滚动代码下载（jquery实现图片滚动）

admin 发布：2022-12-19 04:02 95

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

本文目录一览：

【HTML】如何实现无缝循环的图片滚动效果？

网站中，有时为了更好的利用有限的页面空间展示更多的内容，也为了丰富网站页面自身的表现样式，我们往往会用到图片滚动的效果。想要实现这种效果，只需要在想要显示的表格或网页中加入以下代码即可实现： div id=demo style="overflow:hidden;height:100px;width:300px;"table align=left cellpadding=0 cellspace=0 border=0trtd id=demo1 valign=top img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_缩小大小.JPG" / img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0053_缩小大小.JPG" / img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0054_缩小大小.JPG" / img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0058_缩小大小.JPG" / img height="200" alt="" width="150" src="/lazysite/user_space/7788/CIMG0059_缩小大小.JPG" / img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0063_缩小大小.JPG" / img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0070_缩小大小.JPG" / img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0071_缩小大小.JPG" / img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0072_缩小大小.JPG" / //这个图片的地址可以是相对的也可以是绝对的 /tdtd id=demo2 valign=top/td/tr/table/divscriptvar speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft=0) demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}/script下面，我们就上面代码的主要部分进行分析： div id=demo style="overflow:hidden;height:100px;width:300px;" 这段代码中下划线的部分表示我们这段滚动图片所占用区域的大小。用户可根据页面的实际需要进行调节。但一般情况下至少要大于或等于图片的高度和宽度。 img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_缩小大小.JPG" / 上面这段代码是图片的代码。每加入一行如上代码，那就会多出一个展示的图片。图片可以是一个，也可以是无数个。需要强调的是，每个图片的高度和宽度应尽量的统一大小，主要显示出来的效果才会更好看。 var speed=30 这行代码是控制图片滚动的速度。数字越小，滚动的也就越快；相反，数字越大，滚动的也就越慢。

用jquery实现两个li中的图片并列无缝向上滚动的代码 没有按钮控制，鼠标移上去停止滚动，离开开始滚动。

下面的使用Jquery实现，使用的时候请引用Jquery.js，向上滚动看看js那里提示修改left为up即可。

style type="text/css"

.scrollleft{width:491px; float:left; padding-top:15px;}

.scrollleft li{float:left;display:inline;width:195px;text-align:center;}

/style

script

$.fn.imgscroll = function(o){

var defaults = {

speed: 40,

amount: 0,

width: 1,

dir: "left"

};

o = $.extend(defaults, o);

return this.each(function(){

var _li = $("li", this);

_li.parent().parent().css({overflow: "hidden", position: "relative"}); //div

_li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul

_li.css({position: "relative", overflow: "hidden"}); //li

if(o.dir == "left") _li.css({float: "left"});

//初始大小

var _li_size = 0;

for(var i=0; i_li.size(); i++)

_li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true);

//循环所需要的元素

if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"});

_li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());

_li = $("li", this);

//滚动

var _li_scroll = 0;

function goto(){

_li_scroll += o.width;

if(_li_scroll  _li_size)

{

_li_scroll = 0;

_li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll });

_li_scroll += o.width;

}

_li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount);

}

//开始

var move = setInterval(function(){ goto(); }, o.speed);

_li.parent().hover(function(){

clearInterval(move);

},function(){

clearInterval(move);

move = setInterval(function(){ goto(); }, o.speed);

});

});

};

$(document).ready(function(){

$(".scrollleft").imgscroll({

speed: 40,    //图片滚动速度

amount: 0,    //图片滚动过渡时间

width: 1,     //图片滚动步数

dir: "left"   // "left" 或 "up" 向左或向上滚动

});

});

/script

div class="scrollleft"

                        ul

                            li

                                a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a

                            /li

                            li

                                a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a

                            /li

                            li

                                a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a

                            /li

                              li

                                a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a

                            /li

                              li

                                a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a

                            /li

                              li

                                a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a

                            /li

                              li

                                a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a

                            /li

                              li

                                a href="#"img src="images/img4.gif" width="188" height="106" /div class="mingcheng"该产品名称/div/a

                            /li

                        /ul

                    /div

网站图片无缝滚动效果怎么实现

宽度等尺寸类可以自行修改为自己需要的像素:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

titleJS图片滚动代码(无缝、平滑)/title

/head

body

style type="text/css"

!--

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

width: 500px;

}

#demo img {

border: 3px solid #F2F2F2;

}

#indemo {

float: left;

width: 800%;

}

#demo1 {

float: left;

}

#demo2 {

float: left;

}

--

/style

div id="demo"

div id="indemo"

div id="demo1"

a href="#"img src="" border="0" //a

a href="#"img src="" border="0" //a

a href="#"img src="" border="0" //a

a href="#"img src="" border="0" //a

a href="#"img src="" border="0" //a

a href="#"img src="" border="0" //a

/div

div id="demo2"/div

/div

/div

script

!--

var speed=10;

var tab=document.getElementById("demo");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft=0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++;

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

--

/script

/body

/html

html图片无缝滚动代码怎么写？

marquee和js两种方法，我建议使用js的，marquee兼容性不好，只兼容IE浏览器。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

HTML xmlns=""

HEAD

meta charset="utf-8" /

TITLE分别用marquee和div+js实现首尾相连循环滚动效果/TITLE

/HEAD

BODY

用marquee实现首尾相连循环滚动效果（仅IE）：br /br /

MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100"SPAN unselectable="on"img src="img/menu_trigger.png"img src="img/menu_trigger.png"img src="img/menu_trigger.png"img src="img/menu_trigger.png"img src="img/menu_trigger.png"/SPAN/MARQUEE

br /br /用DIV+javascript实现首尾相连循环滚动效果（兼容firefox）：br /br /

DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:500px;"span这里是要滚动的内容/span/DIV

script language="javascript" type="text/javascript"

!--

function scroll(obj) {

var tmp = (obj.scrollLeft)++;

//当滚动条到达右边顶端时

if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML;

//当滚动条滚动了初始内容的宽度时滚动条回到最左端

if (obj.scrollLeft=obj.firstChild.offsetWidth) obj.scrollLeft=0;

}

setInterval("scroll(document.getElementById('scrollobj'))",20);

//--

/script

/BODY

/HTML

望采纳！

基于jQuery实现一个marquee无缝滚动的插件

基于jQuery，实现一个marquee无缝滚动的插件，已经发布到

git.oschina.net，演示稍后更新（更新到

）。

代码如下：

/**

*

类库名称：jQuery.marquee

*

实现功能：基于

jquery

实现的

marquee

无缝滚动插件

*

作者主页：

*

联系邮箱：mqycn@126.com

*

使用说明：

*

最新版本：

*/

jQuery.fn.extend({

marquee

:

function(opt,

callback){

opt

=

opt

||

{};

opt.speed

=

opt.speed

||

30;

opt.direction

=

opt.direction

||

'left';

opt.pixels

=

opt.pixels

||

2;

switch(

opt.direction

){

case

"left":

case

"right":

opt.weight

=

"width";

opt.margin

=

"margin-left";

opt.tpl

=

'tabletrtd[TABLE]/tdtd[TABLE]/td/tr/table';

break;

case

"top":

case

"bottom":

opt.weight

=

"height";

opt.margin

=

"margin-top";

opt.tpl

=

'tabletrtd[TABLE]/td/tr/trtd[TABLE]/td/tr/table';

break;

default:

throw

Error("[jQuery.marquee.js]

Options.direction

Error!");

}

switch(

opt.direction

){

case

"left":

case

"top":

opt.addon

=

-1;

break;

case

"right":

case

"bottom":

opt.addon

=

1;

break;

default:

throw

Error("[jQuery.marquee.js]

Options.direction

Error!");

}

callback

=

typeof

callback

==

"function"

?

callback

:

function(){};

//设置宽度

$(this).each(function(){

if(

this.control

){

clearInterval(this.control);

}

else

{

//如果第一次执行，初始化代码

$(this)

.data(opt.weight,

opt.weight

==

'width'

?

$(this).find("table").width()

:

$(this).find("table").height())

.width($(this).data(opt.weight)

*

2)

.html(opt.tpl.replace(/\[TABLE\]/ig,

$(this).html()))

.mouseover(function(){

$(this).data("pause",

true);

}).mouseout(function(){

$(this).data("pause",

false);

});

}

this.control

=

setInterval((function(){

if(

$(this).data("pause")

){

return;

}

var

_margin

=

parseInt($(this).css(opt.margin))

+

opt.addon

*

opt.pixels;

if(

opt.addon

==

-1

_margin

+

$(this).data(opt.weight)

){

_margin

=

0;

}else

if(

opt.addon

==

1,

_margin

){

console.log(_margin

0,$(this).data(opt.weight));

_margin

=

-1

*

$(this).data(opt.weight);

}

$(this).css(opt.margin,

_margin

+

"px");

callback.bind(this)();

}).bind(this),

opt.speed);

});

return

$(this);

}

});

如果在IE9以下使用，还需要在之前增加如下代码：

/**

*

IE8插件（解决

function

不支持

bind

的问题），非原创

*/

if

(!Function.prototype.bind)

{

Function.prototype.bind

=

function(oThis)

{

if

(typeof

this

!==

"function")

{

throw

new

TypeError("[jQuery.marquee.ie8]

Caller

is

not

a

function");

}

var

aArgs

=

Array.prototype.slice.call(arguments,

1),

fToBind

=

this,

fNOP

=

function()

{},

fBound

=

function()

{

return

fToBind.apply(this

instanceof

fNOP

oThis

?

this

:

oThis,

aArgs.concat(Array.prototype.slice.call(arguments)));

};

fNOP.prototype

=

this.prototype;

fBound.prototype

=

new

fNOP();

return

fBound;

};

}

一共有三个可选参数，一个回调方法。

direction，移动方向：支持

左：left

右：right

上：top

下：bottom；

pixels，每次移动的像素数

speed，两次移动之前的间隔时间数（毫秒）

调用方法如下：

$("scroll-a").marquee();

$("scroll-b").marquee({direction:'top'});

$("scroll-c").marquee({direction:'top',pixels:2,speed:30});

$("scroll-d").marquee({direction:"top",pixels:2,speed:30},

function(){

console.log("执行了一次");

});

以上所述是小编给大家介绍的基于jQuery实现一个marquee无缝滚动的插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

jquery横向无缝图片滚动代码下载的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于jquery实现图片滚动、jquery横向无缝图片滚动代码下载的信息别忘了在本站进行查找喔。

标签：

版权说明：如非注明，本站文章均为 AH站长 原创，转载请注明出处和附带本文链接；

本文地址：http://ahzz.com.cn/post/2083.html；

相关推荐

取消回复欢迎 你 发表评论:

标签列表
最近发表
友情链接
闽ICP备2023004790号 厦门爱流量网络科技有限公司 版权所有

分享到

温馨提示

下载成功了么？或者链接失效了？

联系我们反馈

立即下载