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



151 602 201



特效描述:jquery 图片切换插件 左右按钮 标题文字图片滚动切换,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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动切换 滑动选项卡切换 flash焦点图 自动滚动图片轮播 选项卡切换 滑动手风琴 切换按钮 表单 焦点图 幻灯片 图片轮播 滚动切换 图片滚动 图片切换 图片轮播 文字滚动 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到