js总结（8）轮播小总结

首先上图

基本思路如下
1.需要轮播的东西，放li里面浮动成一行展示，然后在li上面有一个小视窗（ul的父级）父级设置overflow: hidden,
这样咱们就可以让ul设置绝对定位，只需要调整left值让ul移动，移动就会出现在视窗。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       
        *{list-style: none;margin:0; padding: 0}
        .content{width: 400px;height: 200px;overflow: hidden;border:1px solid  red;margin:0 auto;position: relative;text-align: center;}
        img{width: 400px;}
        ul{height: 200px;width: 2000px;position: absolute;top: 0}
        li{float: left;width: 400px;display: inline-block}
        .cir{position: absolute;width: 400px;height: 20px;bottom: 0px;margin:0 auto;z-index: 1;color:white;text-align: center;background: rgba(50, 10, 10, 0.8);}
        span{
            display: inline-block;font-size: 16px;
        }
        .control{display: none}
        .control strong{
            position: absolute;top: 40%;z-index: 1;color: #D10796; font-size: 30px;background:rgba(162,162,162,0.5);vertical-align: 20px;
        }
        .content:hover .control {display: inline;}
        .control strong:nth-child(1){left: 10px}
        .control strong:nth-child(2){right: 10px}
    </style>
</head>
<body>
    <div class="content">
        <div class="control">
            <strong><</strong>
            <strong>></strong>
        </div>
        <div class="cir">
            <span>a1</span>
            <span>a2</span>
            <span>a3</span>
            <span>a4</span>
            <span>a5</span>
        </div>
        <ul>
        <li><img src="http://m.jjchfcyy.cn/zt2/pinpai%20108.png" alt=""></li>
        <li><img src="http://m.jjchfcyy.cn/zt2/chbaanner.jpg" alt=""></li>     
        <li><img src="http://m.jjchfcyy.cn/zt2/chbaanner.jpg" alt=""></li>
        <li><img src="http://m.jjchfcyy.cn/zt2/zt5.jpg" alt=""></li>
        <li><img src="http://m.jjchfcyy.cn/zt2/zt6.jpg" alt=""></li>
        </ul>
    </div>
    <script>
        var strong=document.getElementsByTagName("strong");
        var div=document.getElementsByTagName('div');
        var ul=document.getElementsByTagName('ul')[0];
        var span=document.getElementsByTagName('span');
        var len= span.length; 
        var timer = setInterval(function () {
                         
            ul.style.left=parseInt( window.getComputedStyle(ul, null).left)-400+"px";   
             if ( window.getComputedStyle(ul, null).left=="-2000px") {
               ul.style.left="0px";
               }            
            },1800)

          for (var i = 0;i< len;i++) {
            (function (i) {
               span[i].onclick=function () {
                ul.style.left=i*(-400)+"px";
             }
            }(i))             
             }
        

       strong[0].onclick=function () {
          ul.style.left=parseInt( window.getComputedStyle(ul, null).left)+400+"px"; 
          if ( window.getComputedStyle(ul, null).left=="400px") {
               ul.style.left="-1600px";
               }    
       }
       strong[1].onclick=function () {
          ul.style.left=parseInt( window.getComputedStyle(ul, null).left)-400+"px"; 
             if ( window.getComputedStyle(ul, null).left=="-2000px") {
               ul.style.left="0px";
               } 
       }
    </script>
</body>
</html>