<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery多種百葉窗風格切換焦點圖插件DEMO演示</title>
<link rel="stylesheet" href="css/shutter.css">
</head>
<body>
<div class="shutter">
<div class="shutter-img">
<a href="#" data-shutter-title="Iron Man"><img src="images/shutter_1.jpg" alt="#"></a>
<a href="#" data-shutter-title="Super Man"><img src="images/shutter_2.jpg" alt="#"></a>
<a href="#" data-shutter-title="The Hulk"><img src="images/shutter_3.jpg" alt="#"></a>
<a href="#" data-shutter-title="The your"><img src="images/shutter_4.jpg" alt="#"></a>
</div>
<ul class="shutter-btn">
<li class="prev"></li>
<li class="next"></li>
</ul>
<div class="shutter-desc">
<p>Iron Man</p>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/velocity.js"></script>
<script src="js/shutter.js"></script>
<script>
$(function () {
$('.shutter').shutter({
shutterW: 1000, // 容器寬度
shutterH: 358, // 容器高度
isAutoPlay: true, // 是否自動播放
playInterval: 3000, // 自動播放時間
curDisplay: 3, // 當前顯示頁
fullPage: false // 是否全屏展示
});
});
</script>
<div style="text-align:center;clear:both">
<!-- <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script> -->
</div>
</body>
</html>百葉窗
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章