图片左右滚动效果
一个图片左右滚动的效果,如果滚动到结尾或者开头时,再点击切换则切换到第一张后缀最后一张,省略中间图片的滚动,直接是首位2张图片滚动的效果。
源代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片左右滚动效果</title> <style type="text/css"> .newlistdiv { width:565px; height:200px; padding:0 40px; position:relative; float:left;} .newlistdiv .btnLeft { width:25px; height:40px; background:url(images/btnLeft.jpg) no-repeat; position:absolute; left:0px; top:80px;} .newlistdiv .btnRight { width:25px; height:40px; background:url(images/btnRight.jpg) no-repeat; position:absolute; right:0px; top:80px;} .newcnt { width:565px; height:200px; position:relative; overflow:hidden; } .newcnt .newlist { width:800%; height:200px; position:absolute; top:0; left:0;} .newlist .newtextall { width:565px; float:left; position:relative; z-index:0;height:200px;} </style> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> jQuery(function () { jQuery.fn.news = function (parent_div, page_size) { var positionleft = 0; var o = jQuery(this).find(parent_div); var w = o.width(); var showbox = jQuery(this).find('.newlist'); var len = showbox.find('.newtextall').length; var page_count = Math.ceil(len / page_size); showbox.width(w * page_count); var midItem = showbox.find('.newtextall').slice(1, len - 1); //中间元素 midItem.css('font-weight', 'bold') //向左滚动 jQuery(this).find('.btnLeft').click(function () { if (!showbox.is(':animated')) { if (positionleft == 0) { positionleft = positionleft - w * (page_count - 1); midItem.hide(); //隐藏中间的 showbox.animate({ left: -w }, 500, function () { showbox.css('left', positionleft); midItem.show(); /*动画结束后再显示出来*/ }); } else { positionleft = positionleft + w showbox.animate({ left: positionleft }, 500); } } }); //向右滚动 jQuery(this).find('.btnRight').click(function () { if (!showbox.is(':animated')) { if (positionleft == -w * (page_count - 1)) { positionleft = 0; midItem.hide(); //隐藏中间的 showbox.css('left', -w); //要重设left的位置 showbox.animate({ left: 0 }, 500, function () { midItem.show(); }); } else { positionleft = positionleft - w; showbox.animate({ left: positionleft }, 500); } } }); } jQuery(".newlistdiv").each(function () { jQuery(this).news('.newcnt', 1); }); }) </script> </head> <body> <div class="newlistdiv"> <div class="btnLeft">L</div> <div class="btnRight">R</div> <div class="newcnt"> <div class="newlist"> <div class="newtextall" style="background:#666666"> 1 </div> <div class="newtextall" style="background:#777777">2 </div> <div class="newtextall" style="background:#888888">3 </div> <div class="newtextall" style="background:#999999">4 </div> <div class="newtextall" style="background:#aaaaaa">5 </div> </div> </div> </div> </body> </html>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:图片左右滚动效果