js制作轮播图代码分享-tutorial js-php.cn

js制作轮播图代码分享

巴扎黑

Lepaskan： 2017-07-19 16:29:16

asal

1479 orang telah melayarinya

html结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-size:14px;-webkit-user-select:none;
        }
        ul,li{
            list-style:none;

        }
        img{
            display:block;
            border:none;
        }
        a{
            display:block;
            color:#000;
            text-decoration: none;
        }
        a:hover,a:active,a:visited,a:target{
            display:block;
            color:#000;
            text-decoration: none;
        }
        .banner{
            position:relative;
            margin:0 auto;
            width:1000px;
            height:300px;
            overflow:hidden;
        }
        .banner .inner{
            position:absolute;
            top:0;
            left:0;
            height:300px;
            width:1000px;/*在JS数据绑定结束后根据请求数据的多少来动态调整宽度*/}
        .banner .inner div{float:left;
            width:1000px;
            height:300px;
            background:url('img/default.gif') no-repeat center center #e1e1e1;
        }
        .banner .inner img{
            display:none;
            width:100%;
            height:100%;
            opacity:0;
            filter:alpha(opacity=0);
        }
        .banner .bannerTip{
            height:18px;
            position:absolute;
            right:20px;
            bottom:20px;

        }
        .banner .bannerTip li{float:left;
            margin-left:10px;
            width:18px;
            height:18px;
            border-radius:50%;
            background:lightblue;
            cursor:pointer;
        }
        .banner .bannerTip li.bg{
            background:red;
        }
        .banner a{
            display:none;
            position:absolute;
            top:50%;
            margin-top:-22.5px;
            width:30px;
            height:45px;
            background-image:url("img/pre.png");
            background-repeat:no-repeat;
            opacity:0.5;
            filter:alpha(opacity=50);

        }
        .banner a:hover{
            opacity:1;
            filter:alpha(opacity=100);
        }
        .banner a.bannerLeft{
            left:20px;
            background-position:0 0;
        }
        .banner a.bannerRight{
            right:20px;
            background-position:-45px 0;

        }</style>
</head>
<body>
    <div class=&#39;banner&#39; id=&#39;banner&#39;>
        <div class=&#39;inner&#39;>
            <div><img src="img/banner1.jpg" alt=""></div>
            <div><img src="img/banner2.jpg" alt=""></div>
            <div><img src="img/banner3.jpg" alt=""></div>
            <div><img src="img/banner4.jpg" alt=""></div>
        </div>
        <ul class=&#39;bannerTip&#39;>
            <li class=&#39;bg&#39;></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href="javascript:;" class=&#39;bannerLeft&#39;></a>
        <a href="javascript:;" class=&#39;bannerRight&#39;></a>
    </div>
</body>
</html>

Salin selepas log masuk

(function(){var banner = document.getElementById('banner');var bannerInner = utils.firstChild(banner);var bannerTip = utils.children(banner,'ul')[0];var imgList = bannerInner.getElementsByTagName('img');var oLis = bannerTip.getElementsByTagName('li');var bannerLeft = utils.children(banner,'a')[0];var bannerRight = utils.children(banner,'a')[1];//实现数据绑定：Ajax请求数据、按照字符串拼接的方式绑定数据var jsonData = null,count = null~function(){var xhr = new XMLHttlRequest;
        xhr.open('get',"json/banner.txt?_="+Math.random(),false);
        xhr.onreadystatechange = function(){if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)){
                jsonData = utils.formatJSON(xhr.responseText);
            }
        }
        xhr.send(null);
    }()~function(){//绑定轮播图区域的数据var str = "";if(jsonData){for(var i = 0,len = jsonData.length;i<len;i++){
                str+='<div><img src="" trueImg="&#39;+jsonData[i][&#39;img&#39;]+&#39;"></div>'}//为了实现无缝滚动，需要把第一张克隆一份放在末尾str+= '<div><img src="" trueImg="&#39;+jsonData[0][&#39;img&#39;]+&#39;"></div>'}
        bannerInner.innerHTML = str;
        count = jsonData.length+1;
        utils.css(bannerInner,"width",count*1000);//绑定焦点区域的数据str = '';if(jsonData){for(var i = 0,len = jsonData.length;i<len;i++){
                i===0?str+=&#39;<li class="bg"></li>':str+='<li></li>';
                
            }
        }
        bannerTip.innerHTML = str;

    }()//图片延迟加载function lazyImg(){for(var i = 0,len = imgList.length;i<len;i++){~function(i){//这里使用闭包，来避免onload事件异步导致的只有最后一张图片延迟加载的问题var curImg = imgList[i];var oImg = new Image;
                oImg.src = curImg.getAttribute(&#39;trueImg&#39;);
                oImg.onload = function(){
                    curImg.src = this.src;
                    curImg.style.display = "block";
                    oImg = null;
                    myAnimate(curImg,{opacity:1},300)
                }
            }(i)    
        }
    }
    window.setTimeout(lazyImg,500);var step = 0;//记录的是步长，（当前是哪一张图片，0是第一张图片）//实现自动轮播var autoTimer = window.setInterval(autoMove,2000);function autoMove(){if(step===count-1){
            step =0;
            bannerInner.style.left = 0}
        step++;
        myAnimate(bannerInner,{left:-step*1000},500)
        changeTip();
    }//实现焦点对齐function changeTip(){var tempStep = step > oLis.length-1 ? 0 : step;for(var i = 0,len = oLis.length;i<len;i++){var curLi = oLis[i];
            i === tempStep ? utils.addClass(curLi,"bg") : utils.removeClass(curLi,"bg")
        }
    }//鼠标滑过停止和开启轮播banner.onmouseover = function(){
        window.clearInterval(autoTimer);
        bannerLeft.style.display = bannerRight.style.display = 'block';
    } 
    banner.onmouseout = function(){
        autoTimer = window.setInterval(autoTimer,2000);
        bannerLeft.style.display = bannerRight.style.display = 'none';
    }//点击焦点实现轮播图的切换~function(){for(var i = 0,len = oLis.length;i<len;i++){var curLi = oLis[i];
            curLi.index = i;
            curLi.onclick = function(){
                step = this.index;
                changeTip();
                myAnimate(bannerInner,{left:-step*1000},500)
            }
        }
    }()//实现左右切换bannerRight.onclick = autoMove();
    bannerLeft.onclick = function(){if(step<=0){
            step = count-1;
            utils.css(bannerInner,"left",-step*1000);
        }
        step--;
        autoMove();
    }
})()

Salin selepas log masuk

绑定的数据

[
    {"img":"img/banner1.jpg","desc":"第一张轮播图"},
    {"img":"img/banner2.jpg","desc":"第二张轮播图"},
    {"img":"img/banner3.jpg","desc":"第三张轮播图"},
    {"img":"img/banner4.jpg","desc":"第四张轮播图"}
]

Salin selepas log masuk

Atas ialah kandungan terperinci js制作轮播图代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!