0
0

JS实现轮播图的三种简单方法。

Js实现轮播图01

实现思路
这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下：
实现效果
在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>轮播图实现01</title>
  6.         <style type="text/css">
  7.             .lunbo{
  8.                 width: 900px;
  9.                 height: 400px;
  10.                 margin:100px auto;
  11.             }
  12.             .lunbo img{
  13.                 width: 100%;
  14.                 height:100%;
  15.             }
  16.         </style>
  17.     </head>
  18.     <body>
  19.         <!--轮播图模块 -->
  20.         <div class="lunbo">
  21.             <img id="lunbo_img" src="./pic/img3.jpeg" >
  22.         </div>
  23.         <!-- Js代码 -->
  24.     <script>
  25.       var index = 1;
  26.         function lunbo(){
  27.             index ++ ;
  28.             //判断index是否大于3
  29.             if(index > 3){
  30.                 index = 1;
  31.             }
  32.             //获取img对象
  33.             var img = document.getElementById("lunbo_img");
  34.             img.src = "./pic/img"+index+".jpeg";
  35.         }
  36.         //2.定义定时器
  37.         setInterval(lunbo,2000);
  38.         /*切记定时器里调用lunbo方法不能加(),setInterval(lunbo,2000);如果加()会执行lunbo（）方法，而导致定时器没用。
  39.     </script>
  40.     </body>
  41. </html>

Js实现轮播图02

实现思路
这可能是轮播图最简单点的实现之一，通过改变background的图片链接来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变background属性里面的url（）图片链接的名字来实现切换效果。代码如下：
实现效果
在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>轮播图实现02</title>
  6.         <style>
  7.             body{
  8.                 margin: 0;
  9.                 padding: 0;
  10.             }
  11.             .lunbo{
  12.                 width:100%;
  13.                 height:720px;
  14.                 background-image: url(pic/img1.jpeg);/*背景图片*/
  15.                 background-size:100% 100%; 
  16.             }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div class="lunbo">
  21.             
  22.         </div>
  23.         <script type="text/javascript">
  24.           var index = 1;
  25.             function lunbo(){
  26.                 index ++ ;
  27.                 //判断number是否大于3
  28.                 if(index > 3){
  29.                     index = 1;
  30.                 }
  31.                 //获取img对象
  32.         var img = document.getElementsByClassName("lunbo")[0];
  33.         img.style.background = "url(pic/img"+index+".jpeg)";
  34.         img.style.backgroundSize="100% 100%";    
  35.             }
  36.             //2.定义定时器
  37.             setInterval(lunbo,3000);
  38.         </script>
  39.     </body>
  40. </html>

Js实现轮播图03

本轮播图的实现，首先通过CSS代码将全部存放图片的li标签通过opacity属性设置为0来隐藏不显示， 通过js代码使用定时器不断调用类active突出显示li标签，同时隐藏兄弟li标签，再通过index++来实现切换循环显示的效果，当点击两边的按钮时，调用index++所在的方法实现切换的效果，没有复杂的算法，一点点基础一看代码就会学会，请大家参考。
实现效果
在这里插入图片描述
HTML代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1,
  6.         minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7.         <!--引入CSS代码-->
  8.         <link rel="stylesheet" type="text/css" href="./css/index.css"/>
  9.         <!--引入Js代码-->
  10.         <script src="./js/index.js"></script>
  11.         <title>Js实现轮播图</title>
  12.     </head>
  13.     <body>
  14.         <div class="lunbo">
  15.             <div class="content">
  16.             <ul id="item">
  17.                 <li class="item">
  18.                     <a href="#"><img src="img/pic1.jpg" ></a>
  19.                 </li>
  20.                 <li class="item">
  21.                     <a href="#"><img src="img/pic2.jpg" ></a>
  22.                 </li>
  23.                 <li class="item">
  24.                     <a href="#"><img src="img/pic3.jpg" ></a>
  25.                 </li>
  26.                 <li class="item">
  27.                     <a href="#"><img src="img/pic4.jpg" ></a>
  28.                 </li>
  29.                 <li class="item">
  30.                     <a href="#"><img src="img/pic5.jpg" ></a>
  31.                 </li>
  32.             </ul>
  33.             <div id="btn-left"><</div>
  34.             <div id="btn-right">></div>
  35.             <ul id="circle">
  36.                 
  37.                 <li class="circle"></li>
  38.                 <li class="circle"></li>
  39.                 <li class="circle"></li>
  40.                 <li class="circle"></li>
  41.                 <li class="circle"></li>
  42.             </ul>
  43.             </div>
  44.         </div>
  45.     </body>
  46. </html>

