您的位置：首页 > Web前端 > JQuery

Jquery水车旋转的相册

2015-11-10 13:38 645 查看

使用Jquery类库，然后写一个外部的JavaScript类库，制作成一个类似水车旋转的相册，具有3D效果。点击图片，则图片旋转，类似旋转木马的效果。

前台调用代码：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个类似水车旋转的图片展示效果</title>
<link rel="stylesheet" href="css/styles.css" charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.waterwheelCarousel.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#waterwheelCarousel").waterwheelCarousel("horizontal",{
startingItem: 6
});
});
</script>
</head>
<body>
<div id="waterwheelCarousel">
<img src="images/testImage1.jpg" alt="Test Image 1" />
<img src="images/testImage2.jpg" alt="Test Image 2" />
<img src="images/testImage3.jpg" alt="Test Image 3" />
<img src="images/testImage4.jpg" alt="Test Image 4" />
<img src="images/testImage5.jpg" alt="Test Image 5" />
<img src="images/testImage6.jpg" alt="Test Image 6" />
<img src="images/testImage7.jpg" alt="Test Image 7" />
<img src="images/testImage8.jpg" alt="Test Image 8" />
<img src="images/testImage9.jpg" alt="Test Image 9" />
<img src="images/testImage10.jpg" alt="Test Image 10" />
<img src="images/testImage11.jpg" alt="Test Image 11" />
</div>
</body>
</html>

运行的效果：

案例下载地址：http://download.csdn.net/detail/lovegonghui/9257491

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航