網址：jQuery Cycle Plugin
效果不錯，而且範例的圖片及jquery core都是用網路鏈結
載回去就可以直接跑了 都不用更改路徑
就感心ㄟ
See More Demos and Examples
* Super Basic Demo (view source for details)
* Beginner Demos
* Intermediate Demos (Part 1)
* Intermediate Demos (Part 2)
* Advanced Demos (Part 1)
* Advanced Demos (Part 2)
* Even More Demos (lots of additinal demos can be found here)
效果不錯，而且範例的圖片及jquery core都是用網路鏈結
載回去就可以直接跑了 都不用更改路徑
就感心ㄟ
See More Demos and Examples
* Super Basic Demo (view source for details)
* Beginner Demos
* Intermediate Demos (Part 1)
* Intermediate Demos (Part 2)
* Advanced Demos (Part 1)
* Advanced Demos (Part 2)
* Even More Demos (lots of additinal demos can be found here)
<!-- 設定輪播框架外觀 -->
<style type="text/css">
.slideshow { height: 232px; width: 232px; }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://jquery.malsup.com/cycle/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<!-- 將要播放的物件(img,span,... 啥都可以)放容器裡 -->
<div class="slideshow">
<img src="http://jquery.malsup.com/cycle/images/beach1.jpg" width="200" height="200" />
<img src="http://jquery.malsup.com/cycle/images/beach2.jpg" width="200" height="200" />
<img src="http://jquery.malsup.com/cycle/images/beach3.jpg" width="200" height="200" />
<img src="http://jquery.malsup.com/cycle/images/beach4.jpg" width="200" height="200" />
<img src="http://jquery.malsup.com/cycle/images/beach5.jpg" width="200" height="200" />
</div>
</body>
沒有留言:
張貼留言