CSS代码

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. a{
  6.     list-style: none;
  7. }
  8. li{
  9.     list-style: none;
  10. }
  11. .lunbo{
  12.     width: 100%;
  13. }
  14. .content{
  15.     width: 800px;
  16.     height: 300px;
  17.     margin: 20px auto;
  18.     position: relative;
  19. }
  20. #item{
  21.     width: 100%;
  22.     height: 100%;
  23.     
  24. }
  25. .item{
  26.     position: absolute;
  27.     opacity: 0;
  28.     transition: all 1s;
  29.     
  30. }
  31. .item.active{
  32.     opacity:1;
  33. }
  34. img{
  35.     width: 100%;
  36. }
  37. #btn-left{
  38.     width: 30px;
  39.     height: 69px;
  40.     font-size: 30px;
  41.     color: white;
  42.     background-color:rgba(0,0,0,0.4);
  43.     line-height: 69px;
  44.     padding-left:5px;
  45.     z-index: 10;/*始终显示在图片的上层*/
  46.     position: absolute;
  47.     left: 0;
  48.     top: 50%;
  49.     transform: translateY(-60%);/*使按钮向上偏移居中对齐*/
  50.     cursor: pointer;
  51.     opacity: 0;/*平时隐藏*/
  52. }
  53. .lunbo:hover #btn-left{
  54.     /*鼠标滑入，显示图标*/
  55.     opacity: 1;
  56. }
  58. #btn-right{
  59.     width: 26px;
  60.     height: 69px;
  61.     font-size: 30px;
  62.     color: white;
  63.     background-color:rgba(0,0,0,0.4);
  64.     line-height: 69px;
  65.     padding-left: 5px;
  66.     z-index: 10;
  67.     position: absolute;
  68.     right: 0;
  69.     top: 50%;
  70.     cursor: pointer;
  71.     opacity: 0;
  72.     transform: translateY(-60%);
  73. }
  74. .lunbo:hover #btn-right{
  75.     opacity: 1;
  76. }
  77. #circle{
  78.     height: 20px;
  79.     display: flex;
  80.     position: absolute;
  81.     bottom: 35px;
  82.     right: 25px;
  83. }
  84. .circle{
  85.     width: 10px;
  86.     height: 10px;
  87.     border-radius: 10px;
  88.     border: 2px solid white;
  89.     background: rgba(0,0,0,0.4);
  90.     cursor: pointer;
  91.     margin: 5px;
  92. }
  93. .white{
  94.     background-color: #FFFFFF;
  95. }

JS代码

  1. window.onload=function(){
  2. var items=document.getElementsByClassName("item");
  3. var circles=document.getElementsByClassName("circle");
  4. var leftBtn=document.getElementById("btn-left");
  5. var rightBtn=document.getElementById("btn-right");
  6. var content=document.querySelector('.content');
  7. var index=0;
  8. var timer=null;
  10. //清除class
  11. var clearclass=function(){
  12.     for(let i=0;i<items.length;i++){
  13.         items[i].className="item";
  14.         circles[i].className="circle";
  15.         circles[i].setAttribute("num",i);
  16.     }
  17. }
  18. /*只显示一个class*/
  19. function move(){
  20.     clearclass();
  21.     items[index].className="item active";
  22.     circles[index].className="circle white";
  23. }
  24. //点击右边按钮切换下一张图片
  25. rightBtn.onclick=function(){
  26.     if(index<items.length-1){
  27.         index++;
  28.     }
  29.     else{
  30.         index=0;
  31.     }
  32.     move();
  33. }
  34. //点击左边按钮切换上一张图片
  35. leftBtn.onclick=function(){
  36.     if(index<items.length){
  37.         index--;
  38.     }
  39.     else{
  40.         index=items.length-1;
  41.     }
  42.     move();
  43. }
  44. //开始定时器，点击右边按钮，实现轮播
  45. timer=setInterval(function(){
  46.     rightBtn.onclick();
  47. },1500)
  48. //点击圆点时，跳转到对应图片
  49. for(var i=0;i<circles.length;i++){
  50.     circles[i].addEventListener("click",function(){
  51.         var point_index=this.getAttribute("num");
  52.         index=point_index;
  53.         move();
  54.     })
  56. }
  57. //鼠标移入清除定时器，并开启一个三秒的定时器，使慢慢转动
  58. content.onmouseover=function(){
  59.     clearInterval(timer);
  60.         timer=setInterval(function(){
  61.             rightBtn.onclick();
  62.         },3000)
  63. }
  64. //鼠标移出又开启定时器
  65. content.onmouseleave=function(){
  66.     clearInterval(timer);
  67.     timer=setInterval(function(){
  68.         rightBtn.onclick();
  69.     },1500)
  70. }
  71. }

代码可能写的不是很好，存在很多不足，欢迎大家指点批评，我会努力去改正，有疑问欢迎留言，我会尽力去解答，谢谢大家花宝贵的时间来阅读这篇文章。

标签： javascript 前端 css3
本文转载自: https://blog.csdn.net/m0_67392409/article/details/123423516
版权归原作者 m0_67392409 所有， 如有侵权，请联系我们删除。
登录后发布评论

“JS实现轮播图的三种简单方法。”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。