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 相关文章推荐
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
vuex进阶知识点巩固
May 20 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
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用数组返回无限分类的列表数据的代码
2010/08/08 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
python找出完数的方法
2018/11/12 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
Python----数据预处理代码实例
2019/03/20 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python增加图像对比度的方法
2019/07/12 Python
python实现飞行棋游戏
2020/02/05 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
德国网上超市:myTime.de
2019/08/26 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
回门宴父母答谢词
2014/01/26 职场文书
学生宿舍管理制度
2014/01/30 职场文书
课外访万家心得体会
2014/09/03 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
领导工作表现评语
2015/01/04 职场文书
付款证明模板
2015/06/19 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书