zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    四则运算 2
    《你的灯亮着吗》读后感 (前两篇)
    四则运算设计思路
    读书目标
    课堂总结
    人月神话感想
    软件工程概论11
    软件工程概论10
    bnu——GCD SUM (莫比乌斯反演)
    POJ1108_Split Windows 解题报告
  • 原文地址:https://www.cnblogs.com/guorui1995/p/6006437.html
Copyright © 2011-2022 走看看