图片轮播 --原理到实现

来源：互联网发布：wav音乐下载软件编辑：程序博客网时间：2024/05/22 17:40

图片轮播不是什么新玩意了，我想做个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 widthul  一定要设为全宽，多出的部分由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属性

0 0