中国红客联盟国际站联盟介绍联盟架构联盟章程发展历程联盟邮箱积分VIP捐助联盟收藏本站
请登录
立即注册
门户首页
交流社区BBS
技术圈子Group
关于我们
红客大事记
插件Plugin
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程脚本交流 › js实现轮播图自动切换

[前端] js实现轮播图自动切换

2003 0
Honkers 2022-10-21 15:41:18 | 显示全部楼层 |阅读模式
本文实例为大家分享了js实现轮播图自动切换的具体代码，供大家参考，具体内容如下
先看效果图


第一种
  1. //点击按钮，序号变化
  2. showIdx++;
  3. if (showIdx == imgArr.length) {
  4.         showIdx = 0;
  5. }
  7. //所有盒子左移动
  8. for (let i = 0; i <items.length; i++) {
  9.    items[i].style.left = parseFloat(items[i].style.left) - loopbox.offsetWidth + "px";
  11. }
  12. //冗余容器从页面中删除
  14. //当冗余容器从页面中移除后，为了保证结构想对应，所以呀item中数组也要把这个容器删除
  15. let deleteBox = items.shift();
  16. // console.log(items);
  17. deleteBox.remove();
  18. //在用户看不到的内存中，变更【被从这个页面删除的元素的位置
  19. deleteBox.style.left = "900px";
  20. wrapper.appendChild(deleteBox);
  21. items.push(deleteBox);
  22. //把容器从小添加至压面后，容器加载的图片在当前的下一站
  23. // 第七步 把容器重新添加至页面后，容器加载的图片要是当前这张的下一张
  24. if (showIdx == imgArr.length - 1) {
  25. deleteBox.innerHTML = `<img src=${imgArr[0]}>`;
  26. } else {
  27.    deleteBox.innerHTML = `<img src=${imgArr[showIdx + 1]}>`;
  28. }
复制代码


第二种，图片切换，css代码
  1. html,
  2. body,
  3. ul,
  4. li {
  5.   margin: 0;
  6.   padding: 0;
  7. }
  9. a {
  10.   text-decoration: none;
  11. }
  13. .loopbox {
  14.   width: 1226px;
  15.   height: 460px;
  16.   background: #030;
  17.   position: relative;
  18.   overflow: hidden;
  19. }
  21. .box {
  22.   width: 100%;
  23.   height: 100%;
  24.   float: left;
  25.   transition: all .3s;
  26.   position: absolute;
  27.   left: 0;
  28.   /* overflow: hiddn; */
  29. }
  30. .box.notran{
  31.   transition: none;
  32. }
  34. .box-item {
  35.   /* width: 100%; */
  36.   width: 1226px;
  37.   height: 100%;
  38.   float: left;
  39.   background: #f1f1f1;
  40.   text-align: center;
  41.   font-size: 24px;
  42.   line-height: 100px;
  43.   /* display: none; */
  44.   /* transition: all .3s; */
  45. }
  47. .box-item img {
  48.   width: 100%;
  49.   height: 100%;
  50.   /* 图片适应 */
  51.   object-fit: cover;
  52. }
  54. .arrow {
  55.   width: 60px;
  56.   line-height: 30px;
  57.   background: #f00;
  58.   text-align: center;
  59.   color: #f1f1f1;
  60.   position: absolute;
  61.   top: 50%;
  62.   left: 10px;
  63.   margin-top: -15px;
  64.   border-radius: 15px;
  65. }
  67. .arrow:hover {
  68.   background: #f60;
  69. }
  71. .arrow.arrow-right {
  72.   left: auto;
  73.   right: 10px;
  74. }
  76. .page {
  77.   position: absolute;
  78.   width: 100%;
  79.   text-align: center;
  80.   bottom: 10px;
  81. }
  83. .page li {
  84.   display: inline-block;
  85.   width: 80px;
  86.   height: 8px;
  87.   border-radius: 4px;
  88.   background: #000;
  89. }
  90. /* .page li:first-child {
  91.   background: #f90;
  92. } */
  94. .page li:hover {
  95.   background: #f60;
  96. }
  98. .page li.current {
  99.   background: #f90;
  100. }
  102. .side-qq {
  103.   width: 100px;
  104.   height: 100px;
  105.   background: #f00;
  106.   /* position: fixed; */
  107.   position: absolute;
  108.   right: 10px;
  109.   top: 450px;
  110. }
  112. .navbar {
  113.   width: 100%;
  114.   background: #ccc;
  115.   text-align: center;
  116. }
  118. .navbar.fixed {
  119.   position: fixed;
  120.   left: 0;
  121.   top: 0;
  122. }
  124. .nav {
  125.   height: 21px;
  126. }
