21xrx.com
2024-12-22 22:59:04 Sunday
登录
文章检索 我的文章 写文章
实现图片轮播的方法及代码示例
2023-06-18 22:19:25 深夜i     --     --
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);


}
  
  

评论区

{{item['qq_nickname']}}
()
回复
回复