简单实现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 radio 操作代码
Mar 16 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
详解vue3.0 diff算法的使用(超详细)
Jul 01 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学习 计数器实例代码
2008/06/15 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
用ADODB.Stream转换
2007/01/22 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python单元和文档测试实例详解
2019/04/11 Python
python制作图片缩略图
2019/04/30 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
知识竞赛主持词
2014/03/26 职场文书
个人欠款担保书
2014/05/20 职场文书
师德师风个人整改措施
2014/10/27 职场文书
教师考核表个人总结
2015/02/12 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
python pygame 开发五子棋双人对弈
2022/05/02 Python