复制代码
js
  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.   <link rel="stylesheet" href="./css/index.css">
  9. </head>
  10. <body>
  11. <!-- 1.分析页面结构 -->
  12. <div class="loopbox">
  13.   <div id="box" class="box">
  14.     <div class="box-item curr"><img src="images/1.webp"></div>
  15.     <div class="box-item"><img src="images/2.webp"></div>
  16.     <div class="box-item"><img src="images/3.webp"></div>
  17.     <div class="box-item"><img src="images/4.webp"></div>
  18.   </div>
  19.   <a class="arrow arrow-left" href="javascript:;">左</a>
  20.   <a class="arrow arrow-right" href="javascript:;">右</a>
  21.   <ul id="page" class="page">
  22.     <li class="current"></li>
  23.     <li></li>
  24.     <li></li>
  25.     <li></li>
  26.   </ul>
  27. </div>
  28. <script>
  29. // 1.5.初始化页面，保证所有的图片先拍成一排
  30. let items = document.querySelectorAll(".box-item");
  31. let lis = document.querySelectorAll(".page li");
  32. let leftBtn=document.querySelector(".arrow-left")
  33.     let box = document.querySelector(".box");
  34.     let loopbox = document.querySelector(".loopbox");
  35.     box.style.width = items.length * loopbox.offsetWidth + "px";
  36.     box.style.left = 0+"px";
  37.     // 2.分析功能入口
  38.     let rightBtn = document.querySelector(".arrow-right");
  40.     let showIdx = 0;
  41.     rightBtn.onclick = function (){
  42.       items[showIdx].classList.remove("curr");
  43.       lis[showIdx].classList.remove("current");
  44.       showIdx ++;
  45.       if(showIdx == 4){
  46.         showIdx = 0;
  47.       }
  48.       items[showIdx].classList.add("curr");
  49.       lis[showIdx].classList.add("current");
  50.       box.style.left = (-1) * showIdx * loopbox.offsetWidth + "px";
  51.       for(let i=0;i<lis.length;i++){
  53.         lis[i].onclick =function(){
  55.         items[showIdx].classList.remove("curr");
  56.         lis[showIdx].classList.remove("current");
  57.         showIdx=i;
  58.         items[showIdx].classList.add("curr");
  59.         lis[showIdx].classList.add("current");
  60.         }
  61.       }
  62.       leftBtn.onclick = function(){
  63.     //第一张 消失（取消类名）
  64.      items[showIdx].classList.remove("curr");
  65.      lis[showIdx].classList.remove("current");
  66.      showIdx --;
  67.      //预知判断
  68.      if(showIdx == -1){
  69.        //点击之后,点击之前意味着已经在加，需要归零
  70.        showIdx = 3;
  71.      }
  72.      items[showIdx].classList.add("curr");
  73.      lis[showIdx].classList.add("current");
  74.      box.style.left = (-1) * showIdx * loopbox.offsetWidth + "px";
  75.     // 第二张 出现（添加类名）showIdx+1
  76.     };
  77.     for(let j=0;j<lis.length;j++){
  78.       lis[j].onclick = function(){
  79.         items[showIdx].classList.remove("curr");
  80.         lis[showIdx].classList.remove("current");
  81.         //选好变为点击序号对应结构
  82.         showIdx=j;
  83.         items[showIdx].classList.add("curr");
  84.         lis[showIdx].classList.add("current");
  85.       }
  87.       }
  89.     }
  90.     function time(){
  91.   items[showIdx].classList.remove("curr");
  92.       lis[showIdx].classList.remove("current");
  93.       showIdx ++;
  94.       if(showIdx == 4){
  95.         showIdx = 0;
  96.       }
  97.       items[showIdx].classList.add("curr");
  98.       lis[showIdx].classList.add("current");
  99.       box.style.left = (-1) * showIdx * loopbox.offsetWidth + "px";
  101.       }
  102.       for(let i=0;i<lis.length;i++){
  104.       lis[i].onclick =function(){
  106.     items[showIdx].classList.remove("curr");
  107.     lis[showIdx].classList.remove("current");
  108.     showIdx=i;
  109.     items[showIdx].classList.add("curr");
  110.     lis[showIdx].classList.add("current");
  111. }
  112.     }
  113.   setInterval(time,3000)
  115. </script>
  116. </body>
  117. </html>
复制代码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Honkers

荣誉红客

关注
  • 4010
    主题
  • 36
    粉丝
  • 0
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天