devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

轮播图（含全部代码：html、css、javascript）_轮播图html代码

作者：凡人多烦事01 | 2024-06-01 01:45:50

赞

踩

轮播图html代码

代码

h1.html：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.  
  9.     <link rel="stylesheet" href="index.css">
  10.     <script src="animate.js"></script>
  11. </head>
  12. <body>
  13.     <div class="box">
  14.         <a href="javascript:;" class = 'left jiantou'>&lt;</a>
  15.         <a href="javascript:;" class = 'right jiantou'>&gt;</a>
  16.         <ul class = 'pic'>
  17.             <li>
  18.                 <a href="#"><img src="./images/1.png" alt=""></a>
  19.             </li>
  20.             <li>
  21.                 <a href="#"><img src="./images/2.png" alt=""></a>
  22.             </li>
  23.             <li>
  24.                 <a href="#"><img src="./images/3.png" alt=""></a>
  25.             </li>
  26.             <li>
  27.                 <a href="#"><img src="./images/4.png" alt=""></a>
  28.             </li>
  29.              <li>
  30.                 <a href="#"><img src="./images/5.png" alt=""></a>
  31.             </li>
  32.         </ul>
  33.         <ul class="lis">
  34.             <!-- <li class="selected"></li>
  35.             <li></li>
  36.             <li></li>
  37.             <li></li>
  38.             <li></li> -->
  39.         </ul>
  40.     </div>
  41.     <script src="index.js"></script>
  42. </body>
  43. </html>

index.css：

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. li{
  6.     list-style: none;
  7. }
  8. .box{
  9.     position: relative;
  10.     overflow: hidden;
  11.     margin: 100px auto;
  12.     width: 520px;
  13.     height: 280px;
  14.     background-color: red;
  15. }
  16. .jiantou{
  17.     font-size: 24px;
  18.     text-decoration: none;
  19.     display: block;
  20.     text-align: center;
  21.     width: 20px;
  22.     height: 30px;
  23.     line-height: 30px;
  24.     background: rgba(158, 154, 154, 0.7);
  25.     color: white;
  26.     z-index: 999;
  27. }
  28. .left{
  29.     position: absolute;
  30.     top: 125px;
  31.     left: 0px;
  32.     border-top-right-radius: 15px;
  33.     border-bottom-right-radius: 15px;
  34. }
  35. .right{
  36.     position: absolute;
  37.     top:125px;
  38.     left: 500px;
  39.     border-top-left-radius: 15px;
  40.     border-bottom-left-radius: 15px;
  41. }
  42. img{
  43.     width: 520px;
  44.     height: 280px;
  45. }
  46. .box .pic{
  47.     width: 600%;
  48. }
  49. .pic{
  50.     position: absolute;
  51. }
  52. .pic li {
  53.     float: left;
  54. }
  55. .lis{
  56.    position: absolute;
  57.    bottom: 15px;
  58.    left: 50%;
  59.    margin-left: -35px;
  60.    width: 70px;
  61.    height:13px;
  62.    border-radius: 7px; 
  63.    background: rgba(158, 154, 154, 0.7);
  64. }
  65. .lis li {
  66.     float: left;
  67.     width: 8px;
  68.     height: 8px;
  69.     margin: 3px;
  70.     border-radius: 50%;
  71.     background-color: #fff;
  72.    
  73. }
  74. .lis .selected{
  75.     background-color: cyan;
  76. }

