利用jquery实现多张图片淡入淡出

最新推荐文章于 2024-03-21 19:52:25 发布

原创

最新推荐文章于 2024-03-21 19:52:25 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery应用 #图片轮播 #淡入淡出

本文介绍了如何使用jQuery实现多张图片的正序和反序淡入淡出轮播功能。在鼠标无操作时，图片按照设定时间间隔正序播放。鼠标从左向右滑动，图片立即正序播放；从右向左滑动，图片立即反序播放。通过设置display样式和fadeToggle方法结合setInterval及clearInterval来控制动画和轮播。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能描述：

图片播放分为2个顺序：正序和反序，正序就是从第一张到最后一张，然后再第一张，反序是从第一张开始，然后最后一张，再到第一张。

1：当没有鼠标操作时，图片正序播放，每隔特定时间播放一次。

2：如果鼠标从左向右滑动，则图片跳过间隔时间，播放顺序强制切换为正序，立即播放至下一张。

3：如果鼠标从右向左滑动，则图片跳过间隔时间，播放顺序强制切换为反序，立即播放至下一张。

实现思路：

把所有图片放在同一位置，初始时只有第一张设为显示，其他调为display:none.利用fadeToggle（）函数实现图片淡入淡出，利用setInterval()函数实现自动轮播，如果检测到滑动事件，则clearInterval(),立即执行轮播函数，完成后开启setInterval()。

代码如下：

<!DOCTYPE html>  
<html>  
<head>  
<script src="jquery-3.2.1.min.js"></script>  
<script>  
var i = 0; 
window.reverse = false;	//默认为正序播放
$(document).ready(function(){  
   picGroup = [$("#div1"),$("#div2"),$("#div3"),$("#div4")]; 
  addlistener();
  ID = setInterval(show1,4000);  
    
}); 
function nextPicIndex()	//对全局