注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery全屏带缩略图渐变切换焦点图插件

媒体 fishcity 3098浏览

jQuery全屏幻灯片焦点图

这是来自三一重工官网首页的大屏焦点图切换效果插件,3秒钟自动切换一次,可设置鼠标点击或者悬停在小图片上时,大图切换。当然这些都可以用参数灵活设置,插件使了嵌入式代码,不需写任js,不可不说这是个强大的插件。

jquery实例jQuery全屏带缩略图渐变切换焦点图插件

引入核心文件

<script src="http://libs.useso.com/js/jquery/1.10.2/jquery.min.js" ></script>
<script src="js/jqcool.js"></script>

构建html

<div class="slide banner" data-slide='{"action":"click","fn":"banner_ext","time":"3000"}'>
	<div class="ban_c album"><a href="#"><img src="images/20140225171729652.jpg" alt="美国展" /></a></div>
	<div class="ban_c album"><a href="#"><img src="images/20140113173751727.jpg" alt="国家科技奖" /></a></div>
	<div class="ban_c album"><a href="#"><img src="images/2013123109501990.jpg" alt="网站新精彩" /></a></div>
</div>
<div class="wrap bann_ext">
	<ul class="l frontCover"></ul>
</div>

通过data-slide属性设定插件的参数:

action":"click"使用的切换的方式,默认值是mouseouver

"fn":"banner_ext" 存放缩略图的句柄

"time":"3000"  播放的间格时间

"fade":"true"  是用渐变

"auto:true"  自动播放

CSS相对较简单,在些就不多介绍了,请参考实例。

转载请注明:jQ酷 » jQuery全屏带缩略图渐变切换焦点图插件

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。