WAP手机版 | 加入收藏 | 设为首页 |

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

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

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


在网页中怎样实现图片无限循环滚动效果
工具/原料
  • Dreamweaver 8


方法/步骤
  • 1

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


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

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


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

    切换至代码编辑界面,输入如下代码:

    <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>

    对应效果如图所示:


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

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


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

    在新建的样式表文件"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;}

    对应文件内容如图所示:


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

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

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

    此时网页效果如图所示:


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

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


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

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


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

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

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

    代码如图所示:


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

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


    在网页中怎样实现图片无限循环滚动效果
    在网页中怎样实现图片无限循环滚动效果
    在网页中怎样实现图片无限循环滚动效果
  • 下载 图片 视频
  • 在网页中怎样实现图片无限循环滚动效果  (0)
  • 在网页中怎样实现图片无限循环滚动效果  (1)
  • 在网页中怎样实现图片无限循环滚动效果  (2)
  • 在网页中怎样实现图片无限循环滚动效果  (3)
  • 在网页中怎样实现图片无限循环滚动效果  (4)
  • ...实现灵动自如的操作,随心放大或缩小图片 滚动网页,畅享流畅自... (5)
  • JavaScript实现图片的不间断连续滚动  (6)
  • 在网页中怎样实现图片无限循环滚动效果  (7)
  • 在网页中怎样实现图片无限循环滚动效果  (8)
  • 在网页中怎样实现图片无限循环滚动效果  (9)
  • | 电脑 | | 网络 |
    | 软件 | | 手机 |
    | 游戏 |
  • | 化妆
  • | 搭配
  • | 发型
  • | 美白
  • | 护肤
  • | 减肥
  • | 常识
  • | 家居
  • | 二手车
  • | 小窍门
  • | 礼物
  • | 相亲
  • | 婚姻
  • | 男人
  • | 情人节
  • | 荤菜
  • | 素菜
  • | 汤粥
  • | 西点
  • | 主食
  • | 饮品
  • | 便当
  • | 小吃
  • | 奇闻异事
  • | 惊奇发现
  • | 探索揭秘
  • | 未解之谜
  • | 新鲜看点
  • | 瑜伽
  • | 养生
  • | 便秘
  • | 感冒
  • | 睡眠
  • | 脱发
  • | 营养
  • | 电脑
  • | 网络
  • | 软件
  • | 手机
  • | 游戏