8顶

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

稿源：互联网 2022-04-02 21:40:12 点击： 31839 撤稿纠错

JS代码的左右循环移动效果，通常用于图片展示，广告图片展示等..

以下讨论的是和左右滚动图片展示相关的可控制左右循环翻滚的图片展示特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

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

关于可控制左右循环翻滚的图片展示特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011030968389.shtml方便下次再访问哦。

·上一篇： 缓冲效果+伸缩隐藏层的特效代码
·下一篇： 批量获取图片的title属性值

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

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

文章分类LIST >>返回首页

最新游戏

最新新闻