html怎么设置滚动图片？

html-css09

html怎么设置滚动图片？,第1张

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

<marquee>

<img src='1.jpg'>

<img src='2.jpg'>

<img src='3.jpg'>

<img src='4.jpg'>

</marquee>

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

插件

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

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

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

<body><div id="photo-list"> <ul id="scroll"> 

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

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

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

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

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

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

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

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

* { padding:0margin: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:leftpadding-right:9px}

#photo-list img { border:1px solid #dddbackground:#fffpadding: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”网页文件，最终效果如果所示：

1、有截取滚动网页的软件，如FSCapture，就可以截取整个网页。

2、 然后打开要截取的网页，在FSCapture悬浮窗口上找到滚动截图工具。

3、在默认情况下，是截整个界面，包括浏览器窗口，如果默认，下面有提示，点一下鼠标左键即可。

4、 如果要自定义截图窗口，按住Ctrl键，就会出现一个红色十字架，用鼠标拖动这个红十字架，框住想要的窗口。然后拖动右侧的滚动条到上端，或者点下端的滚动箭头，就能截取整个网页。

5、完成截图后，会自动返回到FSCapture编辑窗口，这时只要保存即可。

6、 选择一个保存文件夹，定义一个保存文件名，如滚动截图，按保存。

7、再用普通的看图软件ACDSee打开，就能看到一个长长的网页图，看看长宽比930x1776。