一个带百叶窗焦点图片的jQuery插件源码发布
2014-02-05 11:04
711 查看
实现了百叶窗、左右、上下的焦点图片切换,兼容IE 6-10 ,firefox,chorme.
源码下载地址:http://download.csdn.net/detail/aofengdaxia/6898081
插入几种效果:
主要代码:
源码下载地址:http://download.csdn.net/detail/aofengdaxia/6898081
源码下载地址:http://download.csdn.net/detail/aofengdaxia/6898081
插入几种效果:
主要代码:
/** * Created by aofengdaxia on 14-2-4. */ (function ($) { $.fn.slider = function (option) { var defaults = { stay: 3000, type: "box", speed: 600, direction: "leftRight", rowNum: 5, columnNum: 10, boxOut: { width: "0px", height: "0px", opacity: "0"} } var index = 0; var next = 1; var timer; var opt = $.extend(defaults, option); var stage = $(this); var sw = stage.width(); var sh = stage.height(); var pics = stage.children("img"); if ($(this).length > 1) { pics.hide(); alert("please config the slider pic. make sure single object"); return; } stage.html(""); if (opt.direction != "leftRight" && opt.type != "box") { stage.html("<div style='width: " + sw + "px; height: " + sh + "px; overflow: hidden;'><div class='tbStage' style=' overflow:hidden; '></div></div>"); stage.find(".tbStage").append(pics); pics.css("float", "left"); } else { stage.append(pics); stage.css("white-space", "nowrap"); } var totalNum = pics.length; stage.css("overflow", "hidden"); pics.css("width", sw + "px"); pics.css("height", sh + "px"); if (opt.type == "box") { pics.hide(); stage.append("<div style=' width: " + sw + "px; height: " + sh + "px; overflow:hidden;' class='slider1'></div>"); stage.append("<div style=' position: absolute; width: " + sw + "px; height: " + sh + "px; overflow:hidden; " + "margin-top:-" + sh + "px;' class='slider2'></div>") stage.find(".slider1").html("<img src='" + pics.eq(index).attr("src") + "' " + "style='width:" + sw + "px; height:" + sh + "px' />"); stage.find(".slider1").css("z-index", "0"); stage.find(".Slider2").css("z-index", "1"); } addBtn(); addTimer(); stage.find(".tPager").click(function () { clearInterval(timer); var nIndex = $(this).attr("index"); change(index, nIndex); index = nIndex; addTimer(); }); function addBtn() { var pl = pics.length; var html = ""; html += "<div style=' margin-top: -30px; margin-left: " + (sw - pl * 25 - 30) + "px; height: 20px; position: absolute; z-index: 9999'>" for (var i = 0; i < pl; i++) { html += "<span class='tPager' index='" + i + "' style='cursor:pointer; display: block; width: 15px; height: 15px; float: left; margin-left: 10px; background-color: aquamarine'></span>" } html += "</div>" stage.append(html); } function addTimer() { timer = setInterval(function () { next = parseInt(index) + 1; if (next >= totalNum) { next = 0; } change(index, next); index = next; }, opt.stay); } function change(i, n) { if (opt.type == "box") { stage.find(".slider1").html("<img src='" + pics.eq(n).attr("src") + "' style='width:" + sw + "px; height:" + sh + "px' />"); MakeBoxes(pics.eq(i)); $(".boxes").each(function () { $(this).animate(opt.boxOut, opt.speed); }); } else { MoveTo(i, n); } stage.find(".tPager[index=" + i + "]").css("border", "0px solid black").css("backgroundColor", "aquamarine"); stage.find(".tPager[index=" + n + "]").css("border", "1px solid red").css("backgroundColor", "red"); } function MakeBoxes(obj) { var r = opt.rowNum; var c = opt.columnNum; var bw = Math.round(sw / c); var bh = Math.round(sw / r); var htmls = ""; var ii = 0; for (var j = 0; j < r; j++) { for (var i = 0; i < c; i++) { var ml = -1 * bw * i; var mt = -1 * bh * j; htmls += "<div style='position: absolute; margin-left: " + (-1 * ml) + "px; " + "margin-top: " + (-1 * mt) + "px; width: " + bw + "px; height: " + bh + "px; overflow: hidden; float: left; z-index:1'" + " class='boxes' index=" + ii + ">" htmls += "<img src='" + obj.attr("src") + "' style='margin-left: " + ml + "px; margin-top:" + mt + "px; width: " + sw + "px; height: " + sh + "px; z-index:1;' />"; htmls += "</div>" ii++; } } stage.find(".slider2").html(htmls) } function MoveTo(i, n) { if (opt.direction == "leftRight") { var ml = -1 * n * sw; pics.eq(0).animate({ marginLeft: ml + "px"}, opt.speed); } else { var mt = -1 * n * sh; stage.find(".tbStage").animate({ marginTop: mt + "px"}, opt.speed); } } } })(jQuery);使用方法
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="Script/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="Slider.js"></script> <link href="main.css" type="text/css"/> <script type="text/javascript"> $(document).ready(function () { $(".focus").slider({ type:"move", direction:"leftRight",stay:4000}); $(".focus2").slider({ type:"move", direction:"topBottom",stay:3000}); $(".focus3").slider({ type:"box", columnNum:30, rowNum:20,stay:2000}); }); </script> </head> <body> <div class="focus" style="width: 660px; height: 300px; margin:0 auto; "> <img src="images/1.jpg"/> <img src="images/2.jpg"/> <img src="images/3.jpg"/> <img src="images/4.jpg"/> <img src="images/5.jpg"/> <img src="images/6.jpg"/> </div> <div class="focus2" style="width: 660px; height: 300px; margin:0 auto; "> <img src="images/1.jpg"/> <img src="images/2.jpg"/> <img src="images/3.jpg"/> <img src="images/4.jpg"/> <img src="images/5.jpg"/> <img src="images/6.jpg"/> </div> <div class="focus3" style="width: 660px; height: 300px; margin:0 auto; "> <img src="images/1.jpg"/> <img src="images/2.jpg"/> <img src="images/3.jpg"/> <img src="images/4.jpg"/> <img src="images/5.jpg"/> <img src="images/6.jpg"/> </div> </body> </html>
源码下载地址:http://download.csdn.net/detail/aofengdaxia/6898081
相关文章推荐
- 利用Jquery制作一个广告图片展示-附源码(VS2010版本)
- 发布一个很COOL的图片验证码程序[含源码]
- jquery带进度条的焦点图片特效插件
- 发布一个图片库轮显WebPart (源码)
- 基于jquery的一个图片hover的插件
- [jQuery]一个图片切换的插件
- PicView一个依赖JQuery的图片预览插件
- jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
- 发布一个很COOL的图片验证码程序[含源码]
- jQuery的图片滑块焦点图插件整理推荐
- 推荐一个jQuery弹出模态窗口的插件(源码下载)
- [发布]LinScroll (jquery插件) (用图片自定义滚动条)
- 一款基于jQuery的图片分组切换焦点图插件
- jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
- 介绍一个十分好用的JQUERY图片放大镜插件
- jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
- jCutter,一个图片hover的jQuery插件
- [原创]jPagerBar1.2发布(一个适合Ajax+JSON+jQuery环境使用的多功能页码栏插件)(Demo、源文件下载已更新)
- 【示例代码】3D旋转图片立体展示jquery幻灯片插件(附源码)