可控制左右循环翻滚的图片展示特效代码-JS特效-爱易网页

可控制左右循环翻滚的图片展示特效代码

日期：2014-05-18　浏览次数：20244 次

以下是程序代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>爱易网——网页特效演示页_可控制左右翻滚的图片展示特效代码</title>
<style type="text/css">
*{margin:0;padding:0;}
  ul{list-style:none}
  #wrap{width:600px;border:1px solid orange;height:100px;margin:55px auto;overflow:hidden;}
  #a li,#b li{float:left;width:110px;background:red;height:100px;margin-left:10px}
  #scrolls{width:200%;float:left;}
  #a,#b{float:left;}
  .left,.right{width:20px;height:20px;background:yellow;cursor:pointer;}
</style>
</head>
<body>
<div class="left" id="left" onclick="left()"><<</div>
  <div id="wrap">
   <div id="scrolls">
    <div id="a">
     <ul>
      <li>22</li>
      <li></li>
      <li></li>
      <li></li>
      <li>11</li>
     </ul>
    </div>
    <div id="b">
    </div>
   </div>
   <script type="text/javascript">
      var $ = function(id){return document.getElementById(id)};
      var wrap = $("wrap");
      var a = $("a");
      var b = $("b");
      var show = $("show");
      var d;
      b.innerHTML = a.innerHTML;
      function scrolls(){
      d = "n";
        if(b.offsetWidth - wrap.scrollLeft <=0){
         wrap.scrollLeft = wrap.scrollLeft - b.offsetWidth;
        }
        else{
         wrap.scrollLeft++;
        }
      }
      
      t = setInterval("scrolls()",10)
      
      function backScrolls(){
        if(wrap.scrollLeft <=0){
         wrap.scrollLeft = wrap.scrollLeft + b.offsetWidth;
        }
        else{
         wrap.scrollLeft--;
        }
      }
      function left(){
        d = "n";
        clearT();
        t = setInterval("scrolls()",10);
      }
      function right(){
        d = "m";
        clearT();
        t = setInterval("backScrolls()",10);
      }
      function clearT(){
       clearInterval(t);
      }
      function runs(){
        if(d == "n"){
          left();
        }
        else{
          right();
        }
      }
      wrap.onmouseover = function (){
        clearT();
      }
      wrap.onmouseout = function(){
        runs();
      }
   </script>
  </div>
<div class="right" id="right" onclick="right()">>></div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

可控制左右循环翻滚的图片展示特效代码

相关资料更多>

推荐阅读更多>