首页
所有分类
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 相关文章推荐
JQuery 入门实例1
Jun 25 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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
IDEA(2) Fragment(1) 多维数组(1) EventBus(1) Spring-Retry(1) ICF-5900W(2) Sqlite(2) 多线程(6) Spring Boot(5) OpenLayer(1)
You might like
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
js 点击按钮弹出另一页，选择值后，返回到当前页
2010/05/26 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
vue2.0实战之使用vue-cli搭建项目（2）
2017/03/27 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
python中的yield使用方法
2014/02/11 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
Python如何读取文件中图片格式
2020/01/13 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
be2台湾单身男女交友：全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
即兴演讲稿
2014/01/04 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
关于元旦的广播稿
2014/02/16 职场文书
党员岗位承诺书
2014/03/25 职场文书
司机岗位职责说明书
2014/07/29 职场文书
营销学习心得体会
2014/09/12 职场文书