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 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
JavaScript实现随机点名小程序
Oct 29 Javascript
原生JS中应该禁止出现的写法
May 05 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的access操作类
2008/04/09 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
PHP 裁剪图片
2021/03/09 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
js数组操作学习总结
2013/11/04 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python进阶教程之循环对象
2014/08/30 Python
python映射列表实例分析
2015/01/26 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
python之pandas用法大全
2018/03/13 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
python 代码运行时间获取方式详解
2020/09/18 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
文科教师毕业的自我评价
2014/01/16 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
房产证明范本
2015/06/19 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
MySQL慢查询优化解决问题
2022/03/17 MySQL
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python