特效介绍
图片90°旋转过渡的jquery轮播效果。点击左右按钮,图片会旋转90°并且渐隐,然后下一张或上一张会渐显。图片的旋转不会导致图片角度的改变,仍然正确显示。
使用方法
使用方法:
1、引入下面的css
1 | < link rel = "stylesheet" type = "text/css" href = "css/styles.css" /> |
2、引入下面的js和jQuery:
2 | <script src= "js/jquery.rotate.js" ></script> |
3 | <script src= "js/script.js" ></script> |
3、在html的body里面加入下面的html代码:
01 | < div id = "slideShowContainer" > |
04 | < li >< img src = "img/photos/1.jpg" width = "100%" alt = "Fish" /></ li > |
05 | < li >< img src = "img/photos/2.jpg" width = "100%" alt = "Ancient" /></ li > |
06 | < li >< img src = "img/photos/3.jpg" width = "100%" alt = "Industry" /></ li > |
07 | < li >< img src = "img/photos/4.jpg" width = "100%" alt = "Rain" /></ li > |
10 | < a id = "previousLink" href = "#" >»</ a > |
11 | < a id = "nextLink" href = "#" >«</ a > |