js实现轮播和滑动轮播

最新推荐文章于 2023-09-01 20:38:02 发布
最新推荐文章于 2023-09-01 20:38:02 发布
阅读量524 收藏 3
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44033309/article/details/106795063
版权

js的轮播图无论网页还是移动端都随处可见，本文用简单的方法来实现js的普通轮播图与滑动轮播图。（废话不多说，关键思路都写在代码注释处）
js普通轮播
简单描述一下js普通轮播的思路，用一个ul来存储需要轮播的图片，li使用绝对定位来保证图像成层叠关系。此时只需要改变图像的层叠关系就行，在这里程序的关键就是index变量，可以通过改变index来做到控制相应的图片的z-index。（具体思路步骤请参考代码的注释）

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简易轮播</title>
</head>
<style>
  .lb_page {
    margin: 200px auto;
    width: 400px;
    height: 250px;
    position: relative;
  }

  .lb_img {
    width: 100%;
    height: 100%;
    position: relative;
  }

  ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    width: 100%;
    height: 100%;
  }

  .lb_img li {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 1s;
  }

  .active {
    opacity: 1 !important;
  }

  .lb_dot {
    position: absolute;
    z-index: 3;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 20px;
  }

  .lb_dot>ul {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .lb_dot li {
    width: 20%;
    height: 100%;
    font-size: 36px;
    color: white;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
  }

  .lb_pre {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 4;
    transform: translate(0, -50%);
    background-color: black;
    opacity: 0.5;
    width: 30px;
    height: 30px;
    color: white;
    display: none;
    cursor: pointer;
  }

  .lb_next {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 4;
    transform: translate(0, -50%);
    background-color: black;
    opacity: 0.5;
    width: 30px;
    height: 30px;
    color: white;
    display: none;
    cursor: pointer;
  }

  .select {
    color: aqua !important;
  }
</style>

<body>
  <!-- 整个轮播容器 -->
  <div class="lb_page">
    <!-- 轮播图 -->
    <div class="lb_img">
      <ul>
        <li class="active"><img src="image/lbt1.jpg" alt="" style="width: 100%;height: 100%;"></li>
        <li><img src="image/lbt2.jpg" alt="" style="width: 100%;height: 100%;"></li>
        <li><img src="image/lbt3.jpg" alt="" style="width: 100%;height: 100%;"></li>
        <li><img src="image/lbt4.jpg" alt="" style="width: 100%;height: 100%;"></li>
        <li><img src="image/lbt5.jpg" alt="" style="width: 100%;height: 100%;"></li>
      </ul>
    </div>

    <!-- 轮播小圆点 -->
    <div class="lb_dot">
      <ul>
        <li class="select">·</li>
        <li>·</li>
        <li>·</li>
        <li>·</li>
        <li>·</li>
      </ul>
    </div>

    <!-- 左右按钮 -->
    <div class="lb_pre">per</div>
    <div class="lb_next">next</div>
  </div>
</body>
<script>
  var lbImg = document.getElementsByClassName("lb_img")[0];
  var lbPre = document.getElementsByClassName("lb_pre")[0];//上一个DOM
  var lbNext = document.getElementsByClassName("lb_next")[0];//下一个DOM
  var lbDots = document.getElementsByClassName("lb_dot")[0];//轮播索引点
  var lbDot = lbDots.getElementsByTagName('li');//每一个索引点
  var imgLi = lbImg.getElementsByTagName('li');//每一张
  let index = 0;//关键变量、通过操作index进行轮播、切换等操作


  // 鼠标移进让左右按钮显示(暂时有这种办法解决事件捕捉)
  lbDots.onmouseover = lbNext.onmouseover = lbPre.onmouseover = lbImg.onmouseover = function () {
    clearInterval(timer) //鼠标移入暂定轮播
    lbPre.style.display = 'block';
    lbNext.style.display = 'block';
  }
  lbDots.onmouseout = lbNext.onmouseout = lbPre.onmouseout = lbImg.onmouseout = function () {
    lbPre.style.display = 'none';
    lbNext.style.display = 'none';
    timer = setInterval(() => { //鼠标移出重新开始
      index++
      showImg()
    }, 2000);
  }

  function showImg() {
    //初始化
    for (let i = 0; i < imgLi.length; i++) {
      imgLi[i].className = '';
      lbDot[i].className = ''
    }
    if (index > 4) {
      index = 0
    }
    if (index < 0) {
      index = 4
    }
    imgLi[index].className = 'active';
    lbDot[index].className = 'select'
  }

  //自动轮播
  var timer = setInterval(() => {
    index++
    showImg();
  }, 2000);


  //前后点击事件
  lbNext.onclick = function () {
    index++
    showImg()
  }
  lbPre.onclick = function () {
    index--
    showImg()
  }

  //点击圆点切换
  for (let i = 0; i < lbDot.length; i++) {
    lbDot[i].onclick = function () {
      clearInterval(timer);
      index = i
      showImg()
    }
  }

</script>

</html>

演示图：

在这里插入图片描述
js滑动轮播
js的滑动轮播相对于普通轮播来说相对麻烦点，思路也不太一样，在这我简述一下滑动轮播的实现思路。首先滑动轮播的实现主要原理和js走马灯类似，通过改变left 来做到切换。首先在定位上，ul使用绝对定位以改变其left做到轮播，大概了解的伙伴知道，要想让图片转换的非常丝滑~就必须在原本图片的前后在复制最后一张图片和第一张的图片（不知道也没关系，一张图让你搞懂）

在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js滑动轮播</title>
</head>

<style>
  .lb_page {
    margin: 200px auto;
    width: 400px;
    height: 250px;
    position: relative;
  }

  .lb_img {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  ul {
    position: absolute;
    margin: 0px;
    padding: 0px;
    list-style: none;
    width: 2800px;
    height: 100%;
  }

  .lb_img li {
    float: left;
    width: 400px;
    height: 100%;
  }

  .lb_dot {
    position: absolute;
    z-index: 3;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 20px;
  }

  .lb_dot>ul {
    width: 100%;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .lb_dot li {
    width: 20%;
    height: 100%;
    font-size: 36px;
    color: white;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
  }

  .lb_pre {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 4;
    transform: translate(0, -50%);
    background-color: black;
    opacity: 0.5;
    width: 30px;
    height: 30px;
    color: white;
    display: none;
    cursor: pointer;
  }

  .lb_next {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 4;
    transform: translate(0, -50%);
    background-color: black;
    opacity: 0.5;
    width: 30px;
    height: 30px;
    color: white;
    display: none;
    cursor: pointer;
  }

  .select {
    color: aqua !important;
  }
</style>

<body>
  <!-- 整个轮播容器 -->
  <div class="lb_page">
    <!-- 轮播图 -->
    <div class="lb_img">
      <ul id="lbImg">
        <li><img src="image/lbt1.jpg" alt="" style="width: 100%;height: 100%;"></li>
        <li><img src="image/lbt2.jpg" alt="" style="width: 100%;height: 100%;"></li>
        <li><img src="image/lbt3.jpg" alt="" style="width: 100%;height: 100%;"></li>
        <li><img src="image/lbt4.jpg" alt="" style="width: 100%;height: 100%;"></li>
        <li><img src="image/lbt5.jpg" alt="" style="width: 100%;height: 100%;"></li>
      </ul>
    </div>

    <!-- 轮播小圆点 -->
    <div class="lb_dot">
      <ul>
        <li class="select">·</li>
        <li>·</li>
        <li>·</li>
        <li>·</li>
        <li>·</li>
      </ul>
    </div>

    <!-- 左右按钮 -->
    <div class="lb_pre">per</div>
    <div class="lb_next">next</div>
  </div>
</body>
<script>
  //得到一系列DOM
  var lbImg = document.getElementById("lbImg");
  var lbImgItem = lbImg.getElementsByTagName('li');
  var lbDots = document.getElementsByClassName("lb_dot")[0];
  var lbDot = lbDots.getElementsByTagName('li');
  var lbPre = document.getElementsByClassName("lb_pre")[0];
  var lbNext = document.getElementsByClassName("lb_next")[0];
  //复制最后一张图片到队首、第一张图片到队尾
  lbImg.appendChild(lbImgItem[0].cloneNode(true));
  lbImg.prepend(lbImgItem[4].cloneNode(true))
  lbImg.style.left = -400 + "px" //将第一张图片放入盒子中
  let index = 0 //关键变量，指向当前图片

  lbDots.onmouseover = lbNext.onmouseover = lbPre.onmouseover = lbImg.onmouseover = function () {
    clearInterval(timer) //鼠标移入暂定轮播
    lbPre.style.display = 'block';
    lbNext.style.display = 'block';
  }
  lbDots.onmouseout = lbNext.onmouseout = lbPre.onmouseout = lbImg.onmouseout = function () {
    lbPre.style.display = 'none';
    lbNext.style.display = 'none';
    timer = setInterval(() => { //鼠标移出重新开始
      index++
      show()
    }, 2000);
  }

  //核心函通过判断index的变化来做对应的操作
  function show() {
    for (let i = 0; i < lbDot.length; i++) {
      lbDot[i].className = ''
    }
    //类似index = 6时
    if (index < -1) {
      lbImg.style.transition = 'none';
      lbImg.style.left = -2000 + 'px';
      lbDot[4].className = 'select'
      index = 4;
      setTimeout(() => {
        index--;
        show()
      }, 0);
      return
    }
    //index = 6及index指向第一张图片
    else if (index > 5) {
      clearInterval(timer)
      lbImg.style.transition = 'none';//停止过渡的动画
      lbImg.style.left = -400 + 'px';//迅速切换到第一张图片
      lbDot[0].className = 'select'
      setTimeout(() => { //开个0延迟的计时器的目的是为了直接切换到第二张（解决第二次轮播时第一张图片换到第二张图片时，延迟加倍的bug）！！重点理解
        index++
        show()
      }, 0);

      timer = setInterval(() => { //重新开启循环计时器
        index++;
        show()
      }, 2000);
      index = 0;
      return;
    }
    //下面都是解决轮播序号的切换认真看下不难理解
    else if (index == 5) {
      lbDot[0].className = 'select'
    }
    else if (index == -1) {
      lbDot[4].className = 'select'
    }
    else {
      lbDot[index].className = 'select'
    }

    //关键步骤400为图片宽度 index为几个初始为-400px 因为前面复制了最后一张图片
    var widthLeft = -(index + 1) * 400;
    lbImg.style.left = widthLeft + "px";
    lbImg.style.transition = 'left 0.5s';//图片切换的动画
  }

  //前后点击事件
  lbNext.onclick = function () {
    clearInterval(timer)
    index++
    show()
  }
  lbPre.onclick = function () {
    clearInterval(timer)
    index--
    show()
  }

  //点击圆点切换
  for (let i = 0; i < lbDot.length; i++) {
    lbDot[i].onclick = function () {
      clearInterval(timer);
      index = i
      show()
    }
  }


  var timer = setInterval(() => {
    index++;
    show()
  }, 2000);

</script>

演示图：
在这里插入图片描述
两种轮播图暂时没有发现什么bug，如果你有什么问题或者建议欢迎留言。

啦啦啦啦嚓Fu
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
二种方法js实现轮播图自动切换
m0_48541096的博客
05-24 4180
先看效果图 第一种 //点击按钮，序号变化 showIdx++; if (showIdx == imgArr.length) { showIdx = 0; } //所有盒子左移动 for (let i = 0; i <items.length; i++) { items[i]..
js实现滑动轮播图
zhenzuo_x的博客
10-26 8505
最近做项目总是只会调用别人做好的各种插件效果，想起很久没来自己写点小插件，久了会忘记的，就赶紧来补一下，前端程序员必备，实现一个js轮播图。 html代码： &lt;!DOCTYPE HTML&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="stylesheet" type="text/css" href=&qu
原生js实现轮播图及无缝滚动
最新发布
m0_64642443的博客
09-01 2475
原生js实现轮播图及无缝滚动
js进阶（client，scroll，轮播图）
qq_53926719的博客
04-11 118
元素可视区client 元素滚动系列scroll scroll相比client，是实际内容大小，即包含超出边框的部分 案例：返回顶部按钮的多样化设置，在顶部时不显示，开始滑动则显示，滑到底部时，开始页面滑动。（这是一个实体大案例的一小部分，所以css样式不放出来，就是设置成返回顶部的普通样式，此处只摆关键js代码） // var line = document.querySelector('.picture'); // var height = line.offsetTop // 用以上方法可计算出到达
JS经典案例-无缝滚动轮播图（纯JS）
Allen-
11-05 4628
JS无缝滚动轮播图案例
三种js轮播实现方式详解（看一遍就会）
热门推荐
adminsir0的博客
08-29 1万+
js，轮播，轮播图，滚动，定位，滚动条，src，替换，定时器，
JS实现touch 点击滑动轮播实例代码
10-20
为了实现滑动轮播功能，我们需要编写JavaScript代码来处理触摸事件和内容切换。这部分代码没有给出，但通常会包含以下关键步骤： 1. **事件监听**：使用jQuery的`on()`方法监听触摸开始(`touchstart`)、触摸移动(`...
js实现从左向右滑动式轮播图效果
12-08
轮播图从效果来说有滑动式的也有渐入式的，滑动式的轮播图就是图片从左向右滑入的效果，渐入式的轮播图就是图片根据透明度渐渐显示的效果，这里说的是实现第一种效果的方法。 原理 相同大小的图片并成一列，但只...
js实现支持手机滑动切换的轮播图片效果实例
10-24
JavaScript 是实现这种效果的一种常用语言，而在这个实例中，我们将探讨如何使用 JavaScript 来实现一个支持手机滑动切换的轮播图片效果。 首先，要理解这个实例的核心原理，主要是通过监听用户的滑动手势，来控制...
js实现固定宽高滑动轮播图效果
10-20
本文主要分享了js实现PC固定宽高滑动轮播图效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
原生js滑动图片轮播切换效果代码
11-01
原生js滑动图片轮播切换效果代码
js实现自动轮播效果【两种方式】
qq_57218855的博客
09-02 4283
js图片动画效果
小程序轮播 滑动的时候另一个轮播图也跟着动
qq_41180335的博客
12-14 3324
好久没碰前端了，写个轮播都废了我这么大功夫。 最近闲着没事写一写小程序，有个要实现的功能是这样的： 如图，上面的色块是个轮播，下面的也是轮播。 滑动上面的轮播，下面的也跟着动，滑动下面的，上面也跟着动。 什么，你说哪个傻子会做这种功能？ 我啊。 其实做出来的效果还挺不错的，就看你往轮播里面放什么内容。 我做出来的效果是下面这样的： 当然你也可以自己体验一下效果： 还挺不错的吧，快夸夸我。 但是真的好久没写前端了呀，这点功能都让我写了好久。 还本来就菜。 话不多说，上点正菜吧。 思路及实现方式
js小练习--滑动式轮播图
qq_63533863的博客
03-28 1289
效果展示： html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
轮播图动画滑动动画效果
qq_44697681的博客
01-19 4265
轮播图的实现原理并不难，但是步骤有些繁琐。最近练习了一个轮播图，大部分是跟着网上的教程写的，然后自己做了一点兼容ie8的修改，加了点击切换图片的特效和手机端的滑动特效，让这个轮播图可以在响应式的网站中使用，同时兼容pc端和触屏端。 轮播图的样式也分很多种，淡入淡出的轮播图很容易实现，只需要把图片全都叠在一起，让相应的图片轮流显示就行了，但是滚动能的轮播图就要复杂很多。这里介绍的是滚动的轮播图： 原理： 实现的原理就是将所有的图片横向的排列起来，...
3D图片切换
NINE-NINE的博客
05-07 1565
分享3d效果的图片轮换；
js轮播图的切换案例
magualong的博客
10-25 178
js基础轮播图轮换
详解原生JS实现走马灯轮播图
Asen-coder的博客
05-08 3163
通栏轮播图重点：这里，尽量选择图片尺寸相同的图片，本文，我用4张不同尺寸的图片作demo演示给读者！ （尽量使用相同规模的图片）将图片设置为相同规模后，左浮动依次排开，设置css样式，此部分省略，代码如图 此部分过于简单，不展示由于轮播图移动时，最后一张图片点击右按钮后需要及时切换为第一张，所以这里，我们需要一个假的第一张图片，放置在最后，使最后一张图片为第一张图片的假图！ 在JS文件中，克隆第一张图片，并将其使用appendChild方法追加到最后！我们在js文件夹中创建carousel.js文件，并在h
如何用JS实现页面的全屏滚动
ychy1的博客
11-28 2657
如何用JS实现页面的全屏滚动
用vue实现轮播图滑动切换详细代码
06-01
可以使用vue-awesome-swiper插件来实现轮播图滑动切换效果。以下是具体的代码实现： 1. 安装vue-awesome-swiper插件 ```bash npm install vue-awesome-swiper --save ``` 2. 在需要使用轮播图的组件中引入Swiper...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值