轮播2

Posted 2021-01-02 mr171733

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播2相关的知识，希望对你有一定的参考价值。

<style type="text/css">
            *{
                margin: 0 auto;
                padding: 0;
            }
            #clmb{
                width: 480px;
                height: 300px;
                margin-top: 100px;
                margin-bottom: 100px;
                overflow: hidden;
            }
            /*移动的图片div*/
            #pick{
                width: 1500px;
                height: 300px;
            }
            .tup{
                width: 495px;
                height: 300px;
            }
            /*圆圈*/
            .roll{
                width: 20px;
                height: 20px;
                border: 1px solid white;
                border-radius:50% ;
                position: relative;
                background: black;
                opacity: 0.2;
            }
            .roll:hover{
                cursor: pointer;
            }
            #roll_1{
                right: 34px;
                bottom: 135px;
            }
            #roll_2{
                right: 1px;
                bottom: 158px;
            }
            #roll_3{
                right: -32px;
                bottom: 180px;
            }
            /*左右按钮*/
            .butt{
                width: 50px;
                height: 50px;
                color: white;
                font-size:50px;
                line-height: 50px;
                position: relative;
            }
            .butt:hover{
                color: black;
                opacity: 0.7;
                cursor: pointer;
            }
            #left{
                bottom: 335px;
                right: 211px;
            }
            #right{
                bottom: 388px;
                right: -213px;
            }
        </style>

<body>
        <div class="div_list">3、图片轮播 加图片下方圆点 加左右点击</div>
        <div id="clmb">
            <div id="pick" style="margin-left: 0px; ">
                <img class="tup" src="20100730154518390017.jpg"/>
                <img class="tup" src="42166d224f4a20a4edfd8a079c529822730ed00b.jpg"/>
                <img class="tup" src="u=655850498,3302772215&fm=26&gp=0.jpg"/>
            </div>    
        </div>
        <div id="roll_1" class="roll" onclick="test_roll1()" onmouseover="qing()" onmouseout="chong()" style="opacity: 0.9;"></div>
        <div id="roll_2" class="roll" onclick="test_roll2()" onmouseover="qing()" onmouseout="chong()"></div>
        <div id="roll_3" class="roll" onclick="test_roll3()" onmouseover="qing()" onmouseout="chong()"></div>
        <div id="left" class="butt" onclick="test_left()" onmouseover="qing()" onmouseout="chong()">←</div>
        <div id="right" class="butt" onclick="test_right()" onmouseover="qing()" onmouseout="chong()">→</div>
    </body>

<script type="text/javascript">
    var timer = setInterval("test_3()",2000);//轮播
    function qing(){
        window.clearInterval(timer);
    }
    function chong(){
        timer = setInterval("test_3()",2000);
    }
      var bs = 1;
//  图片的切换和圆点的变换
    function test_3(){
        var a = document.getElementById("pick");
        var b = document.getElementsByClassName("roll");
        var ml= a.style.marginLeft;
        ll=ml.substring(0,ml.length-2);
        dl=ll-500;
        if(dl ==-1500){
            dl=0;
        }
        a.style.marginLeft=dl+‘px‘;
        for (var i= 0;i<b.length;i++) {
            b[i].style.opacity="0.2";
        }
        b[bs].style.opacity="0.9";
        bs++;
        if (bs==3) {
            bs=0;
        }
        
    }
//    鼠标点击左右
   var xx = 3;
    function test_left(){
        var a = document.getElementById("pick");
        var ml= a.style.marginLeft;
        ll=ml.substring(0,ml.length-2);
        ll=Number(ll);
        dl= ll + 500;
        if(dl == 500){
            dl=-1000;
        }
        dl=String(dl);
        a.style.marginLeft=dl+‘px‘;
        var b = document.getElementsByClassName("roll");
        for (var i= 0;i<b.length;i++) {
            b[i].style.opacity="0.2";
        }
        xx--;
        b[xx].style.opacity="0.9";
        
        if (xx == 0) {
            xx = 3;
        }
    }
    function test_right(){
        var a = document.getElementById("pick");
        var ml= a.style.marginLeft;
        ll=ml.substring(0,ml.length-2);
        dl=ll-500;
        if(dl == -1500){
            dl=0;
        }
        a.style.marginLeft=dl+‘px‘;
       var b = document.getElementsByClassName("roll");
        for (var i= 0;i<b.length;i++) {
            b[i].style.opacity="0.2";
        }
        b[bs].style.opacity="0.9";
        bs++;
        if (bs==3) {
            bs=0;
        }
    }
    function test_roll1(){
         document.getElementById("pick").style.marginLeft="0px";
         for (var i=0;i<3;i++) {
             document.getElementsByClassName("roll")[i].style.opacity="0.2";
         }
         document.getElementsByClassName("roll")[0].style.opacity="0.9";
    }
    function test_roll2(){
         document.getElementById("pick").style.marginLeft="-500px";  
         for (var i=0;i<3;i++) {
             document.getElementsByClassName("roll")[i].style.opacity="0.2";
         }
         document.getElementsByClassName("roll")[1].style.opacity="0.9";
    }
    function test_roll3(){
         document.getElementById("pick").style.marginLeft="-1000px"; 
         for (var i=0;i<3;i++) {
             document.getElementsByClassName("roll")[i].style.opacity="0.2";
         }
         document.getElementsByClassName("roll")[2].style.opacity="0.9";
    }
</script>

技术分享图片

以上是关于轮播2的主要内容，如果未能解决你的问题，请参考以下文章

最全最详细publiccms其他常用代码片段（内容站点)