JavaScript 实现轮播图特效的示例


Posted in Javascript onNovember 05, 2020

效果展示

1.页面截图

JavaScript 实现轮播图特效的示例

2.相关效果

JavaScript 实现轮播图特效的示例

html 页面

从微信读书上找了几张书籍封面来做轮播的图片。

index.html

<body>
 <div id="container">
  <div class="big_pic_div">
   <div class="prev"></div>
   <div class="next"></div>
   <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="mark_left"></a>
   <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="mark_right"></a>

   <div class="big_pic" style="z-index: 1;"><img src="img/1.jpg" alt=""></div>
   <div class="big_pic"><img src="img/2.jpg" alt=""></div>
   <div class="big_pic"><img src="img/3.jpg" alt=""></div>
   <div class="big_pic"><img src="img/4.jpg" alt=""></div>
   <div class="big_pic"><img src="img/5.jpg" alt=""></div>
   <div class="big_pic"><img src="img/6.jpg" alt=""></div>
  </div>

  <div class="small_pic_div">
   <div class="small_pic" style="filter: opacity(100); opacity: 1;"><img src="img/1.jpg" alt=""></div>
   <div class="small_pic"><img src="img/2.jpg" alt=""></div>
   <div class="small_pic"><img src="img/3.jpg" alt=""></div>
   <div class="small_pic"><img src="img/4.jpg" alt=""></div>
   <div class="small_pic"><img src="img/5.jpg" alt=""></div>
   <div class="small_pic"><img src="img/6.jpg" alt=""></div>
  </div>
 </div>
</body>

css 样式

grid 布局的 gap 不兼容 IE,惹不起。

style.css

body {
 margin: 0;
 padding: 0;
 background: skyblue;
}

#container {
 position: relative;
 overflow: hidden;
 width: 350px;
 height: 390px;
 margin: 50px auto 0;
 padding: 0 15px;
 background: goldenrod;
 box-shadow: 2px 1px 5px 1px #666;
}

.mark_left {
 position: absolute;
 left: 0;
 z-index: 3000;
 width: 65px;
 height: 360px;
}

.mark_right {
 position: absolute;
 right: 0;
 z-index: 3000;
 width: 65px;
 height: 360px;
}

.prev {
 position: absolute;
 top: 150px;
 left: 5px;
 z-index: 3001;
 width: 60px;
 height: 60px;
 background: url(img/btn.gif) olivedrab;
 /* transform: translateY(50%); */
 /* alpha 兼容IE8及以下的IE浏览器 */
 filter: alpha(opacity=0);
 opacity: 0;
}

.next {
 position: absolute;
 top: 120px;
 right: 5px;
 z-index: 3001;
 width: 60px;
 height: 60px;
 background: url(img/btn.gif) olivedrab;
 background-position-y: 60px;
 transform: translateY(50%);
 filter: alpha(opacity=0);
 opacity: 0;
}

.big_pic_div {
 position: relative;
 width: 250px;
 height: 360px;
 padding: 15px 0;
}

.big_pic {
 position: absolute;
 /* height 从 0 到 360px 下滑 */
 overflow: hidden;
 height: 360px;
 box-shadow: 1px 1px 2px #777;
}

.small_pic_div {
 display: grid;
 grid-template: repeat(6, 110px) / 80px;
 gap: 15px;
 position: absolute;
 top: 0;
 left: 273px;
 padding: 15px 0;
}

.small_pic {
 height: 110px;
 filter: alpha(opacity = 60);
 opacity: 0.6;
}

.small_pic img {
 width: 80px;
 height: 100%;
}

JavaScript 实现

多物体运动框架
move.js

// 获取样式
function getStyle(obj, name) {
 if (obj.currentStyle) {
  // IE...
  return obj.currentStyle[name];
 } else {
  // Chrome...
  return getComputedStyle(obj, false)[name];
 }
}

function startMove(obj, attr, target) {
 clearInterval(obj.timer);

 obj.timer = setInterval(function () {
  var cur = 0;
				
  	// 透明度
  if (attr == 'opacity') {
   cur = Math.round(parseFloat(getStyle(obj, 'opacity')) * 100);
  } else {
   cur = parseInt(getStyle(obj, attr));
  }

  	// 缓冲运动,速度和距离成正比
  var speed = 0;
  speed = (target - cur) / 6;
  	// 1px 是最小的,1.9px 会被当做 1px;得把速度取整,不然并未真正到达目标值 target
  speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

  if (cur == target) {
   clearInterval(obj.timer);
  } else {
   // 透明度没有单位,单独考虑
   if (attr == 'opacity') {
    obj.style.filter = 'alpha(opacity = ' + (cur + speed) + ')';
    obj.style.opacity = (cur + speed) / 100;
   } else {
    obj.style[attr] = cur + speed + 'px';
   }
  }
 }, 30);

}

