js实现炫酷的左右轮播图


Posted in Javascript onJanuary 18, 2017

本文实例为大家分享了js左右轮播图的具体代码,供大家参考,具体内容如下

html代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta keyword="左右轮播图-效果比较好">
 <title>Document</title>
 <link rel="stylesheet" type="text/css" href="css/css.css">
 <script type="text/javascript" src="js/animate.js"></script>
 <script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
 <div class="w-slider" id="js_slider">
 <div class="slider">
  <div class="slider-main" id="slider_main">
  <div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""></a></div>
  <div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""></a></div>
  <div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""></a></div>
  <div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""></a></div>
  <div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""></a></div>
  <div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""></a></div> 
  </div>
 </div>
 <div class="slider-ctrl" id="slider_ctrl">
  <span class="slider-ctrl-prev"></span>
  <!-- <span class="slider-ctrl-con current"></span>
  <span class="slider-ctrl-con"></span>
  <span class="slider-ctrl-con"></span>
  <span class="slider-ctrl-con"></span>
  <span class="slider-ctrl-con"></span>
  <span class="slider-ctrl-con"></span> -->
  <span class="slider-ctrl-next"></span>
 </div>
 </div>
 <script> 

 </script>
</body>
</html>

主要css代码:

.w-slider{
 width: 310px;
 height: 265px;
 background-color: pink;
 margin: 100px auto;
 position: relative;
 overflow: hidden;
}
.slider{
 width: 310px;
 height: 220px;
}
.slider-main{
 width: 620px; /* 两个图片的宽度 */
 height: 310px;
}
.slider-main img{
 vertical-align: top; /* 消除图片上下3px的间隙 */
}
.slider-main-img{
 position: absolute;
 top: 0;
 left: 0;
}
.slider-ctrl{
 text-align:center;
 padding-top: 8px;
}
.slider-ctrl-con{
 display: inline-block;
 width: 24px;
 height: 20px;
 background-color: blue;
 margin: 0 5px;
 background: url(../images/icon.png) no-repeat -24px -782px;
 cursor: pointer;
 text-indent: -20em; /* 为了将span的标号隐藏掉 */
 overflow: hidden;
}
.slider-ctrl .current{
 background-position: -24px -762px;
}
.slider-ctrl-prev,.slider-ctrl-next{
 position: absolute;
 top: 50%;
 margin-top: -35px;
 display: inline-block;
 width: 30px;
 height: 35px;
 background: url(../images/icon.png) no-repeat 6px top;
 opacity: 0.8;
 cursor: pointer;
}
.slider-ctrl-prev{
 left: 0;
}
.slider-ctrl-next{
 right: 0;
 background-position: -6px -44px;
}

主要js代码(slider.js):

window.onload = function(){
 function $(id){ return document.getElementById(id);}
 var js_slider = $("js_slider");
 var slider_main = $("slider_main"); //获取轮播图片的父盒子
 var imgs = slider_main.children; //得到图片组
 var slider_ctrl = $("slider_ctrl"); //获取控制的 父盒子

 //生成控制轮播的span
 for(var i = 0; i< imgs.length; i++){
 var span = document.createElement("span");
 span.className = "slider-ctrl-con";
 span.innerHTML = imgs.length - i;
 slider_ctrl.insertBefore(span,slider_ctrl.children[1]);
 }
 var spans = slider_ctrl.children;
 spans[1].setAttribute("class","slider-ctrl-con current"); //设置第一个span增加current样式

 //布局图片,第一张在正确位置,其余的在右边
 var scrollWidth = js_slider.clientWidth; //获取大盒子的宽度,也就是后面动画走的距离
 for(var i=1; i<imgs.length; i++){ //第一张图片在正确位置
 imgs[i].style.left = scrollWidth + "px"; //其余图片在310px的位置
 }

 //遍历三个按钮--左、右和下面的span
 var iNow = 0; //设置当前显示的图片的索引号
 for(var k in spans){ //k是索引号
 spans[k].onclick = function(){
  if(this.className == "slider-ctrl-prev"){

  //当前图片右移(从0 -> 310px)
  animate(imgs[iNow],{left: scrollWidth});
  iNow = --iNow < 0 ? imgs.length-1 : iNow;
  imgs[iNow].style.left = -scrollWidth + "px";//快速执行,即将显示的一页立马走到左边,然后显示
  animate(imgs[iNow],{left:0}); //下一张图片右移,从-310px->0
  setSquare();
  }else if(this.className == "slider-ctrl-next"){

  //当前图片左移(从0 -> -310px)
  animate(imgs[iNow],{left: -scrollWidth});
  iNow = (++iNow) % imgs.length;
  imgs[iNow].style.left = scrollWidth + "px";//快速执行,即将显示的一页立马走到右边,然后左移显示
  animate(imgs[iNow],{left:0}); //下一张图片左移,从310px->0
  setSquare();
  //或者精简为函数
  /*autoPlay();*/
  }else{
  /*alert("点击了下面的span");*/
  var clickIndex = this.innerHTML - 1;
  if(clickIndex > iNow){
   //做法等同于右侧按钮
   animate(imgs[iNow],{left: -scrollWidth});
   imgs[clickIndex].style.left = scrollWidth + "px";//快速执行,即将显示的一页立马走到右边,然后左移显示
  }else if(clickIndex < iNow){
   //做法等同于左侧
   animate(imgs[iNow],{left: scrollWidth});
   imgs[clickIndex].style.left = -scrollWidth + "px";//快速执行,即将显示的一页立马走到左边,然后显示
  }
  iNow = clickIndex;
  animate(imgs[iNow],{left:0}); 
  setSquare();
  }
 }
 }
 //控制span小方块的样式 函数
 function setSquare(){
 //下面的span样式清空,将iNow设置为current,注意是下面的span,不包含左右控制按钮
 for(var i=1; i<spans.length-1; i++){
  spans[i].className = "slider-ctrl-con";
 }
 spans[iNow+1].className = "slider-ctrl-con current"; //注意iNow是索引号,要加1
 }

 //设置定时器 ,和右侧按钮功能一致
 var timer =null;
 timer = setInterval(autoPlay,2000);
 function autoPlay(){
 animate(imgs[iNow],{left: -scrollWidth});
 iNow = (++iNow) % imgs.length;
 imgs[iNow].style.left = scrollWidth + "px";//快速执行,即将显示的一页立马走到右边,然后左移显示
 animate(imgs[iNow],{left:0}); //下一张图片左移,从310px->0
 setSquare();
 }

 //清除定时器
 js_slider.onmouseover = function(){
 clearInterval(timer);
 }
 //开启定时器
 js_slider.onmouseout = function(){
 clearInterval(timer); //要执行定时器,先清除定时器
 timer = setInterval(autoPlay,2000);
 }
}

