javaScript实现轮播图

做自己der摆渡人

于 2024-04-09 17:12:14 发布

阅读量389

点赞数 8

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_63667667/article/details/137558146

版权

实现思路一：

1定义一个数组，存放轮播图的相关内容

 let arr = [
    {url: './images/p1.jpg', title: '第一张图片', color: '#849974'},
    {url: './images/p2.jpg', title: '第二张图片', color: '#cc98bc'},
    {url: './images/p3.jpg', title: '第三张图片', color: '#c79780'},
    {url: './images/p4.jpg', title: '第四张图片', color: '#badfe8'},
    {url: './images/p5.jpg', title: '第五张图片', color: '#e3f2de'},
    {url: './images/p6.jpg', title: '第六张图片', color: '#cee393'},
    {url: './images/p7.jpg', title: '第七张图片', color: '#c9bad7'},
    {url: './images/p8.jpg', title: '第八张图片', color: '#f7b9ba'},
    {url: './images/p9.jpg', title: '第九张图片', color: '#c6e6d8'},
    {url: './images/p10.jpg', title: '第十张图片', color: '#dbcee9'}
];

2定义一个函数，用于实现切换图片和文字，以及底部的背景颜色的作用

  const next=document.querySelector('.next')
   //获取图片对象
   const img=document.querySelector('.swiper-wrapper img');
   // 获取文字对象
   const p=document.querySelector('.swiper-footer p')
   // 改变背景颜色
   const footer=document.querySelector('.swiper-footer')
   function fn(){
      img.scr=arr[i].url;
      p.innerHTML=arr[i].title;
      footer.style.backgroundColor=arr[i].color;
      document.querySelector('.slider-indicator .active').classList.remove('active');
      document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
   }

3.获取左右边按钮实现切换页面的功能

 next.addEventListener('click',function(){
      i++;
      i=i>=arr.length?0:i;
      fn();
   })
// 左边按钮
   //获取左边按钮对象
   const prev=document.querySelector('.prev')
   prev.addEventListener('click',function(){
      i--;
      i=i<0?arr.length-1:i;
      fn();
   })

4自动播放功能

 let num=setInterval(function(){
   next.click()
  },1000)

5鼠标经过时，清除定时器，鼠标离开时，恢复定时器

//鼠标经过停止
   //  获取元素
   const swiper=document.querySelector('.swiper')
   swiper.addEventListener('mouseenter',function(){
      clearInterval(num)
   })
//鼠标离开 
swiper.addEventListener('mouseleave',function(){
      clearInterval(num);
      num=setInterval(function(){
         next.click()
      },1000)
   })

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
         .swiper{
            width: 500px;
            height: 400px;
         }
         .swiper-wrapper{
            width: 100%;
            height: 320px;
         }
         .swiper-wrapper img{
            width: 100%;
            height:100%;
            display: block;
         }
         .swiper-footer{
             height: 80px;
             background-color:#849974 ;
             padding:12px 12px 0 12px;
             text-align: center;
             position: relative;
         }
         .swiper-footer .toggle{
            position: absolute;
            right: 0;
            top: 0;
            display: flex;
         }
         .swiper-footer .toggle button{
            margin-right: 12px;
            width: 28px;
            height: 28px;
            appearance: none;
            border: none;
            background: rgb(255, 255, 255,0.1);
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
         }
         .slider-footer .toggle button:hover {
             background: rgb(255, 255, 255, 0.2);
         }
         .slider-footer p{
            margin: 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
         }
         .slider-indicator{
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
         }
         .slider-indicator li{
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            opacity: 0.4;
            background: #fff;
            cursor: pointer;
         }
         .slider-indicator li.active{
            width: 10px;
            height: 10px;
            opacity: 1;
         }

      

    </style>
</head>
<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <img src="./images/p1.jpg" alt="">
        </div>
        <div class="swiper-footer">
           <p>第一张图片</p>
           <ul class="slider-indicator">
             <li class="active"></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
           </ul>
           <div class="toggle">
            <button class="prev">&lt</button>
            <button class="next">&gt</button>
           </div>
        </div>
    </div>
    <script>
       let arr = [
    {url: './images/p1.jpg', title: '第一张图片', color: '#849974'},
    {url: './images/p2.jpg', title: '第二张图片', color: '#cc98bc'},
    {url: './images/p3.jpg', title: '第三张图片', color: '#c79780'},
    {url: './images/p4.jpg', title: '第四张图片', color: '#badfe8'},
    {url: './images/p5.jpg', title: '第五张图片', color: '#e3f2de'},
    {url: './images/p6.jpg', title: '第六张图片', color: '#cee393'},
    {url: './images/p7.jpg', title: '第七张图片', color: '#c9bad7'},
    {url: './images/p8.jpg', title: '第八张图片', color: '#f7b9ba'},
    {url: './images/p9.jpg', title: '第九张图片', color: '#c6e6d8'},
    {url: './images/p10.jpg', title: '第十张图片', color: '#dbcee9'}
];
   // 序号
   let i=0;
//右侧按钮
   //  获取右侧按钮对象
   const next=document.querySelector('.next')
   //获取图片对象
   const img=document.querySelector('.swiper-wrapper img');
   // 获取文字对象
   const p=document.querySelector('.swiper-footer p')
   // 改变背景颜色
   const footer=document.querySelector('.swiper-footer')
   function fn(){
      img.scr=arr[i].url;
      p.innerHTML=arr[i].title;
      footer.style.backgroundColor=arr[i].color;
      document.querySelector('.slider-indicator .active').classList.remove('active');
      document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
   }
   //事件监听
   next.addEventListener('click',function(){
      i++;
      i=i>=arr.length?0:i;
      fn();
   })
