首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 实现轮播图特效的示例

- Author -

Gullrye

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
Vue项目中如何封装axios（统一管理http请求）
May 02 Vue.js
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
reduce(2) 分布式锁(3) 短信验证码(1) filter(1) harbor(1) GoFrame(3) SQLite3(1) pytz(1) Selenium(1) dockerfile(1)
You might like
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php编写简单的文章发布程序
2015/06/18 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
php短信接口代码
2016/05/13 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
Python WEB应用部署的实现方法
2019/01/02 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
CSS3与动画有关的属性transition、animation、transform对比（史上最全版）
2017/08/18 HTML / CSS
太阳镜仓库，售价20美元或更少：Sunglass Warehouse
2016/09/28 全球购物
Hunter Boots美国官方网站：赫特威灵顿雨靴
2018/06/16 全球购物
Europcar比利时：租车
2019/08/26 全球购物
Python文件操作的面试题
2013/06/22 面试题
架构师岗位职责
2013/11/18 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
法律顾问服务方案
2014/05/15 职场文书
毕业生找工作求职信
2014/08/05 职场文书
地道战观后感400字
2015/06/04 职场文书
运动会通讯稿100字
2015/07/20 职场文书
执行力心得体会范文
2016/01/11 职场文书