图片轮播 --原理到实现

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

图片轮播主要技术点为：

一、

•  来作导航栏；

  二、

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

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

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

  动画描述

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

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

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

  
  

  
  

  预览 ：点击打开链接
  

  代码如下：

  
  
  
  	
  
  
  
  
  
  <-
  
  	
  
  		
  
  			
  
  			
  
  			
  
  			
  
  			
  
  			
  
  		
  
  	
  
  	->
  
  
  
  
  
  

  
  

  小知识点复习：

  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属性