在网页中怎样实现图片无限循环滚动效果

在网页设计过程中,为了更好的展示产品,通常都会制作一些带有无限滚动效果的图片,充分的利用这一网页效果,能够突显网站的影响力,达到事半功倍的效果。实现图片无限循环滚动效果也是网页设计者必备之基本技能。下面让我们一起来学习一下实现图片滚动效果的制作方法。

操作方法

  • 01

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

  • 02

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

  • 03

    切换至代码编辑界面,输入如下代码: <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> 对应效果如图所示:

  • 04

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

  • 05

    在新建的样式表文件"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;} 对应文件内容如图所示:

  • 06

    在网页文件"index.html"中添加对该样式表的引用: <link rel="stylesheet" type="text/css" href="MyStyle.css"> 此时网页效果如图所示:

  • 07

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

  • 08

    在”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); }; };

  • 09

    然后在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用。 <script type="text/javascript" src="MoveEffect.js"></script> 代码如图所示:

  • 10

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

(0)

相关推荐

  • 网页中无法另存为图片该怎么办?

    最近在写文稿的时候搜索一些好看.高清的图片,然而右击时完全没有反应,根本不会出现"图片另存为"的按钮,即使出现也是灰色不可操作状态.那么,网页中无法另存为图片的情况该怎么解决呢,下 ...

  • 在html网页中如何插入图片(1)

    在编写的网页中插入图片,可以使浏览网页的用户得到更好的体验效果,那么如 何在网页中插入一个图片那,本大神就来给大家详细讲解下,在网页中如何插入 一张图片. 操作方法 01 1.如图所示,我们新建一个记 ...

  • word文档中如何给图片添加柔化边缘效果

    我们在用word文档的时候,经常会遇到添加图片的情况,今天给大家介绍的是word文档中如何给图片添加柔化边缘效果的具体操作步骤.1. 双击电脑上的word图标,打开.2. 在主页面,选择上方的插入工具 ...

  • 抖音APP中怎么发布图片渐变的视频效果

    抖音APP中怎么发布图片渐变的视频效果,下面小编介绍一下.具体如下:1. 打开[微信],点击搜索框输入:小影,打开小影的小程序2. 如图界面中,选择想要的效果,点击红色框的"点击制作&quo ...

  • 在PS软件中如何给图片添加动感模糊的效果

    今天给大家介绍一下在PS软件中如何给图片添加动感模糊的效果的具体操作步骤.1. 首先打开电脑,找到桌面上的PS软件,双击打开2. 进入主页面后,点击左侧的新建按钮3. 在弹出的窗口中,点击右下角的创建 ...

  • 在PS软件中如何给图片添加镜头模糊的效果

    今天给大家介绍一下在PS软件中如何给图片添加镜头模糊的效果的具体操作步骤.1. 首先打开电脑,找到桌面上的PS软件,双击打开2. 进入主页面后,点击左侧的新建按钮3. 在弹出的窗口中,点击右下角的创建 ...

  • WPS如何设置图片无限循环交替

    首先插入作为闪烁的图片,按住Ctrl加鼠标单击的方式选中所有需要插入的图片,接着双击设置对象格式.在对话框中去掉"锁定纵横比"和"相对于幻灯片的原始尺寸"两个复 ...

  • 怎样在ppt中实现图片的电影滚动效果?

    PPT电影滚动效果特别适合在婚礼现场,活动现场使用,那么在活动中怎么用图片实现呢? 操作方法 01 准备好图片素材,打开PPT软件,新建一个文件. 02 在插入菜单栏中插入准备好的图片素材 03 图片 ...

  • PowerPoint中怎样替换图片而保留动画效果

    ①首先启动PowerPoint2010,单击菜单栏--插入--图片。 ②选取好图片,插入到PowerPoint2010中,选中图片,在格式选项中单击快速样式,为图片设置一种样式效果。 ③OK,先插入的 ...