【Javascript】进阶之无缝轮播图在项目中的应用

无缝轮播图在项目中的应用(利用Ajax获取数据)

代码实现

1.HTML布局

 <!-- banner -->
        <div id="banner" class="fl">
            <!-- banner list -->
            <ul class="bannerlist">
                <!--  <li>
                    <img src="./img/banner-1.jpg" alt="banner">
                </li>
                <li>
                    <img src="./img/banner-2.jpg" alt="banner">
                </li>
                <li>
                    <img src="./img/banner-3.jpg" alt="banner">
                </li>
                <li>
                    <img src="./img/banner-4.jpg" alt="banner">
                </li>
                <li>
                    <img src="./img/banner-5.jpg" alt="banner">
                </li>
                <li>
                    <img src="./img/banner-6.jpg" alt="banner">
                </li> -->
            </ul>
            <!-- shift list -->
            <p class="shiftlist">
                <!-- <span class = "active"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span> -->
            </p>
            <!-- left arrow and right arrow -->
            <button class="left">&lt;</button>
            <button class="right">&gt;</button>
        </div>

2.CSS样式

.classificationnav #banner{
    width: 1366px;
    height: 393px;
    cursor: pointer;
    overflow: hidden; 
    position: relative;
}
.classificationnav #banner .bannerlist{
    width: 8196px;
    height: 393px;
    position: absolute;
    left: 0;
    top: 0;
}
.classificationnav #banner .bannerlist > li{
    width: 1366px;
    height: 393px;
    float: left;
}
.classificationnav #banner .bannerlist > li > img{
    width: 1366px;
    height: 393px;
}
.classificationnav #banner .shiftlist{
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: 25px;
    text-align: center;
}
.classificationnav #banner .shiftlist span{
    width: 50px;
    height: 100%;
    background-color: #cccccc;
    display: inline-block;
    margin-right: 5px;
}
.classificationnav #banner .shiftlist span.active{
    background-color: #ff4400;
}
.classificationnav #banner > button{
    width: 50px;
    height: 100px;
    line-height: 100px;
    background-color: rgba(204, 204, 204, .7);
    position: absolute;
    font-size: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: none; 
}
.classificationnav #banner > .left{
    left: 323px;
}
.classificationnav #banner > .right{
    right: 210px;
}

3.Javascript功能实现

 // 2.Realization of rotation banners
    // 2.1 Ajax request address data
    ajax('get', './data/banner.json','',function(res){
        // console.log(res);
        // transform data
        var bannerUrl = JSON.parse(res);
        // console.log(bannerUrl);

        // 2.2 Data rendering to the banner
        // Get banner ul span
        var banner = document.getElementById('banner');
        // console.log(banner);
        var bannerlist = banner.querySelector('.bannerlist');
        var shiftlist = banner.querySelector('.shiftlist');
        // console.log(bannerlist, shiftlist);

        // Declare variables to store address
        var bannerImage = '', shift = '';
        for(var i = 0; i < bannerUrl.length; i++){
            // console.log(bannerUrl[i]);
            bannerImage += '<li><img src="'+ bannerUrl[i] +'" alt="banner"></li>';
            shift += '<span></span>'
        }
        // Rendering to the father element
        bannerlist.innerHTML = bannerImage;
        shiftlist.innerHTML = shift;

        // 2.3 Initialize banner styles
        var spans = shiftlist.getElementsByTagName('span');
        spans[0].className = 'active';

        // Seamless carousel puls last banner
        bannerlist.innerHTML += '<li><img src="'+ bannerUrl[0] +'" alt="banner"></li>';

        // Make the banner move
        // Get the width of banner
        var cw = banner.clientWidth;
        // console.log(cw);

        // Recalculate the width of bannerlist
        bannerlist.style.width = (bannerUrl.length + 1) * cw + 'px';
        
        // Suppose the picture is the first one
        var n = 0;
        // Distance of moving = index * bannerImage width
        // Direction : 0 - 1 - 2 - 3 - 4 -5 - 0
        banner.timer = setInterval(auto, 4000);
        // enter the banner, clear interval
        banner.onmouseenter = function(){
            clearInterval(banner.timer);
        }
        // leave the banner, activate the timer
        banner.onmouseleave = function(){
            banner.timer = setInterval(auto, 4000);
        }
        // Click shift button, shift to corresponding banner image
        for(var i = 0; i < spans.length; i++){
            // Custom index
            spans[i].index = i;
            // Add click event to each span
            spans[i].onclick = function(){
                n = this.index - 1;
                auto();
            }
        }
        // Click right button, shift to the next banner image
        var btns = banner.getElementsByTagName('button');
        // console.log(btns);

        btns[1].onclick = function(){
            auto();
        }

        // Click left button, shift to the previous banner image
        btns[0].onclick = function(){
            n -= 2;
            auto();
        }
        // auto()
        function auto(){
            // Index ++
            n++;

            // If index gets to the last one, return the first one
            if(n > bannerUrl.length){
                n = 0;
                // Change position 
                bannerlist.style.left = n * (-cw) + 'px';
                // Update index
                n = 1;
            }
            // If index gets to the first one, return the last one
            if(n < 0){
                n = bannerUrl.length - 1;
                // flash
                bannerlist.style.left = n * (-cw) + 'px';
            }

            // Call move(ele, attr, step, target) function
            move(bannerlist, 'left', 50, n * (-cw));

            // Exclusive operation
            for(var i = 0; i < spans.length; i++){
                spans[i].className = '';
            }

            // shift and bannerImage corresponds to each other
            spans[n == bannerUrl.length ? 0 : n].className = 'active';
        }
    });

function move()

// 运动函数--匀速
function move(ele, attr, step, target) {
    // ele: 运动的元素
    // attr: 改变的属性
    // step: 每一次走的步数
    // target: 目标结果
    // 速度的判断   当前值(获取) < 目标值(target)  正数  当前值 > 目标值  负数
    var cur = parseInt(getStyle(ele, attr));
    step = (cur < target ? step : -step);
    clearInterval(ele.t);
    ele.t = setInterval(function () {
        var cur = parseInt(getStyle(ele, attr));
        var end = cur + step;
        if (end >= target && step > 0 || end <= target && step < 0) {
            // 清除定时器  唯一标识
            clearInterval(ele.t);
            // 将end赋值成target
            end = target;
        }
        // 赋值给ele的attr
        ele.style[attr] = end + 'px';
    }, 20);
}