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 相关文章推荐
node.js中的console.log方法使用说明
Dec 09 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
Three.js学习之几何形状
Aug 01 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
php提交post数组参数实例分析
2015/12/17 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
Python单例模式实例分析
2015/01/14 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
python实现神经网络感知器算法
2017/12/20 Python
python实现Floyd算法
2018/01/03 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
Python 类的特殊成员解析
2018/06/20 Python
python八皇后问题的解决方法
2018/09/27 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
Python识别验证码的实现示例
2020/09/30 Python
工程管理造价应届生求职信
2013/11/13 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
揭牌仪式主持词
2014/03/19 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
2015年植树节活动总结
2015/02/06 职场文书
九年级语文教学反思
2016/03/03 职场文书