zoukankan      html  css  js  c++  java
  • JS轮播图带序号小点和左右按钮

    轮播图作为前端比较简易的动画,使用非常频繁,这里记录以便使用

    此轮播图为最简易自动播放,非无缝,但有按钮,有序号跳转小点

    想看全套轮播图可以查看我的分类轮播图全套

    html布局

    <div style=" 100%;">
            <div id="zuo" onClick="huan('zuo')"></div>
            <div class="tu">
                <img src="02xsxx.jpg" alt="">
            </div>
            <div class="tu">
                <img src="20181011qlqnlt.jpg" alt="">
            </div>
            <div class="tu">
                <img src="20181011rcqx.jpg" alt="">
            </div>
            <div class="tu">
                <img src="20181016qdxq.jpg" alt="">
            </div>
            <div class="tu">
                <img src="20181018-sdlt0.jpg" alt="">
            </div>
            <div class="tu">
                <img src="20181022fanzeng.jpg" alt="">
            </div>
    <!-- 此处有函数 huan() 参数为 'zuo' 和 'you' 切换图片按钮-->
    <div id="you" onClick="huan('you')"></div> </div> <div id="dian"> <div style="230px; margin: auto; height: 30px;">
    <!-- 此处添加函数 dianji() 点击小点切换图片-->
    <div onClick="dianji(0)" class="dian"></div> <div onClick="dianji(1)" class="dian"></div> <div onClick="dianji(2)" class="dian"></div> <div onClick="dianji(3)" class="dian"></div> <div onClick="dianji(4)" class="dian"></div> <div onClick="dianji(5)" class="dian"></div> </div> </div>

    css样式

            *{
            margin: 0 auto;
            padding: 0 auto;
        }
        .tu{
            float: left;0
            width: 100%;
            display: none;
        }
        .tu img{
            width: 100%;
        }
        #zuo{
            position: absolute;
            top: 300px;
            background-color: rgba(255,255,255,0.50);
            width: 40px;
            height: 40px;
        }
        #you{
            position: absolute;
            top: 300px;
            background-color: rgba(255,255,255,0.50);
            width: 40px;
            height: 40px;
            right: 5px;
        }
        
        #dian{
            text-align: center;
            position: relative;
            top: -60px;
        }
        
        .dian{
            float: left;
            border: 1px solid rgba(255,255,255,1.00);
            border-radius: 30px;
            width: 30px;
            height: 30px;
            margin-left: 5px;
            background-color: rgba(0,0,0,1.00);
        }

    同样布局不用要完全可以自己布局,下面看js

       var jishu=0;    //记录到第几张
        var tu;            //接收图片的dom
        var dian;        //接收小点dom
    //    自己播放函数,不懂请看轮播图全套里 JS最通俗易懂简易轮播实现
        function aaa(){
            tu =document.getElementsByClassName("tu"); 
            dian =document.getElementsByClassName("dian"); 
            
            //显示当前隐藏其他
            for(var a=0;a<tu.length;a++){
                if(a==jishu){
                    tu[jishu].style.display="block";
                    dian[jishu].style.border="1px solid rgba(255,0,4,1.00)";
                    dian[jishu].style.backgroundColor = "white";
                }else{
                    tu[a].style.display="none";
                    dian[a].style.border="1px solid rgba(255,255,255,1.00)";
                    dian[a].style.backgroundColor = "black";
                }
            }
            //到最后一张回到第一张
            if(jishu>tu.length-2){
                jishu=0;
            }else{
                jishu++;
            }
            
            
        }
        aaa();
        var dong = setInterval("aaa()",2000);
    //    切换上一张和下一张
        function huan(data){
    //        先暂停,防止出现手动切换和自动切换重叠
            clearInterval(dong);
    //        判断实参
            if(data=="zuo"){
    // jishu<=1请情况有两种,0和1
    if(jishu<=1){
      // 如果是0那么当前显示的是第6张,请结合上面jishu清零语句   
    if(jishu==0){
      // 那么jishu=4就是显示 第五张   jishu
    =4;   }else{
      // 否则jishu=1时,显示的是第一张,结合上面jishu+1操作,jishu=5就是显示第六张   jishu
    =5;   }    }else{
      // 此处否则 显示上一张,此处需要-2因为每次运行完jishu都会多加1 jishu
    =jishu-2; } }else{
      // 否则 此处是向右滚动,向左判断完成后,向右只考虑最后一张的情况。jishu=6时显示的是五张,再点击一次需要回到第一张
    if(jishu>=6){ jishu=0; } }
      // 判断完运行左还是右之后重新调用函数即可 aaa(); dong
    = setInterval("aaa()",2000); } // // 小点翻页 function dianji(data){ clearInterval(dong);
      // 参考html代码中,给此函数的实参 jishu
    = data; aaa(); dong = setInterval("aaa()",2000); }
  • 相关阅读:
    Nokia N78拍照最佳设置!
    摩托Milestone购机鉴别篇
    sdf
    js随笔
    jssip无法识别以数字开始的域
    ASP.NET页面生命周期与优化
    在SQLServer2005中使用全文搜索
    简析正则表达式
    《WCF编程》之错误
    《WCF编程》之实例管理
  • 原文地址:https://www.cnblogs.com/xiaozhang666/p/10263345.html
Copyright © 2011-2022 走看看