首页 > 代码库 > 一款基于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="images/img1.jpg" /></a> </div> </li> <li style="background: #B01415"> <div class="m-width"> <a href="javascript:void(0);"> <img src="images/img2.jpg" /></a> </div> </li> <li style="background: #C49803;"> <div class="m-width"> <a href="javascript:void(0);"> <img src="images/img3.jpg" /></a> </div> </li> <li style="background: #FDFDF5"> <div class="m-width"> <a href="javascript:void(0);"> <img src="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
一款基于jQuery的全屏广告图片焦点图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。