-
<div id="flashbox" class="smallslider">
-
<ul>
-
<li><a href="#"><img src="rs/images/001.jpg" title="" alt="圖片標題1" /></a></li>
-
<li><a href="#"><img src="rs/images/002.jpg" title="" alt="圖片標題2" /></a></li>
-
<li><a href="#"><img src="rs/images/003.jpg" title="" alt="圖片標題3" /></a></li>
-
<li><a href="#"><img src="rs/images/004.jpg" title="" alt="圖片標題4" /></a></li>
-
<li><a href="#"><img src="rs/images/005.jpg" title="" alt="圖片標題5" /></a></li>
-
</ul>
-
</div>
JS部分
JS代碼:-
<script type="text/javascript">
-
$(document).ready(function(){
-
$('#flashbox').smallslider({
-
onImageStop:false,
-
switchEffect:'ease',
-
switchEase: 'easeOutBounce',
-
switchPath: 'up',
-
switchMode: 'hover',
-
textSwitch:2,
-
textPosition: 'top',
-
textAlign:'center'
-
});
-
});
-
</script>怎麼樣?夠簡單吧?完全不需要寫額外的HTML代碼。
調用方法:
1。保證你的頁面鏈接進3個文件:
<script type="text/javascript" src="rs/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="rs/js/jquery.smallslider.js"></script>
<link rel="stylesheet" type="text/css" href="rs/css/smallslider.css" media="screen" />
2。HTML 結構如下:
1),最外層必須爲一個div元素,這個div需要指定一個class爲:smallslider。
2),div內的HTML結構爲一個ul標籤,ul標籤內爲li標籤,li內爲a標籤,a內爲img標籤,即:div--->ul--->li--->a--->img 。
3),img標籤的alt屬性爲顯示的標題文字內容,所以必須要有。
3,初始化輪播圖:
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('#flashbox').smallslider();
});
});
</script>
有一點要注意,就是必須固定你的調用元素的高度和寬度。一般情況下,切換的圖片高度和寬度都是固定的,如果你圖片大小不一,切換的時候會很難看。
如果你有好的建議,請給我發郵件:[email protected]
以下是另外的js圖片輪動效果 參考:2 http://www.16sucai.com/uploadfile/show7/這裏是 jquery特效大全 -
js圖片輪動,jquery圖片切換
HTML代碼:
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.