cari

Rumah >hujung hadapan web >tutorial js >js制作轮播图代码分享

js制作轮播图代码分享

巴扎黑
巴扎黑asal
2017-07-19 16:29:161489semak imbas

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>

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="&#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();
    }
})()

绑定的数据

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

 

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jsp实现上下页的分页功能Artikel seterusnya：Math，Number

Artikel berkaitan

Lihat lagi