实现图片轮播的方法及代码示例 |21xrx.com

实现图片轮播的方法及代码示例

2023-06-18 22:19:25 深夜i 22 0

javascript 图片轮播 setInterval

在现代网站设计中，图片轮播已成为非常常见的功能之一，它可以为网站增色不少，同时也能更好地吸引用户的注意力。本文将介绍一些javascript实现图片轮播的方法，并提供代码示例。

1. 基于 setInterval 实现图片轮播

setInterval 是javascript中的一个定时器函数，通过它可以实现定时执行某些代码的效果。在图片轮播中，我们可以使用 setInterval 函数来控制图片的显示和隐藏。

示例代码如下：

javascript
function carousel() {
 // 获取轮播图列表
 var list = document.querySelectorAll('.carousel .img-list li');
 // 当前索引
 var index = 0;
 // 显示图片的函数
 function showImage() {
  // 隐藏当前图片
  list[index].style.display = 'none';
  // 移动索引
  index = (index + 1) % list.length;
  // 显示下一张图片
  list[index].style.display = 'block';
 }
 // 每隔3秒钟执行一次 showImage
 setInterval(showImage, 3000);
}

2. 基于 CSS3 transition 实现图片轮播

CSS3 中的 transition 属性可以实现一些简单的动画效果，比如图片的渐变切换。我们可以将多张图片放在一个容器中，通过控制容器的位置来实现轮播。

示例代码如下：

html

css
.carousel .img-list
 display: flex;
 position: relative;
 width: 100%;
 height: 300px;
 overflow: hidden;
.carousel .img-list li
 flex: 1;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 transition: opacity .5s;
.carousel .img-list li.active
 opacity: 1;

javascript
function carousel() {
 // 获取轮播图列表
 var list = document.querySelectorAll('.carousel .img-list li');
 // 当前索引
 var index = 0;
 // 设置轮播函数
 function showImage() {
  // 隐藏所有图片
  list.forEach(function(item) { item.classList.remove('active'); })
  // 显示下一张图片
  list[index].classList.add('active');
  // 移动索引
  index = (index + 1) % list.length;
 }
 // 每隔3秒钟执行一次 showImage
 setInterval(showImage, 3000);
}

3. 基于 jQuery 实现图片轮播

jQuery 是一个非常流行的javascript框架，通过它可以更方便地操作DOM。在实现图片轮播效果时，我们可以利用 jQuery 的 animate 函数来实现图片的淡入淡出。

示例代码如下：

html

css
.carousel .img-list
 position: relative;
 width: 100%;
 height: 300px;
.carousel .img-list li
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
.carousel .img-list li.active
 opacity: 1;

javascript
function carousel() {
 // 获取轮播图列表
 var list = $('.carousel .img-list li');
 // 当前索引
 var index = 0;
 // 设置轮播函数
 function showImage() {
  // 隐藏上一张图片
  list.eq(index).fadeOut('slow');
  // 显示下一张图片
  index = (index + 1) % list.length;
  list.eq(index).fadeIn('slow');
 }
 // 每隔3秒钟执行一次 showImage
 setInterval(showImage, 3000);
}

上一篇: idea打包java可执行jar包

下一篇: Java前台开发实战：掌握页面交互技巧

评论区

相似文章