缓动动画js代码:(animate.js

//返回当前样式
function getStyle(obj,attr){ //obj对象,attr属性名
 if(obj.currentStyle){ //ie等
 return obj.currentStyle[attr];
 }else{ //w3c
 return window.getComputedStyle(obj,null)[attr];
 }
}
 function animate(obj,json,fn) { // 给谁 json
 clearInterval(obj.timer);
 obj.timer = setInterval(function() {
  var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面
  for(var attr in json){ // attr 属性 json[attr] 值
  //开始遍历 json
  // 计算步长 用 target 位置 减去当前的位置 除以 10
  // console.log(attr);
  var current = 0;
  if(attr == "opacity")
  {
   current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; //用户没有定义opacity,则返回undefined
   console.log(current);
  }
  else
  {
   current = parseInt(getStyle(obj,attr)); // 数值,去除样式的 “px”
  }
  // console.log(current);
   // 目标位置就是 属性值
  var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10
  step = step > 0 ? Math.ceil(step) : Math.floor(step);
  //判断透明度
  if(attr == "opacity") // 判断用户有没有输入 opacity
  {
   if("opacity" in obj.style) // 判断 我们浏览器是否支持opacity
   {
    // obj.style.opacity,//支持opacity-----opacity:0.3
    obj.style.opacity = (current + step) /100; 
   }
   else
   { // obj.style.filter = alpha(opacity = 30)
    obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";

   }
  }
  else if(attr == "zIndex")
  {
   obj.style.zIndex = json[attr];
  }
  else
  {
   obj.style[attr] = current + step + "px" ;
  }

  if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
  {
   flag = false;
  }
  }
  if(flag) // 用于判断定时器的条件
  {
  clearInterval(obj.timer);
  //alert("ok了");
  if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调,就应该执行回调
  {
   fn(); // 函数名 + () 调用函数 执行函数 暂且这样替代
  }
  }
 },30)
 }

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

Javascript 相关文章推荐
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
JS前端笔试题分析
Dec 19 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 #Javascript
工厂模式在JS中的实践
Jan 18 #Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 #Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 #Javascript
动态加载css方法实现和深入解析
Jan 18 #Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 #Javascript
JS实现旋转木马式图片轮播效果
Jan 18 #Javascript
You might like
PHP HTML代码串截取代码
2008/12/29 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
dojo 之基础篇
2007/03/24 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
python实现汉诺塔方法汇总
2016/07/25 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
python 字典中取值的两种方法小结
2018/08/02 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
实习护理工作自我评价
2013/09/25 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
商场消防演习方案
2014/02/12 职场文书
微信营销策划方案
2014/02/24 职场文书
个人安全生产承诺书
2014/05/22 职场文书
2014年变电站工作总结
2014/12/19 职场文书
总经理致辞
2015/07/29 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python