jquery图片切换插件制作上下按钮与标题文字图片切换

jquery图片切换插件制作左右按钮与标题文字图片切换

本例用了2个js文件jquery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js，到演示页面可以查看

?

?

1. <style?type="text/css">??
2. *{margin:0;padding:0;list-style-type:none;}??
3. a,img{border:0;}??
4. /*?ui-banner?*/??
5. .ui-banner{display:block;position:relative;width:820px;margin:20px?auto;}??
6. .ui-banner.ui-banner-invalid{display:none;}??
7. .ui-banner,.ui-banner?.ui-banner-slides,.ui-banner?.ui-banner-slogans,.ui-banner?.ui-banner-arrow{height:233px;}??
8. .ui-banner?.ui-banner-slides,.ui-banner?.ui-banner-slogans,.ui-banner?.ui-banner-arrow{position:absolute;top:0;}??
9. .ui-banner?ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}??
10. .ui-banner?.ui-banner-slides{width:654px;height:233px;left:1px;}??
11. .ui-banner?.ui-banner-slides?li{display:none;position:absolute;}??
12. .ui-banner?.ui-banner-slides?li?img{width:654px;height:233px;border:none;}??
13. .ui-banner?.ui-banner-slides?li.ui-banner-slides-current,.ui-banner?.ui-banner-slides?li.ui-banner-slides-prev,.ui-banner?.ui-banner-slides?li.ui-banner-slides-next{display:block;}??
14. .ui-banner?.ui-banner-slides?li.ui-banner-slides-current{left:0;}??
15. .ui-banner?.ui-banner-slides?li.ui-banner-slides-prev{left:-654px;}??
16. .ui-banner?.ui-banner-slides?li.ui-banner-slides-next{left:654px;}??
17. .ui-banner?.ui-banner-slogans{background:#009AC9;height:213px;overflow:hidden;padding:10px?30px?10px?15px;width:118px;rightright:0;}??
18. .ui-banner?.ui-banner-slogans?li{cursor:pointer;color:#8DC4EC;text-align:left;font-weight:bold;font-size:12px;line-height:14px;padding:10px?0?10px?10px;margin-left:5px;border-bottom:1px?solid?#79B4DF;list-style:none;list-style-type:none;}??
19. .ui-banner?.ui-banner-slogans?li.ui-banner-slogans-current{color:#FFF;}??
20. .ui-banner?.ui-banner-slogans?li.ui-banner-slogans-prev{border-bottom:none;}??
21. .ui-banner?.ui-banner-arrow{display:block;width:45px;outline:none;}??
22. .ui-banner?.ui-banner-arrow.ui-banner-arrow-prev{left:-14px;top:100px;background:transparent?url("images/hero-slider-arrow-left.png")?no-repeat?0?0;}??
23. .ui-banner?.ui-banner-arrow.ui-banner-arrow-next{left:630px;top:100px;background:transparent?url("images/hero-slider-arrow-right.png")?no-repeat?0?0;}??
24. .ui-banner?.ui-banner-arrow.ui-banner-arrow-next?img{left:-15px;}??
25. .ui-banner?.ui-banner-overlay{bottombottom:0;height:10px;position:absolute;rightright:0;width:173px;}??
26. </style>??

?

1. <div?id="banners"?class="ui-banner">??
2. ????<ul?class="ui-banner-slides">??
3. ????<li><a?href=""><img?src="../dalian.jpg"?alt=""?title=""></a></li>??
4. ????<li><a?href=""><img?src="../erlianhaote.png"?alt=""?title=""></a></li>??
5. ????<li><a?href=""><img?src="../mohe.png"?alt=""?title=""></a></li>??
6. ????<li><a?href=""><img?src="../sanya.jpg"?alt=""?title=""></a></li>??
7. ????<li><a?href=""><img?src="../xianggang.jpg"?alt=""?title=""></a></li>??
8. ????<li><a?href=""><img?src="../zhoushan.jpg"?alt=""?title=""></a></li>?????
9. ????</ul><!--ui-banner-slides?end-->??
10. ????<ul?class="ui-banner-slogans">??
11. ????<li>大连</li>??
12. ????<li>二连浩特</li>??
13. ????<li>漠河</li>??
14. ????<li>三亚</li>??
15. ????<li>香港</li>??
16. ????<li>舟山</li>??
17. ????</ul><!--ui-banner-slogans?end-->??
18. <a?href=""?class="ui-banner-arrow?ui-banner-arrow-prev?png_bg"></a><a?href=""?class="ui-banner-arrow?ui-banner-arrow-next?png_bg"></a><div?class="ui-banner-overlay?png_bg"></div></div>??

?

1. <script?type="text/javascript">??
2. $(document).ready(function(){??
3. ????$('#banners').bannerize({??
4. ????????shuffle:?1,??
5. ????????interval:?"5"??
6. ????});??
7. });??
8. </script>??

?

原文地址:http://www.freejs.net/article_jiaodiantu_80.html