JavaScript实施图片自动播放功能

发布时间：2023-12-22 00:58:16 所属栏目：教程来源：DaWei

导读： 　　给大家分享一下JavaScript如何实现图片自动播放功能的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章

　　给大家分享一下JavaScript如何实现图片自动播放功能的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

　　一、自动轮播原理

　　图片轮播，顾名思义，就是让多张图片自动的播放和切换。自动轮播的原理就是借助JavaScript定时器实现：当轮播图的页数是确定的，通过 setInterval()函数实现定时切换图片;若是无限轮播，用setTimeout()实现递归调用来达到轮播效果。

　　二、HTML结构

　　要实现自动轮播，需要在HTML中建立一个循环播放的容器和图片，如下：

　　<div class="carousel-container">

　　  <img src="images/pic1.png" alt="image 1">

　　  <img src="images/pic2.png" alt="image 2">

　　  <img src="images/pic3.png" alt="image 3">

　　</div>

　　三、CSS样式

　　对轮播容器的样式进行设置，如下：

　　.carousel-container{

　　  width: 100%;

　　  height: 500px;

　　  position: relative;

　　  overflow: hidden;

　　}

　　.carousel-container img{

　　  width: 100%;

　　  height: auto;

　　  position: absolute;

　　  top: 0;

　　  left: 0;

　　  opacity: 0;

　　  transition: all 0.6s ease-in-out;

　　}

　　.carousel-container img.active{

　　  opacity: 1;

　　}

　　四、JavaScript实现轮播

　　1.获取图片和容器

　　var carouselContainer = document.querySelector('.carousel-container');

　　var carouselImgs = carouselContainer.querySelectorAll('img');

　　2.初始化轮播

　　在开始轮播前，可以给第一张图片添加一个类名"active"，同时设置一个计数器index，表示当前轮播的图片，以便于在下一步中切换下一张图片。

　　var index = 0;

　　carouselImgs[index].classList.add('active');

　　设置定时器

　　在轮播的过程中，需要每隔一定时间切换一张图片，这里介绍两种实现方式：无限轮播和有限轮播。区别在于在所有的图片遍历完成后，是否重新从头开始进行遍历。

　　无限轮播：

　　setInterval(function(){

　　  index++;

　　  if(index >= carouselImgs.length){

　　    index = 0;

　　  }

　　  carouselImgs.forEach(function(img){

　　    img.classList.remove('active');

　　  });

　　  carouselImgs[index].classList.add('active');

　　}, 3000);

　　有限轮播：

　　var timer = setInterval(function(){

　　  index++;

　　  if(index >= carouselImgs.length){

　　    clearInterval(timer);

　　    return;

　　  }

　　  carouselImgs.forEach(function(img){

　　    img.classList.remove('active');

　　  });

　　  carouselImgs[index].classList.add('active');

　　}, 3000);

　　这里可以看到，通过设置计数器index，可以确保每次遍历到当中对应的位置，同时我们设置了一个计时器，让其每隔3秒钟轮播下一张图片。

　　4.添加事件监听

　　有些用户可能会希望点击图片来跳转到相关页面，这时我们就需要在图片上添加事件监听。

　　carouselImgs.forEach(function(img){

　　  img.addEventListener('click', function(e){

　　    var targetURL = e.target.getAttribute('data-href');

　　    if(targetURL){

　　      window.location.href=targetURL;

　　    }

　　  });

　　});

　　这里，我们通过事件监听的方式来监听用户的点击行为，并且通过"getAttribute()"方法获取到图片对应的链接，从而实现点击图片跳转到目标页面。

（编辑：PHP编程网 - 襄阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!