图片轮播/滚动

最新推荐文章于 2024-07-08 16:22:29 发布

遊愙

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量384

点赞数 1

文章标签： javascript 图片轮播-滚动

本文链接：https://blog.csdn.net/baidu_37639000/article/details/71105648

版权

使用JavaScript制作图片无缝轮播效果，注意：
①使用到offsetLeft等方法，offset方法获取的为数据，转换成object.style.left等需要加”px”；
②使用left属性，父元素子元素需要position属性，建议父元素position: relative; 子元素position:absolute;
③object.style.left=0时取出的数字，赋值需要带”px”，以及其他地方各种获取的值都需要注意字符串和数字区别，可以用console.log()检查；
④li或者图片的样式中需要width参数，否则设置ul的参数时无法取出。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
    *{margin:0px; padding:0px; }        
    #div1{
       margin:200px auto 20px auto;
       width:712px; height:108px;
       background:blue; overflow:hidden;
       position:relative; left:0; top:0;
    }
    /*注意：父元素和当前元素的postision属性，left 属性不要遗漏*/
    #div1 ul{position:absolute; left:0; top:0; }

    #div1 li{list-style:none; float:left; }

    #div2{text-align:center; margin:20px auto 0 auto;
          width:712px; position:relative; left:0px; }

    #div2 input{width:55px; height:55px;
        border:1px solid; margin:30px;}

  </style>
 </head>
 <body>
   <div id="div1">
    <ul id="ul1"> <!-- 注意图片或css中必须有图片或li的width，否则无法取出 -->
      <li><img src="../../ScriptImages/scroll/1.jpg" width="178" height="108" border="0" alt=""></li>
      <li><img src="../../ScriptImages/scroll/2.jpg"alt=""></li>
      <li><img src="../../ScriptImages/scroll/3.jpg"alt=""></li>
      <li><img src="../../ScriptImages/scroll/4.jpg"alt=""></li> 
    </ul>

  </div>
    <div id="div2">
      <input type="button" value="←"/>
      <input type="button" value="→"/>
    </div>

  <script type="text/javascript">
// width="178" height="108"
    var div1=document.getElementById("div1");
    var ul=document.getElementById("ul1");
    var lies=ul.getElementsByTagName("li");
    var div2=document.getElementById("div2");
    var btns=div2.getElementsByTagName("input");
    var time;  // 定时器
// 可以根据参数±向左向右，根据绝对值大小控制速度
    var param=2;

//     var t=30000; //方便测试(随时切换停止时间)
//     var t=2000;

    ul.innerHTML+=ul.innerHTML;  //增加一倍图片，便于滚动时切换
//  ul 设置wdith为li.width*n(li数量) 注意 "px"
    ul.style.width=lies[0].offsetWidth*lies.length+"px";
//  console.log("ulWidth="+ul.style.width);
    var iUlWidth=ul.style.width;
    var num=parseInt(iUlWidth);  //将 "**px" 转换数字(不转换的话后面是字符串/2 Nan)
//  console.log("num="+num);              

      btns[0].onclick=function(){  // 左移button则left递减
        param=-2;
      }
      btns[1].onclick=function(){  // 右移button则left递赠
        param=2;
      }
    function start(){
      time=setInterval(move,30);  //定时器，参数一为函数
      function move(){
//      console.log(num);
//      当向左移时，left为负，因此小于-num/2 则把ul的left归零，然后重新滚动
        if (ul.offsetLeft<-num/2){
          ul.style.left=0;
          console.log("……………向左移动到一半………………"); 
        }
        if (ul.offsetLeft>0){  //右移时则每次到0时left置为 -num/2
          ul.style.left=-num/2+"px"; //注意 "px" 
//        console.log(ul.style.left);
          console.log("………………向右移动到一半……………");          
        }
//      console.log("a)ul-left"+ul.offsetLeft);
        ul.style.left=ul.offsetLeft+param+"px";
//      console.log("b)ul-left="+ul.offsetLeft);      
      } // mover 结束   
    } // start 结束

        ul.onmouseover=function(){
          clearInterval(time);
        }
        ul.onmouseout=function(){
          start();
        }

/*      测试时使用
        setTimeout(function(){
//      console.log("停止时是否执行定时器上面");
        clearInterval(time);
//      console.log("停止时是否执行定时器后面");
        },t);
*/    
  </script>
 </body>
</html>

遊愙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
图片轮播/滚动

使用JavaScript制作图片无缝轮播效果，注意： ①使用到offsetLeft等方法，offset方法获取的为数据，转换成object.style.left等需要加”px”； ②使用left属性，父元素子元素需要position属性，建议父元素position: relative; 子元素position:absolute; ③object.style.left=0时取出的数字，赋值需要带
复制链接

扫一扫