简单实现js轮播图效果

本文实例为大家分享了js实现轮播图效果展示的具体代码，供大家参考，具体内容如下

html结构

 
 
 
  *{
   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;
  }
  .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;

  }
 


 
  
   
   
   
   
  
  

   

   

   

   

  
  
  
 

js

(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 && /^2d{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':str+='
';
    
   }
  }
  bannerTip.innerHTML = str;

 }()
 //图片延迟加载
 function lazyImg(){
  for(var i = 0,len = imgList.length;i oLis.length-1 ? 0 : step;
  for(var i = 0,len = oLis.length;i

绑定的数据

[
 {"img":"img/banner1.jpg","desc":"第一张轮播图"},
 {"img":"img/banner2.jpg","desc":"第二张轮播图"},
 {"img":"img/banner3.jpg","desc":"第三张轮播图"},
 {"img":"img/banner4.jpg","desc":"第四张轮播图"}
]



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。