图片轮播 --原理到实现

最新推荐文章于 2024-04-15 10:28:24 发布

稳食嗟

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量3.7k

点赞数

分类专栏：前端文章标签： css3 html5

本文链接：https://blog.csdn.net/alpha_su/article/details/53377459

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

图片轮播不是什么新玩意了，我想做个FULL STACK工程师，觉得前端好好玩，H5和CSS3功能强大，故想拿一些东西来练下手，原理搞明即可，在此不求细节。

图片轮播主要技术点为：

一、<ul> <li> 来作导航栏；

二、<div>通过设置其属性为overflow:none，使照片集部分隐藏；

三、CSS3的transition 结合 transform 来做动画变换；

四、JQUERY通过选择器，控制动画元素属性。

动画描述

一、鼠标放在图片上，会出现左右滑动箭头；

二、点击箭头会使图片集左右移动，中间图片会旋转360度，并放大1.2倍；

三、图片到边界时不能再滑动。

预览：点击打开链接

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>图片轮播特效</title>
</head>
<!--使用JQUERY3 h5 CSS3  用IE的是SB哈 
people who uses ie is stupid -->
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
	body{
		margin: 0,auto;
		padding: 0;
	}
/**
ul must be the full width
ul  一定要设为全宽，多出的部分由DIV隐藏
**/
	ul{
		list-style-type:none;
		margin:0;
		padding:0;
		width: 1680px;
		padding-left: 0;
	}
	li{
		display:inline;
			margin:0;
		padding-left: 20px;
	}

	.myimg{
		width: 200px;
		height: 102px;
	}
	/**
	let the div cover the ul and define the width,the other part is hidden
	**/
	.imgDiv{
		margin-left: 25%;
		width:50%;
		height: 150px;
		overflow: hidden;
		/* border:5px solid red;*/
		 padding: 0;
	}
	
/*当前浏览图片，将其放大1.2倍，突出轮到了哪张图片*/
	.active{
		 transition: transform 2s;
		 -webkit-transform:rotate(360deg);

		
	}
	.active2{
		 transition: transform 2s;
		 -webkit-transform:scale(1.2);
	}
	/*.active:after{
		 transition: transform 2s;
		scale:;
	}*/
	.leftArrow{
		position: absolute;
		float: left;
		width: 50px;
		height: 50px;
		opacity: 0;
		font-size: 50px;
		font-family: 'Glyphicons Halflings';
		text-shadow: 5px 5px 5px #FF0000;
		margin-left: 22%;
		font-weight: 400;
		 font-style: normal;
		 top: 50px;
		 z-index: 10;
	}


	.rightArrow{
		position: absolute;
		float: right;
		width: 50px;
		height: 50px;
		opacity: 0;
		font-size: 50px;
		font-family: 'Glyphicons Halflings';
		text-shadow: 5px 5px 5px #FF0000;
		 right: 23%;
		font-weight: 400;
		 font-style: normal;
		 top: 50px;
		 z-index: 10;
	}

	
</style>
<body>
<a class="leftArrow"><-</a>

	<div class="imgDiv">
		<ul>
			<li style="padding-left: 0"><img class="myimg " src="images/1.jpg"></li>
			<li><img class="myimg active" src="images/2.jpg"></li>
			<li><img class="myimg" src="images/3.jpg"></li>
			<li><img class="myimg" src="images/4.jpg"></li>
			<li><img class="myimg" src="images/5.jpg"></li>
			<li><img class="myimg" src="images/6.jpg"></li>
		</ul>

	</div>

	<a class="rightArrow">-></a>
<br>

</body>
</html>
<script type="text/javascript">
var x=0;//X座标初始值
var currentNode=1;//当前选中节点

	
	$('.leftArrow').click(function(){
		if(x==-684)return;
		x-=228;
		currentNode++;
		$('.active').removeClass("active");
		$('.active2').removeClass("active2");
		$('ul').find('img:nth('+currentNode+')').addClass('active');
		setTimeout(function() {$('ul').find('img:nth('+currentNode+')').addClass('active2');}, 2000);
		
		$('ul').css('-webkit-transition',' -webkit-transform 2s').css('transform','translate3d('+x+'px, 0px, 0px)');
	});

	$('.rightArrow').click(function(){
			if(x==0)return;
			currentNode--;
			x+=228;
			$('.active2').removeClass("active2");
			$('.active').removeClass("active");
		$('ul').find('img:nth('+currentNode+')').addClass('active');
		setTimeout(function() {$('ul').find('img:nth('+currentNode+')').addClass('active2');}, 2000);
		$('ul').css('-webkit-transition',' -webkit-transform 2s').css('transform','translate3d('+x+'px, 0px, 0px)');
	});

	$('.imgDiv').mouseenter(function(){
		$('.leftArrow').css('opacity','1');
		$('.rightArrow').css('opacity','1');
	});
	$('.imgDiv').mouseleave(function(){
		$('.leftArrow').css('opacity','0');
		$('.rightArrow').css('opacity','0');
	});

	$('[class$="Arrow"]').mouseenter(function(){
		$('.leftArrow').css('opacity','1');
		$('.rightArrow').css('opacity','1');
	});
	$('[class$="Arrow"').mouseleave(function(){
		$('.leftArrow').css('opacity','0');
		$('.rightArrow').css('opacity','0');
	});

</script>

小知识点复习：

JQuery

类选择器 $('.rightArrow')

类筛选器 $('[class$="Arrow"]') 以Arrow为结尾的元素

查找并指定子元素 $('ul').find('img:nth('+currentNode+')') ul结点下第N个图片元素

css操作 css方法 addClass方法 removeClass方法

css

list-style-type:none 属性

display:inline 属性

transition 属性

transform属性

opacity属性