图片滚动效果html（图片滚动效果JS）

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

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、如何在HTML实现图片无间隙循环滚动
• 2、html怎么设置滚动图片？
• 3、html图片循环滚动无缝隙
• 4、如何在HTML中实现图片的滚动效果？

如何在HTML实现图片无间隙循环滚动

分类: 电脑/网络 程序设计 其他编程语言

问题描述:

用JS也可以..主要是可以无间隙循环滚动就可以了

如果是JS再请说明一下使用方法..

小弟刚入门..什么都裂型不懂..谢谢了.

解析:

SCRIPT language=JavaScript

Set slideShowSpeed (milliseconds)

var slideShowSpeed = 5000;

Duration of crossfade (seconds)

var crossFadeDuration = 3;

Specify the image files

var Pic = new Array();

to add more images, just continue

the pattern, adding to the array below

Pic[0] = 'images2005/03/1.gif' 图片路径

Pic[1] = 'images2005/03/2.gif'

Pic[2] = 'images2005/槐源陪03/3.gif'

Pic[3] = 'images2005/03/4.gif'

Pic[4] = 'images2005/03/5.gif'

Pic[5] = 'images2005/03/6.gif'

Pic[6] = 'images2005/03/7.gif'

Pic[7] = 'images2005/03/8.gif'

Pic[8] = 'images2005/03/9.gif'

Pic[9] = 'images2005/铅蠢03/10.gif'

do not edit anything below this line

var t;

var j = 0;

var p = Pic.length;

var preLoad = new Array();

for (i = 0; i p; i++) {

preLoad = new Image();

preLoad.src = Pic;

}

function runSlideShow() {

if (document.all) {

document.images.SlideShow.style.filter="blendTrans(duration=2)";

document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";

document.images.SlideShow.filters.blendTrans.Apply();

}

document.images.SlideShow.src = preLoad[j].src;

if (document.all) {

document.images.SlideShow.filters.blendTrans.Play();

}

j = j + 1;

if (j (p - 1)) j = 0;

t = setTimeout('runSlideShow()', slideShowSpeed);

}

/SCRIPT

将BODY改为 BODY onload=runSlideShow()

html怎么设置滚动图片？

方案一：直接使用HTML的滚动标签 marquee ，把图片放入滚滚标签内部，代码如返游塌下：

marquee

img src='1.jpg'

img src='2.jpg'

img src='3.jpg'

漏圆img src='4.jpg'

/marquee

方案磨差二：使用第三方插件，比如swiper.js，

插件

html图片循环滚动无缝隙

html图片循环滚动无缝隙代码：

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

html xmlns=" "

head

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

title无标题文档/title

style type="text/css"

/*gundongtupian*/

#demo0 {

width:712px;

height:134px;

overflow:hidden;

margin:auto;

}

#demo0 img {

float:left;

margin-left:10px;

border:3px #ffffff solid;

}

#indemo0 {

float: left;

width: 800%;

}

#demo10 {

float: left;

}

#demo20 {

float: left;

}

/style

/headbody液世

div id="demo0"

闹袜肢div id="好没indemo0"

div id="demo10"

a href="#"img src="images/tu1.jpg" width="167" height="128" border="0" //a

a href="#"img src="images/tu1.jpg" width="168" height="128" border="0" //a

a href="#"img src="images/tu1.jpg" width="168" height="128" border="0" //a

a href="#"img src="images/tu1.jpg" width="168" height="128" border="0" //a

a href="#"img src="images/tu1.jpg" width="168" height="128" border="0" //a

/div

div id="demo20"/div

/div

/div

script language="javascript"

!--

var speed0=40; //数字越大速度越慢

var tabb=document.getElementById("demo0");

var tabb1=document.getElementById("demo10");

var tabb2=document.getElementById("demo20");

tabb2.innerHTML=tabb1.innerHTML+tabb1.innerHTML;

function Marquee2(){

if(tabb2.offsetWidth-tabb.scrollLeft=0)

tabb.scrollLeft-=tabb1.offsetWidth;

else{

tabb.scrollLeft++;

}

}

var MyMar2=setInterval(Marquee2,speed0);

tabb.onmouseover=function(){clearInterval(MyMar2)};

tabb.onmouseout=function(){MyMar2=setInterval(Marquee2,speed0)};

--

/script

/body

/html

如何在HTML中实现图片的滚动效果？

素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸颤迅引力的图片是必不可少的。同理，小编也准备了一些与网页主题密切相关的图片，用于做为实现图片滚动效果的素材。

打开Dreamweaver8，新建一网页文件，并保存为名为“index.html"文件。

切换至代码编辑界面，输入如下代码：

bodydiv id="photo-list"  ul id="scroll"  

lia href="#"img src="images/1.jpg" width="100px" height="100px" alt=""//a/li  

lia href="#"img src="images/2.jpg" width="100px" height="100px" alt=""//a/li

lia href="#"img src="images/3.jpg" width="100px" height="100px" alt=""//a/li  

lia href="#"img src="images/4.jpg" width="100px" height="100px" alt=""//a/li  

lia href="#"img src="images/5.jpg" width="100px" height="100px" alt=""//a/li  

lia href="#"img src="images/6.jpg" width="100px" height="100px" alt=""//a/li    /ul /div/body

新建一CSS样式表文件，并将该文件保存到与“index.html”相同的目录下，文件名称为“MyStyle.css"。

在新建的样式表文件"MyStyle.css”文件中输入如下代码：

* { padding:0; margin:0;}       /*设置所有对像的内边距为0*/

body { text-align:center;}      /*设置页面居中对齐*/

#photo-list {

/* 6张图片的宽度（包含宽度、padding、border、图片间的留白）

计算：6*(100+2*2+1*2+9) - 9 

之所以减去9是第6张茄圆此图片的右边留白 */

width:681px;

/* 图片的宽度（腔尘包含高度、padding、border）

计算：100+2*2+1*2  */

height:106px;

margin:50px auto;

overflow:hidden;     /*溢出部份将被隐藏*/

border:1px dashed #ccc;  

}  

#photo-list ul { list-style:none;}  

#photo-list li { float:left; padding-right:9px;}

#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}

在网页文件"index.html"中添加对该样式表的引用：

link rel="stylesheet" type="text/css" href="MyStyle.css"

新建一个JS文件，并将该文件另存为“MoveEffect.js"。

在”MoveEffect.js“文件中输入如下所示代码：

var id = function(el) {          return document.getElementById(el);        },

c = id('photo-list');

if(c) {

var ul = id('scroll'),

lis = ul.getElementsByTagName('li'),

itemCount = lis.length,

width = lis[0].offsetWidth, //获得每个img容器的宽度

marquee = function() {

c.scrollLeft += 2;

if(c.scrollLeft % width = 1){  //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面

ul.appendChild(ul.getElementsByTagName('li')[0]);

c.scrollLeft = 0;

};

},

speed = 50; //数值越大越慢

ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度

var timer = setInterval(marquee, speed);

c.onmouseover = function() {

clearInterval(timer);

};

c.onmouseout = function() {

timer = setInterval(marquee, speed);

};

};

然后在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用。

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

打开“index.html”网页文件，最终效果如果所示：

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