简单实现js轮播图效果


Posted in Javascript onJuly 14, 2017

本文实例为大家分享了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":"第四张轮播图"}
]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简单的代码实现jquery定时器
Nov 17 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
javascript中setInterval的用法
Jul 19 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 #Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 #Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 #Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 #Javascript
vue component组件使用方法详解
Jul 14 #Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 #Javascript
Vue filters过滤器的使用方法
Jul 14 #Javascript
You might like
php比较两个绝对时间的大小
2014/01/31 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
js实现tab切换效果
2017/02/16 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
express 项目分层实践详解
2018/12/10 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
Python3读取zip文件信息的方法
2015/05/22 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Python 通配符删除文件的实例
2018/04/24 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
Mac安装python3的方法步骤
2019/08/09 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
人力资源经理自我评价
2014/01/04 职场文书
我爱我家教学反思
2014/05/01 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
正规欠条模板
2015/07/03 职场文书
简短清晨问候语
2015/11/10 职场文书
初中物理教学反思
2016/02/19 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js