js学习总结----轮播图

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='banner' id='banner'>
        <div class='inner'>
            <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='bannerTip'>
            <li class='bg'></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href="javascript:;" class='bannerLeft'></a>
        <a href="javascript:;" class='bannerRight'></a>
    </div>
</body>
</html>

js

(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="'+jsonData[i]['img']+'"></div>'
            }
            //为了实现无缝滚动，需要把第一张克隆一份放在末尾
            str+= '<div><img src="" trueImg="'+jsonData[0]['img']+'"></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+='<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('trueImg');
                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();
    }
})()

绑定的数据

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

 

posted @ 2017-07-14 14:25  diasa  阅读(894)  评论(0)    收藏  举报