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

CodeEvil

于 2018-01-14 16:44:03 发布

2641

分类专栏： javascript的应用文章标签： jquery应用图片轮播淡入淡出

本文链接：https://blog.csdn.net/m0_37907835/article/details/79057470

版权

javascript的应用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

功能描述：

图片播放分为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()	//对全局边量i进行更改，改为当前博播放顺序下的下一张图片索引
{
	if(reverse == true)
	{
		if(i > 0)
		{
			i--;
		}
		else
		{
			i = 4 -1;
		}
	}
	else
	{
		if(i < 3)
		{
			i++;
		}
		else
		{
			i = 0;
		}
	}
} 
function show1(){         
   picGroup[i].fadeToggle(2000);  
   nextPicIndex();
   picGroup[i].fadeToggle(2000);     
} 
function addlistener()
{
	$("#slide").bind("mousedown",start);
} 
function start(event)
{
	if(event.button == 0)	//当鼠标左键还是按下状态时
	{
		X = event.pageX;
		Y = event.pageY;
		$("#slide").bind("mousemove",move);
		$("#slide").bind("mouseup",stop);
	}
	return false;	//很关键，取消执行浏览器默认事件，没有这一步，该事件执行不了
}
function move(event)
{
	X1 = event.pageX;
	Y1 = event.pageY;
	return false;	//同样取消浏览器默认事件
}
function stop()
{
	if(X1 - X > 50)	//滑动路程大于50，且为向右滑动
	{
		reverse = false; //正序
		clearInterval(ID); 	//停止当前的interval
		show1();	//立即执行一次图片下一张播放
		ID = setInterval(show1,4000);	//重新开启interval
	}
	else if(X1 - X < -50)//滑动路程大于50，且为向左滑动
	{
		reverse = true;	//反序
		clearInterval(ID);
		show1();
		ID = setInterval(show1,4000);
	}
	$("#slide").unbind("mousemove",move);	//左键松开，则接除绑定鼠标移动事件
	$("#slide").unbind("mouseup",stop);		//和左键松开事件
}
</script>  
<style>  
div {  
	  position: absolute;  
	  left: 3px;  
	  top: 0px;  
	  width:800px;  
	  height:800px;  
	}  
</style>  
</head>  
  
<body>  
  <div id="slide" style="position: absolute;  left: 30px;  top: 20px; width:800px;  height:800px; " >
  	<div id="div1" style="background-color:red;"><img width = "800px" height = "600px" src="img/1.jpg"></img></div>  
  
	<div id="div2" style="display:none;background-color:green;"><img width = "800px" height = "600px" src="img/2.jpg"></img></div>  
	  
	<div id="div3" style="display:none;background-color:blue;"><img width = "800px" height = "600px" src="img/3.jpg"></img></div> 

	<div id="div4" style="display:none;background-color:blue;"><img width = "800px" height = "600px" src="img/4.jpg"></img></div> 
  </div>
</body>  

</html>

CodeEvil

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用jquery实现多张图片淡入淡出

功能描述：图片播放分为2个顺序：正序和反序，正序就是从第一张到最后一张，然后再第一张，反序是从第一张开始，然后最后一张，再到第一张。1：当没有鼠标操作时，图片正序播放，每隔特定时间播放一次。2：如果鼠标从左向右滑动，则图片跳过间隔时间，播放顺序强制切换为正序，立即播放至下一张。3：如果鼠标从右向左滑动，则图片跳过间隔时间，播放顺序强制切换为反序，立即播放至下一张。实现思路：
复制链接

扫一扫