(function($) { $.fn.slidePicture = function(options) { var ops = $.extend({}, $.fn.slidePicture.defaults, options); return this.each(function() { $this = $(this); var opts = $.meta ? $.extend({}, ops, $(this).data()) : ops; var num = opts.num; var ul = $this.find("ul"); var lifirst = ul.find("li:first"); var liwidth = lifirst.width(); var liheight = lifirst.height(); // img个数 var size = ul.find("li img").size(); // 从第num个往后，都不显示 ul.find("li:gt(" + (num - 1) + ") img,li:gt(" + (num - 1) + ")") .css({ 'display' : 'none' }); // 创建向前按钮 var left_prevous = $("<div id=\"left_prevous\" class=\"pnLi\"><</div>"); // 创建向后按钮 var right_next = $("<div id=\"right_next\" class=\"pnLi\">></div>"); // 添加到div上 $this.before(left_prevous); $this.after(right_next); // div父容器的宽度，高度，偏移量 var dwidth, dheight = $this.height(), dposition = $this.offset(); left_prevous.css({ 'top' : dposition.top + ((dheight - left_prevous.height()) / 2) + "px", 'left' : dposition.left + "px" }); right_next.css({ 'top' : dposition.top + ((dheight - right_next.height()) / 2) + "px", 'display' : 'none' }); /** * chrome浏览器下，父div的内容没有加载完，取得的宽度没有被撑开 * (http://jaykong.blog.163.com/blog/static/8895412010428111617633/) * 设置一下延迟加载右侧按钮的左偏移,100毫秒足够 */ setTimeout(function() { dwidth = $this.width(); right_next.css({ 'left' : dposition.left + parseInt(dwidth - right_next.width()) + "px", 'display' : 'block' }); }, 100); // 隐藏及显示 function fade(fadeOut, fadeIn) { fadeOut.css({ 'display' : 'none' }); fadeIn.css({ 'display' : 'block' }); } // 左侧的index从0开始 var first = 0; // 右侧的index从num开始 var last = num; // 是否前向滚动结束,false表示结束 var firstEnd = false; // 是否后向滚动结束，false表示结束 var lastEnd = false; // 前一个操作是否前滚动,false表示否 var doPrevous = false; // 前一个操作是否后滚动，false表示否 var doNext = false; // 前滚动事件 left_prevous.bind("click", function() { // 前滚动没有结束 if (firstEnd == false) { // 前一个操作是后滚动 if (doNext == true) { last = last; first = first; } // 前一个操作时前滚动，因此前后索引都各自加1 if (doPrevous == true) { last = last - 1; first = first - 1; } fade( ul.find("li:eq(" + last + ") img,li:eq(" + last + ")"), ul.find("li:eq(" + first + ") img,li:eq(" + first + ")")); // 0表示前滚动结束 if (first == 0) { firstEnd = true; doNext = false; } else { doNext = false; } lastEnd = false; doPrevous = true; } }); // 后滚动事件 right_next.bind("click", function() { if (lastEnd == false) { if (doPrevous == true) { last = last; first = first; } if (doNext == true) { last = last + 1; first = first + 1; } fade(ul.find("li:eq(" + first + ") img,li:eq(" + first + ")"), ul.find("li:eq(" + last + ") img,li:eq(" + last + ")")); if (last == size - 1) { lastEnd = true; doPrevous = false; } else { doPrevous = false; } firstEnd = false; doNext = true; } }); }); } $.fn.slidePicture.defaults = { num : 3 }; })(jQuery);
需要的css样式，css样式可以自调:
body { background-color: #ddd; margin: 0; } .pic { position: absolute; left: 400px; top: 300px; background: #666666; border: 5px solid #666666; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; list-style: none; } .pic ul { padding-left: 60px; padding-right: 60px; margin: 0px; list-style-type: none; } .pic ul li { float: left; margin-top: 10px; margin-bottom: 1px; margin-left: 0px; margin-right: 2px; height: 135px; z-index: 10; } .pnLi { width: 30px; height: 135px; vertical-align: middle; text-align: center; line-height: 135px; font-size: 4.5em; font-weight: 900; position: absolute; z-index: 20; } .pnLi:hover { color: #fff; text-shadow: 0px 0px 3px #333; cursor: pointer; } .singleImg { position: relative; z-index: 10; vertical-align: bottom; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 4px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; box-shadow: 0 1px 5px rgba(0, 0, 0, .5); -mozbox-shadow: 0 1px 5px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .5); opacity: 0.7; } .singleImg:hover { opacity: 1; box-shadow: 0 1px 5px rgb(255, 255, 255); -mozbox-shadow: 0 1px 5px rgb(255, 255, 255); -webkit-box-shadow: 0 1px 5px rgb(255, 255, 255); }
页面调用方法:
<script type="text/javascript"> $(document).ready(function(){ var totalNum=$("pic ul li img").size(); var first=0; $("img").load(function(){ first++; }); if(first==totalNum){ $(".pic").slidePicture(); } }); </script>
这样调用有一个原因，当图片一个一个加载时，原有的父div会随着图片的一个一个加载而慢慢变大，我们的效果是希望父的div的大小不发生变化,所以需要利用load图片加载来制作一个计数器，当数值与图片的个数相等的时候，渲染整个插件。
<body> <div class="pic"> <ul> <li class="imgLi"> <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/f2fcb01.jpg" alt="" class="singleImg"> </a> </li> <li class="imgLi"> <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/b8def93.jpg" alt="" class="singleImg"> </a> </li> <li class="imgLi"> <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/f2fcb02.jpg" alt="" class="singleImg"> </a> </li> <li class="imgLi"> <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/e16ac0.jpg" alt="" class="singleImg"> </a> </li> <li class="imgLi"> <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/261f104.jpg" alt="" class="singleImg"> </a> </li> <li class="imgLi"> <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/261f102.jpg" alt="" class="singleImg"> </a> </li> <li class="imgLi"> <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/32e0012.jpg" alt="" class="singleImg"> </a> </li> <li class="imgLi"> <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/32e0011.jpg" alt="" class="singleImg"> </a> </li> </ul> </div> </body>
效果图如下：
467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
