js-基础-简易轮播图

1.定时器调用轮播

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #div1{
                width: 500px;/*设置宽高*/
                height: 332px;
                margin: 100px auto;
                position: relative;/*开启定位*/
                overflow: hidden;/*隐藏溢出部分*/
            }
            .div2{
                width: 2500px;/*照片总长度*/
                position: absolute;
                left: 0;
            }
            .div2 img{
                float: left;/*设置浮动 让其处于水平方向*/
            }
            .span{
                position: absolute;/*设置导航按钮居中*/
                z-index: 1;
                left: 50%;
                margin-left:-62.5px;
                bottom: 10px;
            }
            .span span{
                float: left;
                height: 15px;
                width: 15px;
                background-color: red;
                border-radius:50%;
                margin: 0 5px;
                /*cursor: pointer;*/
                opacity: 0.6;
            }
        </style>
    </head>
    <body>
         <div id="div1">
            <div class="div2">
                <img src="img/1.jpg"/>
                <img src="img/2.jpg"/>
                <img src="img/3.jpg"/>
                <img src="img/4.jpg"/>
                <img src="img/5.jpg"/>
            </div>
            <div class="span">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
         </div>
         <script type="text/javascript">
            var div2 = document.getElementsByClassName("div2")[0];
            var div3 = document.createElement("div");//把div2的内容复制一份 并且添加到页面中
            var span = document.getElementsByTagName("span");
            div3.innerHTML = div2.innerHTML;
            div3.className = "div2";//添加类
            div1.appendChild(div3);
            var left1 = 0;//初始化div2的偏移量
            var left2 = 2500;//初始化div3的偏移量
            var a = 0;//默认是第一张照片 ，设置对应导航按钮颜色的背景颜色
            span[a].style.backgroundColor = 'black';
            function fun(){
                a++;
                if(a < 5){
                span[a-1].style.backgroundColor = 'red';//清除前一张背景样式
                span[a].style.backgroundColor = 'black';//设置对应导航按钮颜色的背景颜色
                }
                else{
                    a = 0;
                    span[4].style.backgroundColor = 'red';
                    span[a].style.backgroundColor = 'black';
                }
                left1 = left1 - 500;
                left2 = left2 - 500;
                div2.style.left = left1 + "px";//赋值div2的偏移量
                div3.style.left = left2 + "px";//赋值div3的偏移量
                if(left1 == -2500){
                    left1 = 2500;
                }
                if(left2 == -2500){
                    left2 = 2500;
                }
                for(var i = 0 ;i < span.length ;i++){
                span[i].num = i;//给每个导航按钮增加一个属性num。避免出现闭包问题
                span[i].onclick = function(){
                    var index = this.num;
                    if(a != index){
                        span[a].style.backgroundColor = "red";
                        a = index;
                        span[a].style.backgroundColor = "black";
                    };

                    div2.style.left = -500*index +"px";//让导航按钮对应的照片显示
                    left1 = -500*index;//同时要重新设置div2和div3的偏移量（重要）
                    left2 = 2500 + left1;
                }
            }

        }
            setInterval(fun,3000)//定时调用

         </script>
    </body>
</html>

jQuery点击切换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #div1{/*设置宽高和定位*/
                width: 790px;
                height: 340px;
                margin: 100px auto;
                position: relative;
            }
            #div1 ul{
                list-style: none;
            }
            #div1 li{/*设置所有照片隐藏*/
                position: absolute;
                display: none;
            }
            #div1 li:first-child{/*默认第一张照片显示*/
                display: block;
            }
            #left,#right{/*设置导航箭头左右居中*/
                position: absolute;
                background-color: rgba(0,0,0,0.2);
                color: white;
                width: 30px;
                height: 60px;
                font-size: 36px;
                text-align: center;
                line-height: 60px;
                top: 50%;
                margin-top:-30px ;
                display: none;/*默认隐藏*/
                cursor: pointer;
            }
            #left{
                left: 0;
            }
            #right{
                right: 0;
            }
            #div1:hover span{
                display: block;
            }
            #left:hover,#right:hover{
                background-color: rgba(0,0,0,0.6);
            }
        </style>
    </head>
    <body>
        <div id = "div1">
            <ul>
                <li><a href=""><img src="images/1.jpg"/></a></li>
                <li><a href=""><img src="images/2.jpg"/></a></li>
                <li><a href=""><img src="images/3.jpg"/></a></li>
                <li><a href=""><img src="images/4.jpg"/></a></li>
                <li><a href=""><img src="images/5.jpg"/></a></li>
                <li><a href=""><img src="images/6.jpg"/></a></li>
                <li><a href=""><img src="images/7.jpg"/></a></li>
                <li><a href=""><img src="images/8.jpg"/></a></li>
            </ul>
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
            <script type="text/javascript" src="jquery-1.12.4.js"></script>
            <script type="text/javascript">
                $(function(){
                    var index = 0;//定义一个index赋值为0
                    $("#right").click(function(){
                        index++;//鼠标点击右箭头 index++
                        if(index == $("#div1 li").length){
                            index = 0;
                        }
                        //console.log(index)
                        $("#div1 li").eq(index).fadeIn().siblings().fadeOut();//让div1的后代li对应的索引显示出来 让其兄弟隐藏
                    });
                    $("#left").click(function(){
                        index--;
                        if(index == -1){
                            index = $("#div1 li").length-1;
                        }
                        //console.log(index)
                        $("#div1 li").eq(index).fadeIn().siblings().fadeOut();
                    });
                });
            </script>
        </div>
    </body>
</html>

js-基础-简易轮播图

1.定时器调用轮播

jQuery点击切换

待完善中

猜你喜欢