jquery横向无缝图片滚动代码下载（jquery图片自动滚动）
admin 发布：2022-12-19 03:43 199
本篇文章给大家谈谈jquery横向无缝图片滚动代码下载，以及jquery图片自动滚动对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
- 1、网站图片无缝滚动效果怎么实现
- 2、【HTML】如何实现无缝循环的图片滚动效果？
- 3、js图片左右滚动 怎么弄 有没案例代码 求帮忙
- 4、用jquery实现两个li中的图片并列无缝向上滚动的代码 没有按钮控制，鼠标移上去停止滚动，离开开始滚动。
- 5、html图片无缝滚动代码怎么写？
- 6、基于jQuery实现一个marquee无缝滚动的插件
网站图片无缝滚动效果怎么实现
宽度等尺寸类可以自行修改为自己需要的像素:
!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】如何实现无缝循环的图片滚动效果？
网站中，有时为了更好的利用有限的页面空间展示更多的内容，也为了丰富网站页面自身的表现样式，我们往往会用到图片滚动的效果。想要实现这种效果，只需要在想要显示的表格或网页中加入以下代码即可实现： 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 这行代码是控制图片滚动的速度。数字越小，滚动的也就越快；相反，数字越大，滚动的也就越慢。
js图片左右滚动 怎么弄 有没案例代码 求帮忙
1.jquery.imgScroll.js
;(function($){$.fn.extend({"imgScroll":function(object){object=$.extend({firstDiv:null,scrollBox:null,scrollImgBox:null,tabDiv:null,tabDivList:null,botPrev:null,botNext:null,changeType:"slide",thumbNowClass:'on',thumbOverEvent:true,changeTime:5000,ImgBoxMar:0,flag:true},object||{});var imgLen=$(object.scrollImgBox).length;var imgNum=0;var tabNum=0;var nowIndex=0;var index;var scrollWid=$(object.scrollImgBox).width()+object.ImgBoxMar;$(object.scrollImgBox).clone().appendTo($(this));function changeEffectNext(){if(object.changeType=='slide'){if(imgNumimgLen){imgNum++}else{if(imgNum==imgLen){$(object.scrollBox).css({'margin-left':0});imgNum=1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNumimgLen-1){tabNum++}else{if(tabNum==imgLen-1){tabNum=0}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNumimgLen-1){imgNum++}else{if(imgNum==imgLen-1){imgNum=0}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow');$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow');$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}};function changeEffectPrev(){if(object.changeType=='slide'){if(imgNum0){imgNum--}else{if(imgNum==0){$(object.scrollBox).css({'margin-left':-scrollWid*imgLen});imgNum=imgLen-1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNum0){tabNum--}else{if(tabNum==0){tabNum=imgLen-1}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNum0){imgNum--}else{if(imgNum==0){imgNum=imgLen-1}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow');$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow');$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}}if(object.flag==true){var s=setInterval(changeEffectNext,object.changeTime);$(object.firstDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime);});$(object.tabDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime)});$(object.botPrev).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)});$(object.botNext).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)})};$(object.botNext).click(function(){changeEffectNext()});$(object.botPrev).click(function(){changeEffectPrev()});function changesmallImg(index){$(object.tabDivList).eq(index).addClass(object.thumbNowClass);$(object.tabDivList).eq(index).siblings().removeClass(object.thumbNowClass);if(object.changeType=='slide'){$(object.scrollBox).animate({'margin-left':-scrollWid*index})}if(object.changeType=='fadein'){$(object.scrollImgBox).eq(index).fadeIn('slow');$(object.scrollImgBox).eq(index).siblings().fadeOut('slow')}imgNum=index;tabNum=index}if(object.thumbOverEvent==true){$(object.tabDivList).click(function(){var index=$(this).index();changesmallImg(index)})}if(object.thumbOverEvent==false){$(object.tabDivList).hover(function(){var index=$(this).index();changesmallImg(index)})}}})})(jQuery);
2.html结构
a,.lbPeo{-webkit-transition:all .2s ease-in-out 0s;-o-transition:all .2s ease-in-out 0s;-moz-transition:all .2s ease-in-out 0s;-ms-transition:all .2s ease-in-out 0s;transition:all .2s ease-in-out 0s;}
.lbCon{margin-top:33px;margin-bottom:37px;position: relative;}
.lbBtn{display:block;position: absolute;top:0;width:40px;height:143px;border:1px solid #D7D2CA;background:url('../../../images/special/140801/ctr_prev.png') no-repeat center center;}
.lbPrev{left:0}.lbNext{right:0;background-image:url('../../../images/special/140801/ctr_next.png')}
.lbBtn:hover{background-color: #ddd;}
.lbBox{width:900px;height:145px;margin-left: 50px;overflow: hidden;position: relative;}
.lbList{width:1000%;}
.lbBox ul{float:left}
.lbBox li{float:left;width:150px;height:145px;overflow: hidden;}
.lbPeo{text-align:center;line-height:18px;font-family:"微软雅黑";color:#333}
.lbPeo img{display:block;border: 1px solid #ddd;width:84px;height:103px;margin-left:32px;*margin-left:5px;}
.lbPeo h5{font-weight: bold;font-size:12px;padding-top: 5px;*padding-top: 0}
.lbPeo h6{font-size:12px;}
.lbBox li a:hover{text-decoration: none}
.lbBox li a:hover .lbPeo{color:#ff9600}
!-- 人物--
div class="lbCon comWith clearfix"
div class="lbBox"
div class="lbList"
ul
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
/ul
ul
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大2红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李2大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
lia href="" target="_blank"
div class="lbPeo clearfix"
img src="" /
h5李大红/h5
h6大公报副社长兼执行总编辑/h6
/div
/a/li
/ul
/div
/div
a href="javascript:;" class="lbBtn lbPrev"/a
a href="javascript:;" class="lbBtn lbNext"/a
/div
3.页面调用：
script type="text/javascript" src="js/jquery-1.9.1.js"/script
script type="text/javascript" src="js/jquery.imgScroll.js"/script(上面那个js)
$('.lbCon .lbBox .lbList').imgScroll({
firstDiv: '.lbCon .lbBox',
scrollBox: '.lbCon .lbBox .lbList',
scrollImgBox: '.lbCon .lbBox ul',
botPrev: '.lbCon .lbPrev',
botNext: '.lbCon .lbNext',
changeType: "slide",
thumbNowClass: 'on',
thumbOverEvent: true,
changeTime: 5000,
ImgBoxMar: 0,
flag: false
});
4.至于鼠标滑过 显示左右按钮,可以这么写（思路:css默认隐藏左右按钮，鼠标滑过显示左右按钮，划出隐藏，需要引入jquery.js）
$(function(){
$(".wj_jdt_1").bind("onmouseover",function(){
$(".ctr_btn").show();
}).bind("onmouseout",function(){
$(".ctr_btn").hide();
})
})
大体是这么个意思，至于怎么延伸在你
用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
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站长 原创，转载请注明出处和附带本文链接；
- 上一篇：登陆窗口代码（窗体登录界面代码）
- 下一篇：源代码和原始版本不同的简单介绍
相关推荐
- 05-18企业网站模板,企业网站模板图片
- 05-16b2b自动发帖软件,b2b自动发帖软件有哪些
- 05-12网站自然优化,网站自动优化系统
- 05-06个人主页图片代码（个人主页图片代码怎么弄）[20240506更新]
- 05-06滚动导航代码（导航页面代码）[20240506更新]
- 05-06无间隔滚动代码（循环滚动代码）[20240506更新]
- 05-06jquery三级下拉菜单代码（jQuery下拉菜单）[20240506更新]
- 05-06滚动屏代码（数字滚动屏）[20240506更新]
- 05-06全屏图片上下滚动代码（全屏图片上下滚动代码怎么设置）[20240506更新]
- 05-06js页面左右滑动特效代码（js滚动特效）[20240506更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接