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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
javascript Demo模态窗口
Dec 06 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
JS打印组合功能
Aug 04 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
在Vuex中Mutations修改状态操作
Jul 24 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代码把全角数字转为半角数字
2007/12/10 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
php中session使用示例
2014/03/29 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
Sanic框架应用部署方法详解
2018/07/18 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
分析经典Python开发工程师面试题
2019/04/08 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
如何运行带参数的python脚本
2019/11/15 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
2014优秀党员事迹材料
2014/08/14 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
nginx内存池源码解析
2021/11/20 Servers
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL