JS实现炫酷轮播图

本文实例为大家分享了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" rel="external nofollow" >
</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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript实现点击按钮切换轮播图功能

    本文实例为大家分享了js实现点击按钮切换轮播图的具体代码,供大家参考,具体内容如下 菜单区域实现 划过主菜单显示子菜单 轮播区域实现 1.点击图片中左右箭头,分别跳转上一张与下一张 (1)点击上一张图其实就是让一个变量进行递减,点击下一张图就是让变量递增:(控制索引最大最小值) 2.点击右下角小圆也可以进行图片的跳转 (1)通过索引让变量进行随意的修改 3.每间隔3s进行轮播图的自动切换,鼠标放在图片上清除自动切换 (1)定时器 4.鼠标放在主菜单上显示子菜单,离开子菜单消失. 放在子菜单上显示

  • JS实现小米轮播图

    原生JS仿小米轮播图(最新版易懂),供大家参考,具体内容如下 本次内容主要可实现的效果: 自动轮播 可点击上一张 下一张进行图片的切换 点击右下方小圆点进行图片切换 代码部分: H5: <div class="wrap"> <ul class="list"> <li class="item active"><img src="img/001.jpg" alt=""&

  • js代码编写无缝轮播图

    本文实例为大家分享了js编写无缝轮播图的具体代码,供大家参考,具体内容如下 前言 这个是一个轮播图 提示: 请让最后一个img和第一个img是一张图片相同 且 li数目为img数目-1: 一.无缝轮播图 让第一张和最后一张相同 type:第一张和最后一张相同: 在最后一张向下一张切换时,立刻跳到第一张 然后向第二张正常切换 二.使用步骤 1.html代码 代码如下(示例): <div class="banner"> <div class="qh"&

  • js实现点击左右按钮轮播图片效果实例

    本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un

  • 原生js实现简单轮播图

    本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下 一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: 初始化: 包括外边距margin.内边距padding.链接a.图片img.输入框input.列表ul.li.网页html.body一系列初始化 css设置: 根据图片数与图片宽度设置轮播图宽度 二.设置js逻辑 需要完成的功能有: 1.鼠标移入轮播图逐渐出现左右浮动块 2.点击浮动块切换图片 3

  • js实现支持手机滑动切换的轮播图片效果实例

    js实现支持手机滑动切换的轮播图片效果实例

    本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

  • js实现轮播图的完整代码

    js实现轮播图的完整代码

    今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->

  • js轮播图之旋转木马效果

    本文实例为大家分享了js轮播图之旋转木马效果的具体代码,供大家参考,具体内容如下 思路:给定一个数组,储存每张图片的位置,旋转将位置进行替换 左旋转:将数组第一个数据删除,然后添加到数组的最后 右旋转:将数组最后一个数据删除,然后添加到数组的开头 先附上效果图,再来实现 接下来就是最主要的,封装原生js动画函数 //封装函数获取任意一个元素的任意属性的值(兼容ie8) function getStyle(element, attr) { return window.getComputedStyl

  • JavaScript实现轮播图效果

    要求: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮 点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理 图片播放的同时,下面小圆圈模块跟随一起变化 点击小圆圈,可以播放相应图片 鼠标不经过轮播图,轮播图也会自动播放图片 鼠标经过,轮播图模块,自动播放停止 代码实现: autoPlay.html(复制并保存为html文件,打开即可见效果): <!DOCTYPE html> <html lang="en"> <head> <meta

  • 原生js实现轮播图的示例代码

    原生js实现轮播图的示例代码

    很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea

随机推荐