js特效

代码结构

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>