一款基于jQuery的全屏广告图片焦点图

时间:2023-03-09 09:44:17
一款基于jQuery的全屏广告图片焦点图

之前为大家分享了很多jQuery焦点图插件。今天我们要介绍的这款jQuery全屏广告图片焦点图插件也非常不错,图片切换时有淡出淡出的动画效果,并且也相当流畅。效果图如下:

一款基于jQuery的全屏广告图片焦点图

在线预览   源码下载

实现的代码。

html代码:

 <div class="banner-box">
<div class="bd">
<ul>
<li style="background: #F3E5D8;">
<div class="m-width">
<a href="javascript:void(0);">
<img src="data:images/img1.jpg" /></a>
</div>
</li>
<li style="background: #B01415">
<div class="m-width">
<a href="javascript:void(0);">
<img src="data:images/img2.jpg" /></a>
</div>
</li>
<li style="background: #C49803;">
<div class="m-width">
<a href="javascript:void(0);">
<img src="data:images/img3.jpg" /></a>
</div>
</li>
<li style="background: #FDFDF5">
<div class="m-width">
<a href="javascript:void(0);">
<img src="data:images/img4.jpg" /></a>
</div>
</li>
</ul>
</div>
<div class="banner-btn">
<a class="prev" href="javascript:void(0);"></a><a class="next" href="javascript:void(0);">
</a>
<div class="hd">
<ul>
</ul>
</div>
</div>
</div>

js代码:

 $(document).ready(function () {

            $(".prev,.next").hover(function () {
$(this).stop(true, false).fadeTo("show", 0.9);
}, function () {
$(this).stop(true, false).fadeTo("show", 0.4);
}); $(".banner-box").slide({
titCell: ".hd ul",
mainCell: ".bd ul",
effect: "fold",
interTime: 3500,
delayTime: 500,
autoPlay: true,
autoPage: true,
trigger: "click"
}); });

via:http://www.w2bc.com/Article/15601