// 左边按钮
   //获取左边按钮对象
   const prev=document.querySelector('.prev')
   prev.addEventListener('click',function(){
      i--;
      i=i<0?arr.length-1:i;
      fn();
   })
//自动播放
   let num=setInterval(function(){
   next.click()
  },1000)
//鼠标经过停止
   //  获取元素
   const swiper=document.querySelector('.swiper')
   swiper.addEventListener('mouseenter',function(){
      clearInterval(num)
   })
//鼠标离开 
swiper.addEventListener('mouseleave',function(){
      clearInterval(num);
      num=setInterval(function(){
         next.click()
      },1000)
   })
    </script>
</body>
</html>

实现思路二：

1.定义数组存放图片

let imgArr=['../images/1.webp','../images/2.webp','../images/3.webp','../images/4.webp',
'../images/5.webp','../images/6.webp','../images/7.webp','../images/8.webp']

2.获取放置图片的对象，并修改将数组的中的图片赋值给图片对象

const img=document.querySelector('.slide img')
let i=0
function cutImg() {
    img.src=imgArr[i]
}

3.设置定时器，实现循环播放功能

let timer=setInterval(function(){
    i++
    i=i>imgArr.length-1?0:i
    cutImg() 
},1000)

4.实现鼠标进入，停止定时器，鼠标离开，开启定时器

注意：开始之前要先清除定时器，再开启定时器

 const prev=document.querySelector('.prev')
const next=document.querySelector('.next')
 prev.addEventListener('click',function(){
    i--;
    i=i<0?imgArr.length-1:i
    cutImg();
     
 })
 next.addEventListener('click',function(){
    i++
    i=i>imgArr.length-1?0:i
    cutImg() 
 })

5.点击按钮设置，实习切换功能

const prev=document.querySelector('.prev')
const next=document.querySelector('.next')
 prev.addEventListener('click',function(){
    i--;
    i=i<0?imgArr.length-1:i
    cutImg();
     
 })
 next.addEventListener('click',function(){
    i++
    i=i>imgArr.length-1?0:i
    cutImg() 
 })

6.点击小圆点实现切换功能

function cutImg() {
    img.src=imgArr[i]
    document.querySelector('.active').classList.remove('active')
    document.querySelector(`.banner-btn li:nth-child(${i+1})`).classList.add('active')
} 
for(let count=0;count<lis.length;count++){
    lis[count].addEventListener('click',function( ) {
        i=count
        cutImg()
    })
}

完整代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
         .banner{
    width:1200px;
    height: 470px;
    padding-top: 10px;
   margin-bottom: 30px;
}
.banner-box{
     height: 470px;
}
.banner-slide{
    width: 790px;
    height: 470px;
    margin: 0 auto;
   
}
.slide{
    width: 590px;
    height: 470px; 
    background-color: #e9e7e7; 
    position: relative;
}
.prev,.next{
    width: 25px;
    height: 35px;
    line-height: 35px;
    color: white;
    background-color: transparent;
    border: 1px solid #DDD;
     position: absolute;
     top: 50%;
     margin-top: -20px;
     font-size: 20px;
     cursor: pointer;
}
.prev{
    border-radius: 0 17px 17px 0;
    left: 0;
}
.next{
    border-radius: 17px 0 0 17px ;
    right: 0;
}
.banner-btn{
    width: 113px;
    height: 15px;
    position: absolute;
    left:220px;
    bottom: 20px;
}
.banner-btn li{
    float: left;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .05);
    background-color: rgba(255, 255, 255, .4) ;
    
}
.banner-btn .active{
    position: relative;
    top: -1px;
    border: 3px solid rgba(0,0 ,0,.1);
    background-color: rgba(255, 255, 255,1);
}
      

    </style>
</head>
<body>
   <div class="banner">
        <div class="wrap banner-box">
            <div class="banner-slide">
              <div class="slide">
                <a href="javascript:;">
                    <img src="./images/1.webp" alt="">
                 </a>
                <button class="prev"><</button>
                <button class="next">></button>
              </div>
             <ul class="banner-btn">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
             </ul>
            </div>
        </div>
     </div>
    <script>
  let imgArr=['../images/1.webp','../images/2.webp','../images/3.webp','../images/4.webp',
'../images/5.webp','../images/6.webp','../images/7.webp','../images/8.webp']
const img=document.querySelector('.slide img')
const lis=document.querySelectorAll('.banner-btn li')
let i=0
function cutImg() {
    img.src=imgArr[i]
    document.querySelector('.active').classList.remove('active')
    document.querySelector(`.banner-btn li:nth-child(${i+1})`).classList.add('active')
}
let timer=setInterval(function(){
    i++
    i=i>imgArr.length-1?0:i
    cutImg() 
},1000)

const prev=document.querySelector('.prev')
const next=document.querySelector('.next')
 prev.addEventListener('click',function(){
    i--;
    i=i<0?imgArr.length-1:i
    cutImg();
     
 })
 next.addEventListener('click',function(){
    i++
    i=i>imgArr.length-1?0:i
    cutImg() 
 })
const slide=document.querySelector('.slide')
slide.addEventListener('mouseenter',function(){ 
    clearInterval(timer)
}
)
slide.addEventListener('mouseout',function(){ 
    clearInterval(timer)
    timer=setInterval(function(){
        i++
        i=i>imgArr.length-1?0:i
        cutImg() 
    },1000)
}
)

for(let count=0;count<lis.length;count++){
    lis[count].addEventListener('click',function( ) {
        i=count
        cutImg()
    })
}
    </script>
</body>
</html>