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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
js实现随机点名
Jan 19 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
python实现代理服务功能实例
2013/11/15 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
python如何爬取网页中的文字
2020/07/28 Python
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
留学自荐信的技巧
2013/10/17 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
五好家庭事迹材料
2014/12/20 职场文书
2015年团支书工作总结
2015/04/03 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
Python办公自动化PPT批量转换操作
2021/09/15 Python
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript