轮播图简单实现

Bertha 。 2021-10-24 05:26 613阅读 0赞

如何实现轮播图？

根据视频尚硅谷JavaScript视频整理得到。
思路：
在这里插入图片描述

ul是将所有图片平铺，不断改变ul的left属性，使得图片得以轮转
div可以设置属性：overflow:hidden 是超出div范围的图片隐藏

创建静态界面：

  1. <style>
  2.         *{
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.         #outer{
  7.             background-color: aquamarine;
  8.             height: 332px;
  9.             margin: 50px auto;
  10.             overflow: hidden;
  11.             position: relative;
  12.             width: 520px;
  13.             padding: 10px 0px;
  14.         }
  15.         #imgList{
  16.             /*width写死了不好*/
  17.             /*width: 2500px;*/
  18.             /*去除项目符号*/
  19.             list-style: none;
  20.             position: absolute;
  21.             left: -520px;
  22.             /*每向左移动530，到下面一张图*/
  23.         }
  24.         #imgList li{
  25.             float: left;
  26.             margin: 0 10px;
  27.         }
  28.         #navDiv{
  29.             position: absolute;
  30.             bottom: 5px;
  31.             /*left可以利用js设定*/
  32.             /*left=(outerWidth-navDivWidth)/2*/
  33.         }
  34.         #navDiv a{
  35.             float: left;
  36.             width: 10px;
  37.             height: 10px;
  38.             background-color: cadetblue;
  39.             margin-left:5px;
  40.             opacity: 0.7;
  41.             /*兼容IE8*/
  42.             filter: alpha(opacity=70);
  43.         }
  44.         #navDiv a:hover{
  45.             background-color: yellow;
  46.         }
  47.     </style>
  49. <body>
  50. <div>
  51.     <div id="outer">
  52.         <ul id="imgList">
  53.             <li>
  54.                 <img src="img/1.jpg">
  55.             </li>
  56.             <li>
  57.                 <img src="img/2.jpg">
  58.             </li>
  59.             <li>
  60.                 <img src="img/3.jpg">
  61.             </li>
  62.             <li>
  63.                 <img src="img/4.jpeg">
  64.             </li>
  65.         </ul>
  66.         <div id="navDiv">
  67.             <a href="javascript:;"></a>
  68.             <a href="javascript:;"></a>
  69.             <a href="javascript:;"></a>
  70.             <a href="javascript:;"></a>
  71.         </div>
  72.     </div>
  73. </div>
  74. </body>

静态界面创建成功界面如下：
在这里插入图片描述
这里注意imgList（ul）的长度和navDiv(超链接)的位置没有通过CSS静态设置，通过JS动态设置可以方便后续添加图片

  1. //设置ul宽度
  2.             var imgList = document.getElementById("imgList");
  3.             var imgArr = document.getElementsByTagName("img");
  4.             // 图片长度加上margin的长度
  5.             imgList.style.width = 530 * imgArr.length + "px";
  7.             //设置下面导航小点的位置
  8.             // 父级元素div的长度减去小点的长度
  9.             var outer = document.getElementById("outer");
  10.             var navDir = document.getElementById("navDiv");
  11.             navDir.style.left = (outer.offsetWidth - navDir.offsetWidth) / 2 + "px";
  13.             // 默认初始索引为0
  14.             var index = 0;
  15.             var allA = document.getElementsByTagName("a");
  16.             allA[index].style.backgroundColor = "yellow";

通过上面的代码，静态页面显示完毕，下面是添加JS代码使得图片轮播起来

  1. 点击导航栏（超链接）使得图片可以切换图片

    //点击不同的超链接，切换到不同的图片

    1.         for (var i = 0; i < allA.length; i++) {
    2.             //为每一个超链接添加num属性
    3.             allA[i].num = i;
    4.             allA[i].onclick = function () {
    5.                 index = this.num;
    6.                 //切换图片
    7.                 //第一张 0 0 第二张 1 -520
    8.                 //静态改变图片
    9.                  imgList.style.left = index * -520 +"px"
    10.                 //修改超链接
    11.                 setA();
    12.             }
    13.         }

