当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 简单实现js轮播图效果

简单实现js轮播图效果

2017年12月12日  | 移动技术网IT编程  | 我要评论

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

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>

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 && /^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":"第四张轮播图"}
]

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网