HTML练习二--动态加载轮播图片

最新推荐文章于 2024-09-08 10:02:32 发布

dhmwidg13313

最新推荐文章于 2024-09-08 10:02:32 发布

阅读量192

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shuaimeng/p/11113755.html

版权

接上一篇https://www.cnblogs.com/shuaimeng/p/11106655.html

demo下载：

https://pan.baidu.com/s/1dhvzHwTHKiguyMD6sdSJgg tevd

效果图：

html：

<!--轮播图片-->
<div class="tempWrap" id="tempWrap-div">
                        
</div>

js：

//轮播图片
    //初始化图片
    var len = 0;
    function InitImage() {
        var images = [{
            "https": "javascript:void(0)",
            "img": "static/image/banner1.jpg"
        }, {
            "https": "javascript:void(0)",
            "img": "static/image/banner2.jpg"
        }, {
            "https": "javascript:void(0)",
            "img": "static/image/banner3.jpg"
        }, {
            "https": "javascript:void(0)",
            "img": "static/image/bg-timg.jpg"
        },{
            "https": "javascript:void(0)",
            "img": "static/image/bg-timg1.jpg"
        }]
        len = images.length;
        var ulhtml = '<ul>';
        var olhtml = '<ol class="tempWrap-ol">';
        for(var i = 0; i < len; i++) {
            ulhtml += '<li><a href=\"'+ images[i].https + '\">';
            ulhtml += '<img src=\"' + images[i].img + '\" /></a></li>';
            olhtml += '<li>' + (i+1) + '</li>'
        };
        ulhtml += '</ul>';
        olhtml += '</ol>';
        $('#tempWrap-div').append(ulhtml, olhtml);
        $('.tempWrap > ul').css({
            "width": len + "00%"
        });
        $('.tempWrap > ul > li').css({
            "width": 1 / images.length * 100 + "%"
        });
        $('.tempWrap > ol > li').eq(0).css({
            "background-color": "#222222"
        });
    };
    $("#tempWrap-div").load(InitImage());
    var index = 0;
    function selectImage(liindex) {
        index = liindex;
        var perleft = -index * 100;
        $(".tempWrap ul").animate({
            "left": perleft + "%"
        });
        $('.tempWrap-ol li').css({
            "background-color": "#c2c2c2"
        });
        $('.tempWrap-ol li').eq(liindex).css({
            "background-color": "#222222"
        });
    };
    $('.tempWrap-ol li').click(function(e) {
        var i = parseInt(e.target.textContent);
        selectImage(i - 1);
    });
    function startImage() {
        if(index == (len-1)) {
            index = 0;
        } else {
            index++;
        }
        selectImage(index);
        setTimeout(function() {
            startImage();
        }, 3000);
    };
    $('.tempWrap').onLoad(startImage());