您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQuery特效 > jQuery焦点图幻灯片特效 > 正文

响应式图片切换jQuery焦点图选项卡特效

2015-04-18 10:04:31 作者:天外飞仙 人气:779 Views

响应式图片切换jQuery焦点图选项卡特效
20150416220544
部分jquery代码

$(".slider-scroll").hover(function() { clearInterval($picTimer);},function() { $picTimer = setInterval(function() { if (index == $len - 1) { index = 0; } else { index += 1; } $("#" + $objId).find("ul li").removeClass("on"); $("#" + $objId).find("ul li").eq(index).addClass("on"); $("#" + $showArea).find("img").css({ "display": "none", "opacity": "0.3" }); $("#" + $showArea).find("img").eq(index).css({ "display": "block" }).stop(true, false).animate({ "opacity": "1" }, 500); }, opts.interval); // 自动播放的间隔,单位:毫秒 }).trigger("mouseleave");function showimg(index) { if (index == $len) { index = 0; } $("#" + $objId).find("ul li").removeClass("on"); $("#" + $objId).find("ul li").eq(index).addClass("on"); $("#" + $showArea).find("img").css({ "display": "none", "opacity": "0.3" }); $("#" + $showArea).find("img").eq(index).css({ "display": "block" }).stop(true, false).animate({ "opacity": "1" }, 500); index += 1;}

下载地址
预览地址

链接:http://www.jqueryba.com/5523.html(转载时请注明本文出处及文章链接)

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!