简单实现js轮播图效果

2024-09-28 16:12:18

本文实例为大家分享了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>

(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实现轮播图的示例代码

很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
利用AngularJs实现京东首页轮播图效果

先来看看效果图其实写一个轮播图还是蛮简单的,我想了两种种方法,来实现轮播图(实际上细分是5种,但是其中两种是操作dom原生,三种是利用AngularJs的动画,所有归为两大类),等我写出来,大家好好理解一下就好. 那我先写一种,第一种是不使用angularjs的动画模块,只使用指令来完成动画的切换.在这里面就是在指令里操作dom元素,超级easy. 示例代码 <!DOCTYPE html> <html lang="en" ng-app="lunbo&quo
js实现点击左右按钮轮播图片效果实例

本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题

在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用. 它是一个纯javascript工具,不需要跟其它js库一起导入,同时兼容jQuery和zepto,压缩版的大小只有6kb很适合移动端的开发,它的git地址:https://github.com/thebird/swipe 在git上对其的使用方式介绍的相当清楚,关键代码如下 <div id='slider' class='swipe'>
原生js实现移动开发轮播图、相册滑动特效

使用方法: 分别引用css文件和js文件如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script
JS实现左右无缝轮播图代码

废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu
js 基础篇必看(点击事件轮播图的简单实现)

轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说.将图片放入到div 中. 其次,样式部分将img标签全部设置成absolute:以方便定位最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图
简单的JS轮播图代码

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过
原生js实现无限循环轮播图效果

知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px
js实现支持手机滑动切换的轮播图片效果实例

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

简单实现js轮播图效果

相关推荐

随机推荐