首页
所有分类
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 相关文章推荐
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
js调用刷新界面的几种方式
May 03 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
微信小程序实现打卡签到页面
Sep 21 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 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
RP2100(1) 低放电路(1) SHARP(1) ICF-SW7600(1) PL450(1) PL550(1) H-501(1) BCL3000(2) 乐信(1) GF515(1)
You might like
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
Python函数嵌套实例
2014/09/23 Python
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
django的ORM模型的实现原理
2019/03/04 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
Python logging设置和logger解析
2019/08/28 Python
浅谈python出错时traceback的解读
2020/07/15 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
丝芙兰波兰：Sephora.pl
2018/03/25 全球购物
幼教个人求职信范文
2013/12/02 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
文言文辞职信
2015/02/28 职场文书
陪护人员误工证明
2015/06/24 职场文书
六年级作文之预言作文
2019/10/25 职场文书