这里是静态改变ul的left属性值，使得图片可以切换但是并未达到轮播效果。
下面是用超链接的颜色改变，写在setA()函数里面，在上面的代码中进行调用，实现点击不同的超链接，出现相应的图片并且颜色出现变化。

这里注意：allA[i].style.backgroundColor = “”设置为空串的原因是，js设置的样式为内联样式，会覆盖掉之前在CSS样式表里面设置的样式，使得hover失效，所以这里使用空串，在遍历后，颜色不发生变化，只是在index中设置变化后的样式，hover有效。。

  1. //创建方法使得点击的超链接变色其他的不变
  2.             function setA() {
  3.                 for (var i = 0; i < allA.length; i++) {
  4.                     // 将所有的遍历背景颜色设置为本色
  5.                     // 这样写会使得hover失效，内联样式会覆盖样式表的样式
  6.                     // allA[i].style.backgroundColor = "cadetblue";
  7.                     // 写成空串就不会覆盖
  8.                     allA[i].style.backgroundColor = ""
  9.                 }
  10.                 // 将选中的超链接变色
  11.                 allA[index].style.backgroundColor = "yellow";
  13.             }

  1. 添加计数器使得图片轮播，修改步骤一的函数，现在点击导航栏可以实现图片轮播
    这里要介绍视频之前写的一个很方便的元素移动的函数

    // 获取当前元素的位置

    1.         function getstyle(obj, name) {
    2.             if (window.getComputedStyle) {
    3.                 return getComputedStyle(obj, null)[name];
    4.             } else {
    5.                 return obj.currentScript[name];
    6.             }
    7.         }

    // 元素移动函数

    1.         //   obj:移动元素
    2.         //   target:移动范围目标位置
    3.         //   speed:移动速度（正负）
    4.         //   direction:移动方向
    5.         //   callback:回调函数，动画执行完毕后执行
    6.         function move(obj, target, speed, direction,callback) {
    7.             clearInterval(obj.timer);
    8.             var current = parseInt(getstyle(obj, direction));
    9.             if (current > target) {
    10.                 speed = -speed;
    11.             }
    12.             obj.timer = setInterval(function () {
    13.                 var oldValue = parseInt(getstyle(obj, direction));
    14.                 var newValue = oldValue + speed;
    15.                 if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
    16.                     newValue = target;
    17.                 }
    18.                 obj.style[direction] = newValue + "px";
    19.                 if (newValue == target) {
    20.                     clearInterval(obj.timer);
    21.                     callback();
    22.                 }
    23.             }, 30);
    24.         }

move()可以将代码全部复制过去，添加元素，目标位置，方向，速度，回调函数，在调用函数，即可实现。逻辑很简单：获取元素当前位置，在当前位置上进行相应的改变。其中的direction其实不完全是方向，可以设置为left，top，width，height都可以。

