zoukankan      html  css  js  c++  java
  • 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());
  • 相关阅读:
    创建线程方法
    List 接口
    implements 的用法
    import和export 的使用方法
    js 实现 a == 'juejin' && a == 666 && a == 888
    position的属性运用
    css calc()函数 长度运算
    .net5一分钟入门
    css 如何让大小不同的图片表现一致,同时自适应呢?
    sqlserver isnull(),Count(),sum(),month(getdate()) 的用法
  • 原文地址:https://www.cnblogs.com/shuaimeng/p/11113755.html
Copyright © 2011-2022 走看看