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

js无缝滚动图片特效代码支持左右滑动（js图片自动滚动）

admin 发布：2022-12-19 20:03 124

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

本文目录一览：

求一段兼容多浏览器的图片向左或向右滚动js代码？

先介绍一下它的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到"无缝"滚动的目的。 先了解一下对象的几个的属性：

innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

向上滚动的代码：

div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#fffffftable align=top cellpadding=0 cellspace=0 border=0trtd id=demo1 valign=topimg src="pic/1.jpg" width="156" height="200" /brimg src="pic/2.jpg" width="160" height="198" /brimg src="pic/3.jpg" width="155" height="200" /brimg src="pic/4.jpg" width="157" height="200" //td/trtrtd id=demo2 valign=top/td/tr/table/div

script

var speed=30

demo2.innerHTML=demo1.innerHTML//克隆demo1为demo2

function Marquee(){

if(demo2.offsetHeight-demo.scrollTop=0)//当滚动至demo1与demo2交界时

demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端

else{

demo.scrollTop++

}

}

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:400;width:160;background:#214984;color:#fffffftable align=top cellpadding=0 cellspace=0 border=0trtd id=demo1 valign=topimg src="pic/1.jpg" width="156" height="200" /brimg src="pic/2.jpg" width="160" height="198" /brimg src="pic/3.jpg" width="155" height="200" /brimg src="pic/4.jpg" width="157" height="200" //td/trtrtd id=demo2 valign=top/td/tr/table/div

script

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo.scrollTop=0)

demo.scrollTop+=demo2.offsetHeight

else{

demo.scrollTop--

}

}

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:200;width:500;background:#214984;color:#fffffftable align=left cellpadding=0 cellspace=0 border=0trtd id=demo1 valign=topimg src="pic/1.jpg" width="156" height="200" /img src="pic/2.jpg" width="160" height="198" /img src="pic/3.jpg" width="155" height="200" /img src="pic/4.jpg" width="157" height="200" //tdtd id=demo2 valign=top/td/tr/table/div

script

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft=0)

demo.scrollLeft-=demo1.offsetWidth

else{

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:200;width:500;background:#214984;color:#fffffftable align=left cellpadding=0 cellspace=0 border=0trtd id=demo1 valign=topimg src="pic/1.jpg" width="156" height="200" /img src="pic/2.jpg" width="160" height="198" /img src="pic/3.jpg" width="155" height="200" /img src="pic/4.jpg" width="157" height="200" //tdtd id=demo2 valign=top/td/tr/table/div

script

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo.scrollLeft=0)

demo.scrollLeft+=demo2.offsetWidth

else{

demo.scrollLeft--

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

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

/script

JS无缝滚动图片的代码 麻烦大神帮我解释下每句的含义

var speed=10; ///图片左移速度时间毫秒数字越大速度越慢

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

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

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

tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2

tab.scrollTop=tab.scrollHeight

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft=0)// //当demo滚动至demo2的交界处。与就是与demo2重合时。offsetWidth与scrollLeft刚好相等

tab.scrollLeft-=tab1.offsetWidth //demo跳回初始位置

else{

tab.scrollLeft++;//demo开始重新移动

}

}

//setInterval让MyMar方法每隔多少秒执行一次，并把返回的调用次数ID

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)}; //当鼠标移动demo上面时。调用clearInterval清除MyMar1.这样图片便不会在移动了。移到图片时，第一行和第二行的图片都会停止

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};重新setInterval让方法执行，这样图片会继续移动

如何制作JS+DIV左右滚动的切换图

在自己网站需要添加切换图的位置放上以下的HTML代码（用来显示切换的8张图片）；图片可以是固定的几张图片，也可以使用动态调用代码来调用网站文章中的图片。

在网站的CSS文件的底部粘贴下面的CSS文件，用来控制版块的样式。可以对CSS进行适当的修改来符合自己做网站的尺寸的需要。

*案例滚动图片样式*/

.anli8{width:980px; margin:0px auto;}

.anli_fot{width:980px; height:7px; background:url(../images/net2_07.jpg) no-repeat; margin-bottom:15px;}

.infiniteCarousel {

border-left:1px solid #ccc; border-right:1px solid #ccc; background-color:#F6F5F5; width:978px; position: relative; height:190px;

}

.infiniteCarousel .wrapper8 {

width:865px; height:198px; position:absolute; top:0; margin-left:53px;

}

.infiniteCarousel ul a img {

border:4px solid #E5E5E5; width:190px; height:130px; overflow:hidden;

}

.infiniteCarousel li{

text-align:center; font-weight:normal; font-size:12px; color:#333; line-height:26px;

}

.infiniteCarousel .wrapper8 ul{

width:865px; margin:0; position:absolute; padding-top:10px;

}

.infiniteCarousel .wrapper8 ul li {

display:block; float:left; padding:10px;

}

.infiniteCarousel .arrow {

display: block; text-indent: -999px; position:absolute; top:65px; cursor:pointer;

}

.infiniteCarousel .forward {

width:46px; height:45px; background:url(../images/net_05.jpg) no-repeat; right:5px; overflow:hidden;

}

.infiniteCarousel .back {

width:46px; height:45px; background:url(../images/net_03.jpg) no-repeat;left:5px;

}

.infiniteCarousel .forward:hover {

width:46px; height:45px; background:url(../images/net_05.jpg) no-repeat; right:5px;

}