修改第二步的静态切换图片的方法
注释掉imgList.style.left = index * -520 +“px”，调用move函数，回调函数暂时空着，调用setA()函数改变导航栏（超链接）

  1. //静态改变图片
  2.                     // imgList.style.left = index * -520 +"px"
  3.                     //加上计时器
  4.                     move(imgList, -520 * index, 10, "left",function () {
  6.                     });
  7.                     //修改超链接
  8.                     // this.style.backgroundColor = "yellow";
  9.                     setA();

  1. 实现图片自动轮播
    index实现自增，开启计时器，调用move()函数实现图片自动轮播。
    但是现在仍存在问题：

    • 在轮播到最后一张的时候，index自动为0，图片向第一张迅速移动，在最后一张的时候图片轮播不连续。
    • 图片轮播的时候，超链接和图片不一致
    • 图片自动轮播的动画和点击超链接图片切换动画会出现冲突

    function auto() {

    1.             //开启计时器
    2.             setInterval(function () {
    3.                 //索引自增
    4.                 index++;
    5.                 //判断index的值不能超过最大值
    6.                 if (index == imgArr.length){
    7.                     index = 0;
    8.                 }
    9.                move(imgList,-520*index,10,"left",function () { 
    10.                 }
    11.             },3000)
    12.         }
    13.         auto()

  2. 解决图片轮播到最后一张向前跳跃问题
    解决办法一 ：在最后一张图片再添加第一张图片

    ………

    1.         <li><img src="img/4.jpeg"></li>
    2.         <li><img src="img/1.jpg"></li>

结果：换汤不换药 ，图片在切换第二张的时候还是不连贯
解决办法二：在auto（）函数添加if语句，在最后一张的时候，设置imgList.style.left=0;
结果：在倒数第一张向第一张切换的时候，没有出现动画，图片直接变化

将上面两种方法结合可以得到解决问题的办法
图解如下：
在这里插入图片描述
在最后一张的时候，由于后面仍有第一张，所以图片继续向后轮播，但是有imgList.style.left = 0;所以ul向前跳转，但是由于图片一样，造成连续切换的假象。这里可以将图片顺序改为最后一张图片接其他图片，就会发现中间的图片切换

  1. .........
  2.             <li><img src="img/4.jpeg"></li>
  3.             <li><img src="img/2.jpg"></li>

在setA()的函数中添加

  1. //判断索引是否为最后一张图片
  2.                 if (index >= imgArr.length -1){
  3.                     index = 0;
  4.                     //此时显示最后一张但是和第一张一样
  5.                     imgList.style.left = 0;
  6.                 }

此时可以完美解决最后一张图片跳跃问题

  1. 解决自动轮播图片和超链接不匹配问题
    这里就是在auto()函数中合理调用setA()的问题。由于auto()函数中实现图片轮播的函数是move()函数，如果在执行完move()函数结束后调用，会在最后一张图片跳转出现问题，无法播放我们放在最后一张图片后面的第一张图片，这样会造成问题4还是存在，并且此时回到第一张的时候index不等于0（注意此时由于加了一张图片imgArr会加一），回到第一张会向后轮播几张后再回到第二张；这时候我们需要用到move()的回调函数，这个实在动画轮播结束后迅速执行，每次转换到下一张时，导航随之变化，比较符合我们的问题，并且不会影响其他值的变化。（这里其实我也觉得很神奇，有点糊涂，讲道理放外面和放里面应该不会有什么区别啊？？？？还得 在研究研究）

    //修改导航点

    1.                 move(imgList,-520*index,10,"left",function () {
    2.                     setA();
    3.                 })     
    4.             },3000)

  2. 解决点击点击导航栏切换图片动画和图片自动轮播动画冲突问题
    点击事件优于自动轮播，所以让自动轮播的计时器等于一个变量，在触发超链接的点击事件，先关闭计时器，然后在移动到相应的图片后在调用auto函数，图片继续自动轮播。

    llA[i].onclick = function () {

    1.                 clearInterval(timer);
    2.                 index = this.num;
    3.                 //切换图片
    4.                 //第一张 0 0 第二张 1 -520
    5.                 //静态改变图片
    6.                 // imgList.style.left = index * -520 +"px"
    7.                 //加上计时器
    8.                 move(imgList, -520 * index, 10, "left",function () {
    9.                     //动画执行完毕执行自动切换动画
    10.                     auto();
    11.                 });

所有代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         #outer{
  12.             background-color: aquamarine;
  13.             height: 332px;
  14.             margin: 50px auto;
  15.             overflow: hidden;
  16.             position: relative;
  17.             width: 520px;
  18.             padding: 10px 0px;
  19.         }
  20.         #imgList{
  21.             /*width写死了不好*/
  22.             /*width: 2500px;*/
  23.             /*去除项目符号*/
  24.             list-style: none;
  25.             position: absolute;
  26.             /*每向左移动530，到下面一张图*/
  27.         }
  28.         #imgList li{
  29.             float: left;
  30.             margin: 0 10px;
  31.         }
  32.         #navDiv{
  33.             position: absolute;
  34.             bottom: 5px;
  35.             /*left可以利用js设定*/
  36.             /*left=(outerWidth-navDivWidth)/2*/
  37.         }
  38.         #navDiv a{
  39.             float: left;
  40.             width: 10px;
  41.             height: 10px;
  42.             background-color: cadetblue;
  43.             margin-left:5px;
  44.             opacity: 0.7;
  45.             /*兼容IE8*/
  46.             filter: alpha(opacity=70);
  47.         }
  48.         #navDiv a:hover{
  49.             background-color: yellow;
  50.         }
  51.     </style>
  52.     <script type="text/javascript">
  53.         window.onload = function () {
  55.             //设置ul宽度
  56.             var imgList = document.getElementById("imgList");
  57.             var imgArr = document.getElementsByTagName("img");
  58.             // 图片长度加上margin的长度
  59.             imgList.style.width = 530 * imgArr.length + "px";
  61.             //设置下面导航小点的位置
  62.             // 父级元素div的长度减去小点的长度
  63.             var outer = document.getElementById("outer");
  64.             var navDir = document.getElementById("navDiv");
  65.             navDir.style.left = (outer.offsetWidth - navDir.offsetWidth) / 2 + "px";
  67.             // 默认初始索引为0
  68.             var index = 0;
  69.             var allA = document.getElementsByTagName("a");
  70.             allA[index].style.backgroundColor = "yellow";
  72.             //点击不同的超链接，切换到不同的图片
  73.             for (var i = 0; i < allA.length; i++) {
  74.                 //为每一个超链接添加num属性
  75.                 allA[i].num = i;
  76.                 allA[i].onclick = function () {
  77.                     //关闭自动播放的计时器
  78.                     clearInterval(timer);
  79.                     index = this.num;
  80.                     //切换图片
  81.                     //第一张 0 0 第二张 1 -520
  82.                     //静态改变图片
  83.                     // imgList.style.left = index * -520 +"px"
  84.                     //加上计时器
  85.                     move(imgList, -520 * index, 10, "left",function () {
  86.                         //动画执行完毕执行自动切换动画
  87.                         auto();
  88.                     });
  89.                     //修改超链接
  90.                     // this.style.backgroundColor = "yellow";
  91.                     setA();
  92.                 }
  93.             }
  95.             //创建方法使得点击的超链接变色其他的不变
  96.             function setA() {
  97.                 //判断索引是否为最后一张图片
  98.                 if (index >= imgArr.length -1){
  99.                     index = 0;
  100.                     //此时显示最后一张但是和第一张一样
  101.                     imgList.style.left = 0;
  102.                 }
  103.                 for (var i = 0; i < allA.length; i++) {
  104.                     // 将所有的遍历背景颜色设置为本色
  106.                     // 这样写会使得hover失效，内联样式会覆盖样式表的样式
  107.                     // allA[i].style.backgroundColor = "cadetblue";
  108.                     // 写成空串就不会覆盖
  109.                     allA[i].style.backgroundColor = ""
  110.                 }
  111.                 // 将选中的超链接变色
  112.                 allA[index].style.backgroundColor = "yellow";
  114.             }
  116.             // 获取当前元素的位置
  117.             function getstyle(obj, name) {
  118.                 if (window.getComputedStyle) {
  119.                     return getComputedStyle(obj, null)[name];
  120.                 } else {
  121.                     return obj.currentScript[name];
  122.                 }
  123.             }
  124.             //图片自动切换
  125.             var timer;
  126.             function auto() {
  127.                 //开启计时器
  128.                 timer = setInterval(function () {
  129.                     //索引自增
  130.                     index++;
  131.                     //判断index的值不能超过最大值
  132.                     if (index == imgArr.length){
  133.                         index = 0;
  134.                     }
  135.                     //修改导航点
  137.                     move(imgList,-520*index,10,"left",function () {
  138.                         setA();
  139.                     })
  141.                 },3000)
  142.             }
  143.             auto()
  144.             // 点击链接切换图片
  145.             //   obj:移动元素
  146.             //   target:移动范围目标位置
  147.             //   speed:移动速度（正负）
  148.             //   direction:移动方向
  149.             //   callback:回调函数，动画执行完毕后执行
  150.             function move(obj, target, speed, direction,callback) {
  151.                 clearInterval(obj.timer);
  152.                 var current = parseInt(getstyle(obj, direction));
  153.                 if (current > target) {
  154.                     speed = -speed;
  155.                 }
  156.                 obj.timer = setInterval(function () {
  157.                     var oldValue = parseInt(getstyle(obj, direction));
  158.                     var newValue = oldValue + speed;
  159.                     if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
  160.                         newValue = target;
  161.                     }
  162.                     obj.style[direction] = newValue + "px";
  163.                     if (newValue == target) {
  164.                         clearInterval(obj.timer);
  165.                         callback();
  166.                     }
  167.                 }, 30);
  168.             }
  169.         }
  172.     </script>
  173. </head>
  174. <body>
  175. <div>
  176.     <div id="outer">
  177.         <ul id="imgList">
  178.             <li>
  179.                 <img src="img/1.jpg">
  180.             </li>
  181.             <li>
  182.                 <img src="img/2.jpg">
  183.             </li>
  184.             <li>
  185.                 <img src="img/3.jpg">
  186.             </li>
  187.             <li>
  188.                 <img src="img/4.jpeg">
  189.             </li>
  190.             <li>
  191.                 <img src="img/1.jpg">
  192.             </li>
  193.         </ul>
  194.         <div id="navDiv">
  195.             <a href="javascript:;"></a>
  196.             <a href="javascript:;"></a>
  197.             <a href="javascript:;"></a>
  198.             <a href="javascript:;"></a>
  199.         </div>
  200.     </div>
  201. </div>
  202. </body>
  203. </html>