index.js：

  1. var pic = document.querySelector('.pic');
  2. var lis = document.querySelector('.lis');
  3. var leftarrowhead = document.querySelector('.left');
  4. var rightarrowhead = document.querySelector('.right');
  5. var box = document.querySelector('.box');
  6.  
  7. var index = 0;
  8.  
  9.  
  10. //形成小圆圈li
  11. //注意此模块要放上面从而事先形成li
  12. for (var i = 0; i < pic.children.length; i++) {
  13.     var li = document.createElement('li');
  14.     lis.appendChild(li);
  15.  
  16.     //顺便设置li的索引
  17.     li.setAttribute('index', i);
  18. }
  19. lis.children[0].className = 'selected';
  20.  
  21.  
  22.  
  23.  
  24. var pictureWidth = box.offsetWidth;   //获取图片宽度
  25. //排他思想，设置li的点击效果
  26. for (var j = 0; j < lis.children.length; j++) {
  27.     lis.children[j].onclick = function () {
  28.         for (var i = 0; i < lis.children.length; i++) {
  29.             lis.children[i].className = '';
  30.         }
  31.         index = this.getAttribute('index'); 
  32.         this.className = 'selected';
  33.         animate(pic, -index * pictureWidth);
  34.     }
  35. }
  36.  
  37.  
  38.  
  39. var flag = true;
  40.  
  41. //克隆第一张图片放最后
  42. var first = pic.children[0].cloneNode(true);
  43. pic.appendChild(first);
  44.  
  45.  
  46.  
  47. //设置箭头的移动
  48. //左箭头
  49. leftarrowhead.addEventListener('click', function () {
  50.     if (flag) {
  51.         flag = false;
  52.  
  53.         //当移动到最左边时，立即跳到最后一张图片
  54.         if (index == 0) {
  55.             pic.style.left = -lis.children.length * pictureWidth + 'px';
  56.             index = 5;
  57.         }
  58.         index--;
  59.         //节流阀，当动画运行完毕，再释放flag，从而可放开下一次点击箭头效果
  60.         animate(pic, -index * pictureWidth, function () {
  61.             flag = true;
  62.         });
  63.  
  64.         for (var i = 0; i < lis.children.length; i++) {
  65.             lis.children[i].className = '';
  66.         }
  67.         lis.children[index].className = 'selected';
  68.     }
  69. })
  70.  
  71.  
  72. //右箭头
  73. rightarrowhead.addEventListener('click', function () {
  74.     if (flag) {
  75.         flag = false;
  76.  
  77.         if (index == lis.children.length) {
  78.             pic.style.left = 0;
  79.             index = 0;
  80.         }
  81.         index++;
  82.         animate(pic, -index * pictureWidth, function () {
  83.             flag = true;
  84.         });
  85.  
  86.         for (var i = 0; i < lis.children.length; i++) {
  87.             lis.children[i].className = '';
  88.         }
  89.         if (index == lis.children.length) {
  90.             lis.children[0].className = 'selected';
  91.         }
  92.         else {
  93.             lis.children[index].className = 'selected';
  94.         }
  95.     }
  96.  
  97. })
  98.  
  99.  
  100.  
  101.  
  102. //设置自动轮播（相当于点右箭头），时间间隔2秒
  103. var timer = setInterval(function () {
  104.     rightarrowhead.click();
  105. }, 2000);
  106.  
  107.  
  108.  
  109.  
  110. var left = document.querySelector('.left');
  111. var right = document.querySelector('.right');
  112.  
  113. //设置箭头是否显示
  114. box.addEventListener('mouseenter', function () {
  115.     left.style.display = 'block';
  116.     right.style.display = 'block';
  117.     clearInterval(timer);
  118. })
  119.  
  120. box.addEventListener('mouseleave', function () {
  121.     left.style.display = 'none';
  122.     right.style.display = 'none';
  123.     timer = setInterval(function () {
  124.         rightarrowhead.click();
  125.     }, 2000);
  126. })

animate.js：

  1. function animate(obj, target, callback) {
  2.     // console.log(callback);  callback = function() {}  调用的时候 callback()
  3.  
  4.     // 先清除以前的定时器，只保留当前的一个定时器执行
  5.     clearInterval(obj.timer);
  6.     obj.timer = setInterval(function() {
  7.         // 步长值写到定时器的里面
  8.         // 把我们步长值改为整数 不要出现小数的问题
  9.         // var step = Math.ceil((target - obj.offsetLeft) / 10);
  10.         var step = (target - obj.offsetLeft) / 10;
  11.         step = step > 0 ? Math.ceil(step) : Math.floor(step);
  12.         if (obj.offsetLeft == target) {
  13.             // 停止动画 本质是停止定时器
  14.             clearInterval(obj.timer);
  15.             // 回调函数写到定时器结束里面
  16.             // if (callback) {
  17.             //     // 调用函数
  18.             //     callback();
  19.             // }
  20.             callback && callback();
  21.         }
  22.         // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
  23.         obj.style.left = obj.offsetLeft + step + 'px';
  24.  
  25.     }, 15);
  26. }

 效果

文件存放格式：

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/655383
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号