JS实现炫酷轮播图


Posted in Javascript onNovember 15, 2020

本文实例为大家分享了JS实现炫酷轮播图的具体代码,供大家参考,具体内容如下

效果图

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>面试必备轮播图</title>
 <link rel="stylesheet" href="demo.css" >
</head>

<body>
 <div class="wrapper" id="wrap">
  <img src="./images/1.png" alt="">
  <img src="./images/2.png" alt="">
  <img src="./images/3.png" alt="">
  <img src="./images/4.png" alt="">
  <img src="./images/5.png" alt="">
 </div>
 <script src="jquery.min.js"></script>
 <script src="index.js"></script>

</body>

</html>

JS代码

var oImg = $('img');
// 默认中间展示索引值为0的这张图片
var curDisplay = 0;
// 将图片分散排列

// 获得图片个数
var len = oImg.length;

// 定时器
var timer;

function init() {
 initalCarousel();
 bindEvent();
}
init();

function initalCarousel() {
 // 获得中间图片
 console.log($('img'))
 var hLen = Math.floor(oImg.length / 2);
 // rNum,lNum分别是分散在中间图片左右左右两侧的图片索引
 var rNum, lNum;
 for (var i = 0; i < hLen; i++) {
  lNum = curDisplay - i - 1;
  // console.log(lNum)
  // 分别让分散在左右两侧的图片平移旋转
  oImg.eq(lNum).css({
   transform: 'translateX(' + (-150 * (i + 1)) + 'px) translateZ(' + (200 - i * 100) + 'px) rotateY(30deg)'
  });
  rNum = curDisplay + i + 1;
  // 如果运动到最后一张 循环运动
  if (rNum > oImg.length - 1) {
   rNum -= oImg.length;
  }
  oImg.eq(rNum).css({
   transform: 'translateX(' + (150 * (i + 1)) + 'px) translateZ(' + (200 - i * 100) + 'px) rotateY(-30deg)'
  });
  oImg.removeClass('active');
 }

 // 当前显示图片直接z轴向前移动 同时添加class名作为标记
 
 oImg.eq(curDisplay).css({
  transform: 'translateZ(300px)'
 }).addClass('active');

}
// 点击事件
function bindEvent() {
 // 在每一张图片上绑定上点击事件
 oImg.on('click', function (e) {
  // 判断点击图片不是第一张显示图片 
  if (!$(this).hasClass('active')) {
   // 标记图片flag切换
   // 改变当前显示图片索引
   curDisplay = $(this).index();
   initalCarousel();
  }
  // 鼠标覆盖 清除自动轮播定时器
 }).hover(function () {
  clearInterval(timer);
  // 鼠标移走 继续轮播
 }, function () {
  play();
 });
}
// 自动播放
function play() {
 timer = setInterval(function () {
  if (curDisplay == len - 1) {
   curDisplay = 0;
  } else {
   curDisplay++;
  }
  initalCarousel();
 }, 2000);
}

CSS样式

*{
 margin:0;
 padding:0;
}
.wrapper{
 position: relative;
 transform-style: preserve-3d;
 perspective: 800px;
 /* border:1px solid black; */
 height:200px;
 margin-top:200px;
}
.wrapper img{
 position: absolute;
 left: 50%;
 top: 50%;
 width: 300px;
 height: 200px;
 margin-left: -150px;
 margin-top: -100px;
 border-radius: 8px;
 transition: transform 0.5s ease-in-out;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
JS实现购物车基本功能
Nov 08 #Javascript
Vue实现购物车基本功能
Nov 08 #Javascript
vue实现顶部菜单栏
Nov 08 #Javascript
Vue实现菜单切换功能
Nov 08 #Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 #Javascript
JS实现手风琴特效
Nov 08 #Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 #Javascript
You might like
php之字符串变相相减的代码
2007/03/19 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
python基础之入门必看操作
2017/07/26 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
python版大富翁源代码分享
2018/11/19 Python
python zip()函数使用方法解析
2019/10/31 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
个人简历自我评价
2014/02/02 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server