Front-end——jQuery实现手风琴效果（轮播图）

本案例思路：

基础布局和css样式：

（1）给盛放要轮播的图片的盒子绝对定位

js中的代码：

（2）第一张图片放在盒子最前，其余的图片放在盒子最后，点击任意一张图片时，其前面的图片部分显示，以保证轮播图左右滑动效果（否则看起来会有一点卡顿）

（3）设置盒子位置，通过移动这个盒子的位置，产生图片移动的效果，用定时器设置轮播效果

（4）设置延时，来达到缓慢移动的效果

本案例使用到：

鼠标点击事件：点击那个图片，就将其对应的图片显示完整

$(this)：代表当前操作的dom对象

$(domObj).siblings()：匹配所有该元素的兄弟元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			#app{
				width: 890px;
				height: 692px;
				margin: 50px auto;
				border: 2px solid #000000;
			}
			#app>div{
				/* 首先将所有div的宽设置成边缘未完全显示部分的宽度 */
				width: 40px;
				height: 100%;
				float: left;
                /*延时移动*/
				transition: 1s;
			}
			
			#app>div:nth-child(1) {
				/* 将第一张图片设置为完全显示 */
				width: 690px;
				background: url(img/1.jpg);
			}
			
			#app>div:nth-child(2) {
				background: url(img/2.jpg);
			}
			
			#app>div:nth-child(3) {
				background: url(img/3.jpg);
			}
			
			#app>div:nth-child(4) {
				background: url(img/4.jpg);
			}
			
			#app>div:nth-child(5) {
				background: url(img/5.jpg);
			}
			#app>div:nth-child(6) {
				background: url(img/6.jpg);
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		
		<script>
			$(function(){
				$("#app>div").click(function(){
						$(this).width(690)
						// 改变当前元素兄弟元素的宽度
						$(this).siblings().width(40)
					})
			})
		</script>
	</body>
</html>

Front-end——jQuery实现手风琴效果（轮播图）

本案例思路：

本案例使用到：

猜你喜欢