发表评论

表情：
评论列表 （有 0 条评论，613人围观）

还没有评论，来说两句吧...

相关阅读

    相关 简单的轮播图实现

    轮播图介绍 轮播图是在首页上展示信息的一种方式。为了让用户不用滚动屏幕就能看到更多内容，设计师们利用轮播图来最大化信息密度。轮播图有多种形状和大小，但本文中谈及的轮播...

    骑猪看日落骑猪看日落/ 0 赞/ 164 阅读

    相关 轮播图的简单实现

    看上网上的教程，然后自己做了一个简单的轮播图案例： 图片是从京东上轮播图扣下来的图片。（自己抠图的时候，记得改下代码中盒子的宽度和图片的宽度一致，以及鼠标放上去的时候targ

    梦里梦外;梦里梦外;/ 0 赞/ 46 阅读

    相关 简单轮播图的实现

    简单轮播图的实现 \简单轮播图的实现的思路 1. 所谓的简单轮播图就是指每一个数字按钮对应一张图片，并能够点击数字按钮实现图片的跳转。 2. 其实轮播图就是一个ul列表

    柔情只为你懂柔情只为你懂/ 0 赞/ 90 阅读

    相关 简单轮播图

    这篇文章侧重于js方面在轮播时的应用， 这里先交代一下大致的思路： 主要通过对style.left以及对定时器的使用来实现轮播效果 做一个简单的轮播图，我们要解决的主

    我就是我我就是我/ 0 赞/ 343 阅读

    相关 vue实现简单轮播图

    实现思路: 1. 将vue的框架封装在function中，在界面刷新时调用，将要轮播的图片存放在data中，还有下面的列表也分别保存在data中的一个数组中，然后每隔一

    比眉伴天荒比眉伴天荒/ 0 赞/ 463 阅读