首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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)
 }

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

js实现炫酷的左右轮播图

- Author -

秋天1014童话

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
vue组件生命周期详解
Nov 07 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
webpack中的模式(mode)使用详解
Feb 20 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
越南购物网站(9) 秘鲁购物网站(1) 北美洲购物网站(1) 摩纳哥购物网站(1) 巴基斯坦购物网站(2) 匈牙利购物网站(11) 卡塔尔购物网站(3) 捷克购物网站(26) 菲律宾购物网站(13) 缅甸购物网站(1)
You might like
一个很方便的 XML 类！！原创的噢
2006/10/09 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
js select常用操作控制代码
2010/03/16 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
DOM 事件流详解
2015/01/20 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
在python里从协程返回一个值的示例
2019/02/19 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
python 实现波浪滤镜特效
2020/12/02 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
英国二手物品交易网站：Preloved
2017/10/06 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
普通话演讲稿
2014/09/03 职场文书
李白故里导游词
2015/02/12 职场文书
《确定位置》教学反思
2016/02/18 职场文书