特效描述:jquery 带左右按钮控制 图片切换插件 图文切换代码。jquery带左右按钮控制图片切换插件图文切换代码
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script src="js/jquery-ui-1.8.6.core.widget.js"></script> <script src="js/jqueryui.bannerize.js"></script>
2. HTML代码
<style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} /* ui-banner */ .ui-banner{display:block;position:relative;width:820px;margin:20px auto;} .ui-banner.ui-banner-invalid{display:none;} .ui-banner,.ui-banner .ui-banner-slides,.ui-banner .ui-banner-slogans,.ui-banner .ui-banner-arrow{height:233px;} .ui-banner .ui-banner-slides,.ui-banner .ui-banner-slogans,.ui-banner .ui-banner-arrow{position:absolute;top:0;} .ui-banner ul{list-style-type:none;margin:0;padding:0;overflow:hidden;} .ui-banner .ui-banner-slides{width:654px;height:233px;left:1px;} .ui-banner .ui-banner-slides li{display:none;position:absolute;} .ui-banner .ui-banner-slides li img{width:654px;height:233px;border:none;} .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;} .ui-banner .ui-banner-slides li.ui-banner-slides-current{left:0;} .ui-banner .ui-banner-slides li.ui-banner-slides-prev{left:-654px;} .ui-banner .ui-banner-slides li.ui-banner-slides-next{left:654px;} .ui-banner .ui-banner-slogans{background:#009AC9;height:213px;overflow:hidden;padding:10px 30px 10px 15px;width:118px;right:0;} .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;} .ui-banner .ui-banner-slogans li.ui-banner-slogans-current{color:#FFF;} .ui-banner .ui-banner-slogans li.ui-banner-slogans-prev{border-bottom:none;} .ui-banner .ui-banner-arrow{display:block;width:45px;outline:none;} .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;} .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;} .ui-banner .ui-banner-arrow.ui-banner-arrow-next img{left:-15px;} .ui-banner .ui-banner-overlay{bottom:0;height:10px;position:absolute;right:0;width:173px;} </style> <div id="banners" class="ui-banner"> <ul class="ui-banner-slides"> <li><a href="http://www.jsfoot.com/"><img src="images/HeartHealthOmega.jpg" alt="NEW! Get Heart Smart With Essential Omega III" title="NEW! Get Heart Smart With Essential Omega III"/></a></li> <li><a href="http://www.jsfoot.com/"><img src="images/CellLabs.jpg" alt="NEW! Support Your Skin on a Cellular Level" title="NEW! Support Your Skin on a Cellular Level"/></a></li> <li><a href="http://www.jsfoot.com/"><img src="images/RoyalSpa.jpg" alt="NEW! Indulge in Luxury With Royal Spa" title="NEW! Indulge in Luxury With Royal Spa"/></a></li> <li><a href="http://www.jsfoot.com/"><img src="images/Cashback.jpg" alt="NEW! Get paid to shop with Cashback" title="NEW! Get paid to shop with Cashback"/></a></li> <li><a href="http://www.jsfoot.com/"><img src="images/StealthShield.jpg" alt="NEW! Radiation Protection at its Best" title="NEW! Radiation Protection at its Best"/></a></li> <li><a href="http://www.jsfoot.com/"><img src="images/IsotonixEducate.jpg" alt="Unleash the Power of Isotonix Today" title="Unleash the Power of Isotonix Today"/></a></li> <li><a href="http://www.jsfoot.com/"><img src="images/MotivesSimple.jpg" alt="Motives is Changing the Face of UK Beauty" title="Motives is Changing the Face of UK Beauty"/></a></li> <li><a href="http://www.jsfoot.com/"><img src="images/UltimateAloeKwStb.jpg" alt="Get a Taste of Spring" title="Get a Taste of Spring"/></a></li> <li><a href="http://www.jsfoot.com/"><img src="images/OPC3AllBetter.jpg" alt="Try Isotonix OPC-3 Today for Better Health" title="Try Isotonix OPC-3 Today for Better Health"/></a></li> <li><a href="http://www.jsfoot.com/"><img src="images/RoyalSpaRoyalHair.jpg" alt="Feel like a princess with Royal Spa" title="Feel like a princess with Royal Spa"/></a></li> <li><a href="http://www.jsfoot.com/"><img src="images/JubileeRoyalPartyAcai.jpg" alt="Stay energised with Isotonix for the Queen's Jubilee" title="Stay energised with Isotonix for the Queen's Jubilee"/></a></li> <li><a href="http://www.jsfoot.com/"><img src="images/WorldStores.gif" alt="WorldStores - Top Brands Delivered Next Day" title="WorldStores - Top Brands Delivered Next Day"/></a></li> </ul><!--ui-banner-slides end--> <ul class="ui-banner-slogans"> <li>新!让心智能必要的欧米茄三</li> <li>新!支持你的皮肤细胞水平上</li> <li>新!御温泉尽情享受豪华</li> <li>新!得到报酬购物现金回赠</li> <li>新!在其最好的辐射防护</li> <li>今天释放等渗电力</li> <li>动机的改变,面对英国美容</li> <li>得到了春天的味道</li> <li>尝试等渗OPC-3今天更健康</li> <li>与皇家温泉公主的感觉</li> <li>保持精力充沛与等渗女王的银禧</li> <li>WorldStores - 顶级品牌提供翌日</li> </ul><!--ui-banner-slogans end--> </div> <script type="text/javascript"> $(document).ready(function(){ $('#banners').bannerize({ shuffle: 1, interval: "5" }); }); </script>