前端幻灯片特效——滑入式幻灯片

最新推荐文章于 2024-05-30 19:39:43 发布

QQ的猫好懒

最新推荐文章于 2024-05-30 19:39:43 发布

阅读量781

点赞数 1

文章标签： html 前端 ppt 插件

本文链接：https://blog.csdn.net/cqq1171422470/article/details/79094893

版权

滑入式幻灯片：html+js+jQuery

1、作者仅仅在IE上测试过，其它内核浏览器可能略有偏差。

2、如果需要使用此插件，仅仅需要改变图片即可（图片没上传，自行更改）。

3、欢迎用于学习，改进此功能。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ppt</title>
	<script type="text/javascript" src="jquery-2.1.4.js"></script>
</head>
<style type="text/css">
	.slide{							//自由布局，喜欢就好，一般根据图片大小定宽高
		width: 298px;
		height: 216px;
		position:absolute;
		top: 200px;
		left: 400px;
		overflow: hidden;					//隐藏溢出的图片
	}
	.window{							//根据图片大小定宽高
		/*width:1200px;*/
		height:216px;
		position: relative;
		margin: auto;						//居中对齐
	}
	.window .bgi {							//图片样式
		float: left;
		cursor: pointer;
		/*position: absolute;*/
	}
	.serial{							//数字样式，自由设计
		position: relative;
		top: 380px;
		left: 410px;
		cursor: pointer;
	}
	.serial span{
		color: black;
	}
	.shape{
		background-color: red;
	}
</style>
<body>
	<div class="slide">								//图片层
		<div class="window">
			<img src="bbs-1.jpg" class="bgi" >
			<img src="bbs-2.jpg" class="bgi" >
			<img src="bbs-3.jpg" class="bgi" >
			<img src="bbs-4.jpg" class="bgi">
		</div>
	</div>
	<div class="serial">							//数字层
			<span class="shape" rel="1">1</span>
			<span rel="2">2</span>
			<span rel="3">3</span>
			<span rel="4">4</span>
		</div>
<script>
	var imgwidth;									//定义图片宽度变量
	var n;											//定义数字变量
	var imgamount=0;								//定义滑入图片数量并赋值为0
	var num;										//定义总图片数量
	var relId;							//定义数字层体内数性值：指“rel”的值
	num=$('img').length;							//计算有多少张图片
	imgwidth=$('img:first').width();				//计算单张图片宽度
	var boxwidth=num*imgwidth;						//计算放图片的div宽度
	$('.window').css({width:boxwidth+'px'});		//自动调整div宽
	
	autoslide=function(){						//图片每次滑动的宽度及动画效果函数
		$('.window').animate({left:-imgwidth*imgamount},400);
	}
	
	circulation=function(){							//数字层和图片层循环播放函数
		play=setInterval(function(){
			n=$('.shape').next();
			if(n.length===0){
				n=$('span:first');
			}
			$('span').removeClass('shape');
			n.addClass('shape');
			++imgamount;
			if (imgamount==num) {
				imgamount=0;
			}
			autoslide();
		},2000);
	}
	circulation();

	clickslide=function(){							//点击数字，图片调整函数
		imgposition=imgwidth*relId;
		$('.window').animate({left:-imgposition},200);
	}

	clicknumber=function(){							//点击数字，数字图片响应函数
		$('span').click(function(){
			n=$(this);
			relId=n.attr('rel')-1;
			imgamount=relId;
			clearInterval(play);
			clickslide();
			circulation();
			$(this).addClass('shape');
			$('span').not($(this)).removeClass('shape');
			return false;					//防止图片层数字层有a链接出错
		});
	}
	clicknumber();

	$('.window img').hover(function(){				//鼠标移入图片上，停止循环
			clearInterval(play);
		},function(){
			circulation();
	});					
</script>
</body>
</html>

QQ的猫好懒

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
前端幻灯片特效——滑入式幻灯片

滑入式幻灯片：html+js+jQuery1、作者仅仅在IE上测试过，其它内核浏览器可能略有偏差。2、如果需要使用此插件，仅仅需要改变图片即可（图片没上传，自行更改）。3、欢迎用于学习，改进此功能。 ppt .slide{ //自由布局，喜欢就好，一般根据图片大小定宽高 width: 298px; height: 216px; position:abso
复制链接

扫一扫