轮播图功能实现

window.onload = function () {
 var markLeft = document.getElementsByClassName('mark_left')[0];
 var markRight = document.getElementsByClassName('mark_right')[0];
 var btnPrev = document.getElementsByClassName('prev')[0];
 var btnNext = document.getElementsByClassName('next')[0];
 var smallPicDiv = document.getElementsByClassName('small_pic_div')[0];
 var smallPic = document.getElementsByClassName('small_pic');
 var bigPic = document.getElementsByClassName('big_pic');
 var nowZIndex = 2;
 var now = 0;
 var container = document.getElementById('container');

 // 左右按钮透明度设置
 btnPrev.onmouseover = markLeft.onmouseover = function () {
  startMove(btnPrev, 'opacity', 100);
 };
 btnPrev.onmouseout = markLeft.onmouseout = function () {
  startMove(btnPrev, 'opacity', 0);
 };
 btnNext.onmouseover = markRight.onmouseover = function () {
  startMove(btnNext, 'opacity', 100);
 };
 btnNext.onmouseout = markRight.onmouseout = function () {
  startMove(btnNext, 'opacity', 0);
 };

 // 点击小图时,大图自动切换
 for (var i = 0; i < smallPic.length; i++) {

  smallPic[i].index = i;

  smallPic[i].onclick = function () {

   if (now == this.index) return;
   // 使用 now 来表示当前选择的小图,当前选中的小图再次点击时不会让大图下滑
   now = this.index;
   bigPic[this.index].style.zIndex = nowZIndex++;
   bigPic[this.index].style.height = 0;
   startMove(bigPic[this.index], 'height', 360);

   // 点击后其他小图变透明,当前选中的为不透明
   for (var i = 0; i < smallPic.length; i++) {
    startMove(smallPic[i], 'opacity', 60);
   }
   startMove(smallPic[this.index], 'opacity', 100);
  };

  // 鼠标移动到小图上时,淡入淡出
  smallPic[i].onmouseover = function () {
   startMove(this, 'opacity', 100);
  };
  smallPic[i].onmouseout = function () {
   if (now != this.index) {
    startMove(this, 'opacity', 60);
   }
  };

 }

 // tab 函数:当前选中图片不透明;图片下滑;小图区域的滚动
 function tab() {
  bigPic[now].style.zIndex = nowZIndex++;
  for (var i = 0; i < smallPic.length; i++) {
   startMove(smallPic[i], 'opacity', 60);
  }
  startMove(smallPic[now], 'opacity', 100);

  bigPic[now].style.height = 0;
  startMove(bigPic[now], 'height', 360);

  if (now == 0) {
   startMove(smallPicDiv, 'top', 0);
  } else if (now == smallPic.length - 1) {
   startMove(smallPicDiv, 'top', -(now - 2) * (smallPic[0].offsetHeight + 15));
  } else {
   startMove(smallPicDiv, 'top', -(now - 1) * (smallPic[0].offsetHeight + 15));
  }
 }

 // 左右按钮点击
 btnPrev.onclick = function () {
  now--;
  if (now == smallPic.length) {
   now = smallPic.length - 1;
  } else if (now < 0) {
   now = smallPic.length - 1;
   // return;
  }
  tab();
 };
 btnNext.onclick = function () {
  now++;
  if (now == smallPic.length) {
   now = 0;
  }
  tab();
 };
 var timer = setInterval(btnNext.onclick, 3000);
 container.onmouseover = function () {
  clearInterval(timer);
 };
 container.onmouseout = function () {
  timer = setInterval(btnNext.onclick, 3000);
 };
};

以上就是JavaScript 实现轮播图特效的详细内容,更多关于JavaScript 轮播图的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
用JS实现一个页面多个css样式实现
May 29 Javascript
js获取height和width的方法说明
Jan 06 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
canvas 实现中国象棋
Feb 17 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
详解React之key的使用和实践
Sep 29 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
小程序实现tab标签页
Nov 16 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 #Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 #Javascript
JavaScript TAB栏切换效果的示例
Nov 05 #Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 #Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 #Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 #Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 #Javascript
You might like
php addslashes和mysql_real_escape_string
2010/01/24 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
django模板语法学习之include示例详解
2017/12/17 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
python实现人民币大写转换
2018/06/20 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
护理专科学生自荐书
2014/07/05 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
党员民主评议个人总结
2014/10/20 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
个性发展自我评价2015
2015/03/09 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL