特效介绍
图片90°旋转过渡的jquery轮播效果。点击左右按钮,图片会旋转90°并且渐隐,然后下一张或上一张会渐显。图片的旋转不会导致图片角度的改变,仍然正确显示。
使用方法
使用方法:1、引入下面的css
<link rel="stylesheet" type="text/css" href="css/styles.css" />2、引入下面的js和jQuery:
<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script src="js/jquery.rotate.js"></script> <script src="js/script.js"></script>3、在html的body里面加入下面的html代码:
<div id="slideShowContainer"> <div id="slideShow"> <ul> <li><img src="img/photos/1.jpg" width="100%" alt="Fish" /></li> <li><img src="img/photos/2.jpg" width="100%" alt="Ancient" /></li> <li><img src="img/photos/3.jpg" width="100%" alt="Industry" /></li> <li><img src="img/photos/4.jpg" width="100%" alt="Rain" /></li> </ul> </div> <a id="previousLink" href="#">»</a> <a id="nextLink" href="#">«</a> </div>
部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!