• JavaScript 轮播图


    这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊

    布局什么的你们自己搞定吧

    <div class="slider" id="circle">

    <a href=""><img src="img/6p.jpg" alt="" /></a>

    `

    <ul class="circle" >

    <li onclick="lun(1)" id="ico1">1</li>

    <li onclick="lun(2)" id="ico2">2</li>

    <li onclick="lun(3)" id="ico3">3</li>

    <li onclick="lun(4)" id="ico4">4</li>

    <li onclick="lun(5)" id="ico5">5</li>

    <li class="current" onclick="lun(6)" id="ico6">6</li>

    </ul>

    <div class="arrow">

    <a href="javaScript:;" class="arrow-l"onclick="bo2()" id="bo1"><</a>

    <a href="javaScript:;" class="arrow-r"onclick="bo1()" id="bo2">></a>

    </div>

    </div>

    <script>

        var c = 0 ;

        var t ;

        window.onload = function () {

          t = setInterval("bo1()",5000);

         

           

        }

    function lun(num){

    c = num ;

          var  ptn = document.getElementById("circle").getElementsByTagName("img")[0];

             

        for (var i = 1 ; i < 7;i++ ) {

        var li = document.getElementById("circle").getElementsByTagName("li")[i-1];

        li.style.backgroundColor = "#3E3E3E";

       

        if (num == i) {

         

        ptn.src = "img/"+ i + "p.jpg";

          li.style.backgroundColor = "#B61B1F";

        }

        }

         

    }

    function bo1() {

         

            if(c>=6){

            c = 0 ;

            }

          c++;

          lun(c);

          }

    function bo2() {

         

            if(c<=1){

            c = 7 ;

            }

          c--;

          lun(c);

          }

    </script>

  • 相关阅读:
    Wedding(2-SAT)
    JSOI2010 满汉全席
    2-SAT问题
    Tarjan求桥
    遥远的国度
    NOIP2014 联合权值
    部落冲突
    仓鼠找sugar
    2018.09.09 DL24 Day2总结
    php一些易犯的错误
  • 原文地址:https://www.cnblogs.com/guorui1995/p/6006437.html
Copyright © 2020-2023  润新知