js制作轮播图代码分享

2020-11-27 来源：华佗小知识

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='banner' id='banner'>
 <div class='inner'>
 <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='bannerTip'>
 <li class='bg'></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 <a href="javascript:;" class='bannerLeft'></a>
 <a href="javascript:;" class='bannerRight'></a>
 </div>
</body>
</html>

(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="'+jsonData[i]['img']+'"></div>'}//为了实现无缝滚动，需要把第一张克隆一份放在末尾str+= '<div><img src="" trueImg="'+jsonData[0]['img']+'"></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+='<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('trueImg');
 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":"第四张轮播图"}
]

显示全文

全部频道

js制作轮播图代码分享