.infiniteCarousel .back:hover {

width:46px; height:45px; background:url(../images/net_03.jpg) no-repeat; left:5px;

}

添加了DIV和CSS之后，只能将图片显示出来，但图片还不能动起来，还需要添加二个JS文件才能让它们自动切换起来。

下载二个JS文件，然后上传到自己网站空间的根目录下。

完成以上步骤之后，即可实现在自己网站上制作左右滚动的切换图的效果了。

js中怎么实现图片不间断的向左滚动效果，要那种代码清晰的~

script type="text/javascript"

var speed = 20;//滚动速度

var maq;

var m1;//第一份滚动的内容

var m2;//第二份滚动的内容

var timer;//定时器

function run(){

if(m1.offsetWidth=maq.scrollLeft){

maq.scrollLeft-=m1.offsetWidth;

}else{

maq.scrollLeft+=6;

}

}

window.onload=function(){

maq=document.getElementById("maq");

m1=document.getElementById("m1");

m2=document.getElementById("m2");

m2.innerHTML=m1.innerHTML;

if(timer==null){

timer=window.setInterval(run,speed);

}

maq.onmouseover=function(){

window.clearInterval(timer);

}

maq.onmouseout=function(){

timer=window.setInterval(run,speed);

}

}

/script

/head

body

div id="maq" style="height:200px; width:180px; overflow:hidden"

table

tr

td id="m1"

table

tr

tdimg src="" width="174" height="268" //td

tdimg src="" width="174" height="268" //td

tdimg src="" width="174" height="268" //td

/tr

/table

/td

td id="m2"/td

/tr

/table

/div

/body

楼主详细代码在这里这已经是相当的简介版了你只要把图片路径改一下就能用了，~要采纳呦~你懂得~~

求一个JS特效，图片左右滚动 点击左右的箭头可以滚动一条的，

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

html xmlns=""

head

title无标题页/title

script type="text/javascript" src=""/script

/head

body

style type="text/css"

.pic_top div{float:left}

.pic_yi{height:80px; width:80px;padding:20px}

/style

div class="pic_top"

div class="pic_left" id="LeftArr" style="height:100px; width:200px;"鼠标点击向左（left）滚动/div

div class="pic_center" id="divAcrollPic1" style=" height:100px; width:400px; overflow:hidden; "

div class="pic_yi"图片/div

div class="pic_yi"图片/div

div class="pic_yi"图片/div

div class="pic_yi"图片/div

/div

div class="pic_right" id="RightArr" style="height:100px; width:200px;"鼠标点击向右（right）滚动/div

/div

script type="text/javascript"

// 左右点击滚动开始

var scrollPic1 = new ScrollPic();

scrollPic1.scrollContId = "divAcrollPic1"; //内容容器ID

scrollPic1.arrLeftId = "LeftArr";//左箭头ID

scrollPic1.arrRightId = "RightArr"; //右箭头ID

scrollPic1.frameWidth = 400;//显示框宽度

scrollPic1.pageWidth = 100; //翻页宽度

scrollPic1.speed = 10; //移动速度(单位毫秒，越小越快)

scrollPic1.space = 10; //每次移动像素(单位px，越大越快)

scrollPic1.autoPlay = false; //自动播放

scrollPic1.autoPlayTime = 3; //自动播放间隔时间(秒)

scrollPic1.initialize(); //初始化

// 左右点击滚动结束

/script

/body

/html

哪个软件可以制作图片上下滚动还有左右滚动

marquee图片无缝滚动先了解一下对象的几个的属性：innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度。scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth: 获取对象的滚动宽度offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度-----------------------------------------------------------------------图片向上无缝滚动style type="text/css"

!--

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

height: 100px;

text-align: center;

float: left;

}

#demo img {

border: 3px solid #F2F2F2;

display: block;

}

--

/style

向上滚动

div id="demo"

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

/div

div id="demo2"/div

/divscript

!--

var speed=10; //数字越大速度越慢

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

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

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

tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2

function Marquee(){

if(tab2.offsetTop-tab.scrollTop=0)//当滚动至demo1与demo2交界时

tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端

else{

tab.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器

--

/script------------------------------------------------------------图片向下无缝滚动style type="text/css"

!--

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

height: 100px;

text-align: center;

float: left;

}

#demo img {

border: 3px solid #F2F2F2;

display: block;

}

--

/style

向下滚动

div id="demo"

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

/div

div id="demo2"/div

/divscript

!--

var speed=10; //数字越大速度越慢

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

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

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

tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2

tab.scrollTop=tab.scrollHeight

function Marquee(){

if(tab1.offsetTop-tab.scrollTop=0)//当滚动至demo1与demo2交界时

tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端

else{

tab.scrollTop--

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器

--

/script--------------------------------------------------------图片向左无缝滚动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

/divscript

!--

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------------------------------------------------------图片向右无缝滚动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

/divscript

!--

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(tab.scrollLeft=0)

tab.scrollLeft+=tab2.offsetWidth

else{

tab.scrollLeft--;

}

}

var MyMar=setInterval(Marquee,speed);

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

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

--

/script

js无缝滚动图片特效代码支持左右滑动的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js图片自动滚动、js无缝滚动图片特效代码支持左右滑动的信息别忘了在本站进行查找喔。

标签：

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

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

相关推荐

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

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

分享到

温馨提示

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

联系我们反馈

立即下载