网站首页> 前端开发> JavaScript> JS实现炫酷轮播图

JS实现炫酷轮播图

时间:2020-11-09 09:27:24 阅读:6853次 来源:互联网

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

效果图

<!DOCTYPE html>
<html>

<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" rel="external nofollow" >
</head>

<body>
  <div 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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文地址:https://www.manongw.com/article/208.html

文章来源:转载于CSDN,转载网址为https://blog.csdn.net/qq_41605893/article/details/109540568

版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 ezhongheng@126.com 举报,一经查实,本站将立刻删除。

相关文章
  • 本文主要介绍了JS pushlet XMLAdapter适配器用法案例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-16 18:00
  • 本文主要介绍了JSON stringify方法原理及实例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-24 10:11
  • 本文主要介绍了使用TS来编写express服务器的方法步骤的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-30 09:26
  • 本文主要介绍了详解JavaScript 高阶函数的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:47
  • 本文主要介绍了详解webpack的clean-webpack-plugin插件报错的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-16 18:06
  • 本文主要介绍了JavaScript setTimeout()基本用法有哪些的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-04 22:05
  • 本文主要介绍了原生JS实现弹幕效果的简单操作指南的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-10 16:04
  • 本文主要介绍了JS实现简单贪吃蛇小游戏的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-29 08:59
  • 本文主要介绍了JavaScript实现串行请求的示例代码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:25
  • 本文主要介绍了JavaScript 实现轮播图特效的示例的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 16:59