526互联

轮播图

发布时间 2024-01-05 17:03:48作者: 石头记1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                font-family: "微软雅黑";
                font-size: 12px;
                -webkit-user-select: none;
            }
            ul,li{
                list-style-type: none;
            }
            img{
                display: block;
                border: none;
            }
            a,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;
                width: 1000px;
                height: 300px;
            }
            .banner .inner div{
                width:1000px;
                height: 300px;
                float: left;
                background: url(img/loading.gif) no-repeat center center;
            }
            .banner .inner img{
                display: none;
                width:100%;
                height: 100%;
                opacity: 0;
                filter:alpha(opacity=0);
            }
            .banner .bannerTip{
                position: absolute;
                /*left:50%;
                margin-left: -80px;
                width: 100%;*/
                right:20px;
                bottom:20px;
                height: 12px;
            }
            .banner .bannerTip li{
                float: left;
                margin-left: 10px;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background-color: #31B0D5;
                cursor: pointer;
            }
            .banner .bannerTip li.bg{
                background-color: #FF0000;
            }
            .banner a{
                position: absolute;
                top:50%;
                margin-top: -25px;
                width:30px;
                height: 50px;
                background-image: url("img/pre.png");
                display: none;
                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: -50px 0;
            }
        </style>
    </head>
    <body>
        <div class="banner" id="banner">
            <div class="inner"></div>
            <ul class="bannerTip"></ul>
            <a class="bannerLeft" href="javascript:;"></a>
            <a class="bannerRight" href="javacsript:;"></a>
        </div>
        
            <script type="text/javascript" src="../utils.js"></script>
            <script type="text/javascript" src="../tween.js"></script>
            <script charset="UTF-8" type="text/javascript" src="banner.js"></script>
    </body>
</html>

[
{"img":"img/banner1.jpg","desc":"图1"},
{"img":"img/banner2.jpg","desc":"图2"},
{"img":"img/banner3.jpg","desc":"图3"},
{"img":"img/banner4.jpg","desc":"图4"}
]

(function (){
    var banner = document.getElementById("banner"),bannerInner = utils.firstChild(banner),bannerTip=utils.children(banner,"ul")[0];
    var imgList = bannerInner.getElementsByTagName("img"),oLis = bannerTip.getElementsByTagName("li");
    var bannerLeft = utils.children(banner,"a")[0],bannerRight = utils.children(banner,"a")[1];
    //1 ajax请求数据
    var jsonData = null,count = null;//当前页面有几张图片
    //1.获取绑定的数据（Ajax）->newslist.txt JSON格式字符串
    ~ function() {
        var xhr = new XMLHttpRequest; //创建一个对象
        //打开一个url链接请求，url地址后面加的随机数是在清除get每一次请求数据的时候产生的缓存，false同步：这个完不成，下面就不进行
        xhr.open("get", "banner-data.txt?_=" + Math.random(), false);
        //监听请求的状态
        xhr.onreadystatechange = function() {
            //readyState是4才算完成（还有0123）请求的网络状态请求码是以2开头的(201,202,200)
            if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
                //把json格式字符串转换为json格式的对象
                jsonData = utils.formatJSON(xhr.responseText);//得到json格式的字符串
            }
        }
        xhr.send(null);
    }();
    //2 按照字符串拼接的方式绑定数据
    ~function(){
        //1 绑定的是轮播图区域的数据
        var str = '';
        if(jsonData){
            for(var i=0, len=jsonData.length; i<len; i++){
                var curData = jsonData[i];
                str += '<div><img src="" trueImg="' + curData["img"] + '"/></div>'
            }
            //为了实现无缝滚动我们需要把第一张图片克隆一份一模一样的放在末尾
            str += '<div><img src="" trueImg="' + jsonData[0]["img"] + '"/></div>';
        }
        bannerInner.innerHTML = str;
        count = jsonData.length+1;
        utils.myCss(bannerInner, "width", count * 1000);
        
        //2 绑定的是焦点区域的数据
        str = '';
        if(jsonData){
            for(i=0, len=jsonData.length; i<len; i++){
                i===0 ? str += '<li class="bg"></li>' : str += '<li></li>';
            }
        }
        bannerTip.innerHTML = str;
    }();
    //3 图片的延迟加载
    window.setTimeout(lazyImg, 500);
    function lazyImg(){
        for(var i=0, len=imgList.length; i<len; i++){
            ~function(i){
                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;
                    dhAnimate(curImg,{opacity:1},300);
                    //curImg.removeAttribute("trueImg")
                }
            }(i);
        }
    }
    //4 实现自动轮播
    var step = 0;//记录的是步长（当前是哪一张图片，零是第一张图片）
    var interval = 2000;
    var autoTimer = window.setInterval(autoMove, interval);
    function autoMove(){
        if(step>=(count-1)){
            step = 0;
            //bannerInner.style.left = 0;不用库的写法
            utils.myCss(bannerInner,"left", 0);//立马回到第一张，肉眼看不出来
            //dhAnimate(bannerInner, {left: 0},0);这是动画回到第一张，就是往回拽的效果了
            //return;不能加return，因为加了后就跳出函数了，不能继续执行step++,得到第二张图片了
            
        }
        step++;
        dhAnimate(bannerInner, {left: -step * 1000}, 500);
        changeTip();
    }
    //第一张 step=0  2000 step=1  运动到-1000
    //第二张 step=1  2000 step=2  运动到-2000
    
    //5 实现焦点对齐
    function changeTip(){
        var tempStep = step >= oLis.length ? 0 : step;
//        var tempStep = step;
//        if(step >= oLis.length){
//            tempStep = 0;
//        }else{
//            tempStep = 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");
            //step===count-1 ? utils.addClass(oLis[0],"bg") : utils.removeClass(oLis[0],"bg");
        }
    }
    
    //6 停止和开始自动轮播定时器
    banner.onmousemove = function(){
        window.clearInterval(autoTimer);
        bannerLeft.style.display = bannerRight.style.display = "block";
    }
    banner.onmouseout = function(){
        autoTimer = window.setInterval(autoMove, interval);
        bannerLeft.style.display = bannerRight.style.display = "none";
    }

    //7 点击焦点实现轮播图的切换
    ~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();
                dhAnimate(bannerInner,{left:-step * 1000}, 500);
            }
        }
    }();
    
    //8 实现左右切换效果
    bannerRight.onclick = autoMove;
    bannerLeft.onclick = function(){
        if(step<=0){
            step = count-1;
            //bannerInner.style.left = 0;不用库的写法
            utils.myCss(bannerInner,"left", -step * 1000);//立马回到第一张，肉眼看不出来
            //dhAnimate(bannerInner, {left: 0},0);这是动画回到第一张，就是往回拽的效果了
            //return;不能加return，因为加了后就跳出函数了，不能继续执行step++,得到第二张图片了
            
        }
        step--;
        dhAnimate(bannerInner, {left: -step * 1000}, 500);
        changeTip();
    }
})();