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());