zoukankan      html  css  js  c++  java
  • 一款JS+CSS实现的无缝平滑图片滚动代码

    代码简介:

    非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止。它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用。

    代码内容:

    View Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>一款JS+CSS实现的无缝平滑图片滚动代码 - www.webdm.cn</title>
    </head>
    <body>
    <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="http://www.webdm.cn/images/wall1_s.jpg" border="0" /></a>
    <a href="#"><img src="http://www.webdm.cn/images/wall2_s.jpg" border="0" /></a>
    <a href="#"><img src="http://www.webdm.cn/images/wall3_s.jpg" border="0" /></a>
    <a href="#"><img src="http://www.webdm.cn/images/wall4_s.jpg" border="0" /></a>
    <a href="#"><img src="http://www.webdm.cn/images/wall5_s.jpg" border="0" /></a>
    <a href="#"><img src="http://www.webdm.cn/images/wall6_s.jpg" border="0" /></a>
    </div>
    <div id="demo2"></div>
    </div>
    </div>
    <script>
    <!--
    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>
    </body>
    </html>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>

    代码来自http://www.webdm.cn/webcode/9b1a6b68-fe17-4b92-a955-bfeff8db386f.html

  • 相关阅读:
    查询避免Unknown column ‘xxx’ in ‘where clause
    Spring依赖循环:The dependencies of some of the beans in the application context form a cycle
    POJ(北京大学)刷题导航
    ACM使用Java提交总是超时的解决方法
    申请了服务器,建立了新博客。 不在用这个了。
    jeecg数据库添加字段后表单的修改
    jeecg普通表和数据字典的关联
    jeecg添加滚动图
    jeecg定时任务的bug记录
    classpath究竟是指哪里?
  • 原文地址:https://www.cnblogs.com/webdm/p/2316905.html
Copyright © 2011-2022 走看看