\u4ee5\u524d\u505a\u8fc7\u4e2a\u9879\u76ee\uff0c\u9700\u6c42\u662f\u505a\u4e00\u4e2a\u56fe\u7247\u96c6\uff08\u56fe\u7247\u76f8\u518c\uff09\uff0c\u5176\u4e2d\u6709\u4e2a\u5c0f\u529f\u80fd\u662f\u5e95\u90e8\u5e26\u62d6\u52a8\u6309\u94ae\uff0c\u62d6\u52a8\u6309\u94ae\u76f8\u518c\u5217\u8868\u4e00\u8d77\u6eda\u52a8\u3002\u5f53\u521d\u5355\u72ec\u505a\u4e2a\u62d6\u52a8\u6309\u94ae\u6ca1\u4ec0\u4e48\u95ee\u9898\uff0c\u95ee\u9898\u4e0d\u77e5\u9053\u600e\u4e48\u8ba9\u4e0a\u9762\u7684\u5185\u5bb9\u968f\u7740\u8fd9\u6eda\u52a8\u6761\u4e00\u8d77\u7b49\u6bd4\u4f8b\u7684\u6eda\u52a8\uff0c\u540e\u6765\u8fd9\u5757\u662f\u7531\u6211\u540c\u4e8b\u5e2e\u5fd9\u5199\u7684\u3002\u6240\u4ee5\u7a7a\u4e0b\u6765\u4fbf\u7814\u7a76\u4e00\u4e0b\uff0c\u628a\u601d\u8def\u7406\u6e05\u81ea\u5df1\u5199\u4e2a\u8bd5\u8bd5\uff0c\u7ed3\u679c\u6bd4\u60f3\u8c61\u4e2d\u7684\u8981\u7b80\u5355\u5f88\u591a\u3002<\/p>\n
\u5f53\u524d\u7248\u672c\uff1av1.2<\/span> HTML CODE\uff1a<\/strong><\/p>\n CSS CODE\uff1a<\/strong><\/p>\n JQUERY CODE\uff1a<\/strong><\/p>\n \u66f4\u65b0\u65e5\u5fd7\uff1a Demo<\/a>Download<\/a>Github<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" \u4ee5\u524d\u505a\u8fc7\u4e2a\u9879\u76ee\uff0c\u9700\u6c42\u662f\u505a\u4e00\u4e2a\u56fe\u7247\u96c6\uff08\u56fe\u7247\u76f8\u518c\uff09\uff0c\u5176\u4e2d\u6709\u4e2a\u5c0f\u529f\u80fd\u662f\u5e95\u90e8\u5e26\u62d6\u52a8\u6309\u94ae\uff0c\u62d6\u52a8\u6309\u94ae\u76f8\u518c\u5217\u8868\u4e00\u8d77\u6eda\u52a8\u3002\u5f53\u521d\u5355\u72ec\u505a\u4e2a\u62d6\u52a8\u6309\u94ae\u6ca1\u4ec0\u4e48\u95ee\u9898\uff0c\u95ee\u9898\u4e0d\u77e5\u9053\u600e\u4e48\u8ba9\u4e0a\u9762\u7684\u5185\u5bb9\u968f\u7740\u8fd9\u6eda\u52a8\u6761\u4e00\u8d77\u7b49\u6bd4\u4f8b\u7684\u6eda\u52a8\uff0c\u540e\u6765\u8fd9\u5757\u662f\u7531\u6211\u540c\u4e8b\u5e2e\u5fd9\u5199\u7684\u3002\u6240\u4ee5\u7a7a\u4e0b\u6765\u4fbf\u7814\u7a76\u4e00\u4e0b\uff0c\u628a\u601d\u8def\u7406\u6e05\u81ea\u5df1\u5199\u4e2a\u8bd5\u8bd5\uff0c\u7ed3\u679c\u6bd4\u60f3\u8c61\u4e2d\u7684\u8981\u7b80\u5355\u5f88\u591a\u3002 \u5f53\u524d\u7248\u672c\uff1av1.2 \u517c\u5bb9\uff1aIE6+\u3001Firefox\u3001Chrome\u3001Safair<\/p>\n","protected":false},"author":1,"featured_media":668,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[75],"tags":[76,71,109],"class_list":["post-666","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end","tag-css3","tag-jquery","tag-slider"],"_links":{"self":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/666"}],"collection":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/comments?post=666"}],"version-history":[{"count":0,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/666\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media\/668"}],"wp:attachment":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media?parent=666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/categories?post=666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/tags?post=666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\u517c\u5bb9\uff1aIE6+\u3001Firefox\u3001Chrome\u3001Safair<\/p>\n<\/pre>\r\n<div id="gallery">\r\n<div id="galleryArea">\r\n<ul id="galleryCon">\r\n\t<li><a href="#"><img alt="" src="images\/img1.jpg" \/><\/a><\/li>\r\n\t<li><a href="#"><img alt="" src="images\/img2.jpg" \/><\/a><\/li>\r\n\t<li><a href="#"><img alt="" src="images\/img3.jpg" \/><\/a><\/li>\r\n\t<li><a href="#"><img alt="" src="images\/img4.jpg" \/><\/a><\/li>\r\n\t<li><a href="#"><img alt="" src="images\/img5.jpg" \/><\/a><\/li>\r\n\t<li><a href="#"><img alt="" src="images\/img6.jpg" \/><\/a><\/li>\r\n\t<li><a href="#"><img alt="" src="images\/img7.jpg" \/><\/a><\/li>\r\n\t<li><a href="#"><img alt="" src="images\/img8.jpg" \/><\/a><\/li>\r\n\t<li><a href="#"><img alt="" src="images\/img9.jpg" \/><\/a><\/li>\r\n\t<li><a href="#"><img alt="" src="images\/img10.jpg" \/><\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div id="scrollbar"><a id="scrollBtn" href="javascript:;"><\/a>\r\n<div id="scrollBg"><\/div>\r\n<\/div>\r\n <a id="prevBtn" href="javascript:;"><\/a>\r\n <a id="nextBtn" href="javascript:;"><\/a><\/div>\r\n<pre>\r\n<\/pre>\n
\r\nbody{\r\n\tbackground:url(..\/images\/body_bg.png);\r\n}\r\n#gallery{\r\n\tposition:absolute; top:50%; left:50%;\r\n\twidth:1320px;\r\n\tmargin:-125px 0 0 -672px;\r\n}\r\n#galleryArea{\r\n\twidth:100%;\r\n\toverflow:hidden;\r\n}\r\n#galleryCon{\r\n\theight:154px;\r\n\tpadding:13px 0;\r\n\tmargin-bottom:50px;\r\n\tbackground-color:#1D1D1F;\r\n \tbackground:-webkit-linear-gradient(top, #27252A 0%, #232027 50%, #1D1D1F 50%, #1B1B1D 100%);\r\n \tbox-shadow:0 1px 3px rgba(0,0,0,0.5),inset 0 1px 0 #37343B;\r\n\toverflow:hidden;\r\n}\r\n#galleryCon li{\r\n\tfloat:left;\r\n\tdisplay:inline;\r\n\tmargin:0 10px;\r\n\tborder:2px solid #37343B;\r\n}\r\n#galleryCon li img{\r\n\tdisplay:block;\r\n\twidth:240px; height:150px;\r\n}\r\n#scrollbar{\r\n\tposition:relative;\r\n\twidth:500px; height:7px;\r\n\tmargin:0 auto 13px auto;\r\n\tbackground:#1A1819;\r\n\tbox-shadow:inset 0 0 5px #0F0D12;\r\n\tborder-radius:6px;\r\n}\r\n#scrollBtn{\r\n\tdisplay:block;\r\n\tposition:absolute; top:-10px; left:0;\r\n\tmargin-left:0;\r\n\twidth:23px; height:23px;\r\n\tcursor:pointer;\r\n\tborder:2px solid #151318;\r\n\tbackground-color:#1B1B1D;\r\n\tbackground:-webkit-linear-gradient(top, #27252A 0%, #232027 50%, #1D1D1F 50%, #1B1B1D 100%);\r\n}\r\n#scrollBg{\r\n\tposition:absolute; top:0; left:0;\r\n\theight:7px;\r\n\tbackground-color:#6B32B5;\r\n\tbackground:-webkit-linear-gradient(top, #7532BD, #432364);\r\n\tborder-radius:6px 0 0 6px;\r\n\toverflow:hidden;\r\n}\r\n#scrollBtn:before{\r\n\tcontent:'';\r\n\tposition:absolute; top:7px; left:7px;\r\n\twidth:9px; height:9px;\r\n\tbackground-color:#514559;\r\n}\r\n#scrollBtn:hover{\r\n\tbox-shadow:0 0 10px #7337BB;\r\n}\r\n#scrollBtn:hover:before{ \/* IE10\u4e0d\u652f\u6301\u8be5\u65b9\u6cd5 *\/\r\n\tbackground-color:#CE9CE1;\r\n\tbox-shadow:0 0 5px #7337BB;\r\n}\r\n\r\n\/* \u6269\u5c55 *\/\r\n#prevBtn, #nextBtn{\r\n\tdisplay:block;\r\n\tposition:absolute; top:68px;\r\n\twidth:40px; height:40px;\r\n\tborder:2px solid #151318;\r\n\tbox-shadow:inset 0 1px 0 #37343B;\r\n\tbackground-color:#1B1B1D;\r\n\tbackground:-webkit-linear-gradient(top, #27252A 0%, #232027 50%, #1D1D1F 50%, #1B1B1D 100%);\r\n}\r\n#prevBtn{\r\n\tleft:-50px;\r\n}\r\n#nextBtn{\r\n\tright:-50px;\r\n}\r\n#prevBtn:before, #nextBtn:before{\r\n\tcontent:'';\r\n\tposition:absolute; top:10px;\r\n\twidth:0; height:0;\r\n\tborder-top:10px solid transparent;\r\n\tborder-bottom:10px solid transparent;\r\n}\r\n#prevBtn:before{\r\n\tleft:14px;\r\n\tborder-right:10px solid #514559;\r\n}\r\n#nextBtn:before{\r\n\tright:14px;\r\n\tborder-left:10px solid #514559; \r\n}\r\n#prevBtn:hover:before{\r\n\tborder-right:10px solid #CE9CE1;\r\n\t-webkit-filter:drop-shadow(0 1px 8px #7337BB);\r\n}\r\n#nextBtn:hover:before{\r\n\tborder-left:10px solid #CE9CE1;\r\n\t-webkit-filter:drop-shadow(0 1px 8px #7337BB);\r\n}\r\n<\/pre>\n\r\n(function($){\r\n\t\/*!\r\n\t* jQuery Slider Gallery Can Drap\r\n\t* Copyright (c) 2013, \u68a6\u5e7b\u795e\u5316\r\n\t* Create: 2013.07.12\r\n\t* Version: 1.1\r\n\t* Update: 1. \u652f\u6301\u9f20\u6807\u6eda\u8f6e\u6eda\u52a8 2. \u6539\u6210\u63d2\u4ef6\u5f62\u5f0f 3. \u517c\u5bb9IE6+ \uff082013-12-26\uff09\r\n\t*\r\n\t* \u8bf7\u4fdd\u7559\u6b64\u4fe1\u606f\uff0c\u5982\u679c\u60a8\u6709\u4fee\u6539\u6216\u610f\u89c1\u53ef\u901a\u8fc7\u7f51\u7ad9\u7ed9\u6211\u7559\u8a00\r\n\t* http:\/\/www.bluesdream.com\r\n\t*\/\r\n\t$(function() {\r\n\t\/* \u9ed8\u8ba4\uff1a\u62d6\u52a8\u6eda\u52a8 *\/\r\n\tvar $startX\t\t\t\t\t= 0,\r\n\t\t$startMargin\t\t\t= 0,\r\n\t\t$gallery \t\t\t\t= $("#gallery"),\t\t\t\t\t\t\t\t\t\t\/\/ \u5bb9\u5668\r\n\t\t$galleryCon \t\t\t= $("#galleryCon"),\t\t\t\t\t\t\t\t\t\/\/ \u5185\u5bb9\u533a\u57df(\u6eda\u52a8\u533a\u57df)\r\n\t\t$scrollBtn \t\t\t\t= $("#scrollBtn"),\t\t\t\t\t\t\t\t\t\/\/ \u62d6\u52a8\u6309\u94ae\r\n\t\t$scrollBg\t\t\t\t= $("#scrollBg"),\t\t\t\t\t\t\t\t\t\/\/ \u6309\u94ae\u80cc\u666f\r\n\t\t$galleryList \t\t\t= $galleryCon.children("li"),\t\t\t\t\t\t\/\/ \u56fe\u7247\u5217\u8868\r\n\t\t$galleryList_len\t\t\t= $galleryList.length,\t\t\t\t\t\t\t\t\/\/ \u56fe\u7247\u6570\u91cf\r\n\t\t$gallery_width\t\t\t= $gallery.width(),\t\t\t\t\t\t\t\t\t\/\/ \u5bb9\u5668\u7684\u5bbd\u5ea6\r\n\t\t$galleryList_width\t\t= $galleryList.outerWidth(true),\t\t\t\t\t\/\/ \u5355\u5f20\u56fe\u7247\u533a\u57df\u7684\u603b\u5bbd\r\n\t\t$galleryList_count\t\t= $galleryList_width*$galleryList_len,\t\t\t\t\/\/ \u5185\u5bb9\u5bbd\u5ea6(\u6240\u6709\u56fe\u7247\u7684\u5bbd\u5ea6\u603b\u548c)\r\n\t\t$scrollbar_wdith\t\t= $("#scrollbar").outerWidth(),\t\t\t\t\t\t\/\/ \u6eda\u52a8\u6761\u5bbd\u5ea6\r\n\t\t$scrollBtn_wdith\t\t= $scrollBtn.outerWidth(true),\t\t\t\t\t\t\/\/ \u62d6\u52a8\u6309\u94ae\u5bbd\u5ea6\r\n\t\t$scroll_width\t\t\t= $scrollbar_wdith-$scrollBtn_wdith,\t\t\t\t\/\/ \u6eda\u52a8\u6761\u62d6\u52a8\u8303\u56f4\r\n\t\t$galleryList_max \t\t= Math.ceil( $galleryList_len-$gallery_width\/$galleryList_width ); \/\/ \u5217\u8868\u6700\u5927\u6570\u91cf\r\n\t\t$gallery_index\t\t\t= $gallery[$gallery.index()];\t\t\t\t\t\t\t\/\/ \u4fbf\u4e8e\u540e\u7eed\u6269\u5c55\r\n\r\n\t\/\/ \u521d\u59cb\u5316\r\n\t$galleryCon.css('width',$galleryList_count);\r\n\r\n\t\/\/ \u6eda\u52a8\u4ee3\u7801\r\n\tfunction scrollTo(distance){\r\n\t\tif(distance<0) distance=0;\r\n\t\tif(distance>$scroll_width) distance=$scroll_width;\r\n\t\tvar pos=-Math.ceil((distance\/$scroll_width)*($galleryList_count-$gallery_width)); \/\/ \u5411\u4e0a\u53d6\u6574( ( \u6309\u94ae\u62d6\u52a8\u8ddd\u79bb\/\u6eda\u52a8\u6761\u62d6\u52a8\u8303\u56f4 ) * ( \u5185\u5bb9\u5bbd\u5ea6\/\u5bb9\u5668\u7684\u5bbd\u5ea6 ) )\r\n\t\t$galleryCon.css('marginLeft',pos);\r\n\t\t$scrollBtn.css('marginLeft',distance);\r\n\t\t$scrollBg.css('width',distance);\r\n\t}\r\n\r\n\t$scrollBtn.on('mousedown',function(e){\r\n\t\tvar $startX=e.clientX,\r\n\t\t\t$startMargin=parseInt($scrollBtn.css('marginLeft').replace('px',''));\r\n\t\te.preventDefault();\r\n\t\t$(document).on('mousemove',function(e){\r\n\t\t\tvar distance=e.clientX-$startX+$startMargin;\r\n\t\t\tscrollTo(distance);\r\n\t\t\twindow.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); \/\/\u7981\u6b62\u62d6\u653e\u5bf9\u8c61\u6587\u672c\u88ab\u9009\u62e9\u7684\u65b9\u6cd5 \u652f\u6301\uff1aChrome\u3001Firefox\u3001Opera\u3001Safari\r\n\t\t\twindow.event.returnValue = false; \/\/\u9488\u5bf9 IE\r\n\t\t}).on('mouseup',function() {\r\n\t\t\t$(this).off('mousemove');\r\n\t\t});\r\n\t});\r\n\t\/* \u9ed8\u8ba4\u7ed3\u675f *\/\r\n\r\n\t\/* \u6269\u5c551\uff1a\u5de6\u53f3\u70b9\u51fb\u6eda\u52a8 *\/\r\n\tvar $step = 0,\r\n\t\t$prevBtn = $("#prevBtn"),\r\n\t\t$nextBtn = $("#nextBtn");\r\n\r\n\tfunction prevScroll(){\r\n\t\tif ( !$galleryCon.is(":animated") ) {\r\n\t\t\t$step = -parseInt($galleryCon.css("marginLeft"))\/$galleryList_width;\r\n\t\t\tif ( $step > 0 ) {\r\n\t\t\t\t$step--\r\n\t\t\t\tbarScrollTo( $galleryList_max,$step );\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\tfunction nextScroll(){\r\n\t\tif ( !$galleryCon.is(":animated") ) {\r\n\t\t\t$step = -parseInt($galleryCon.css("marginLeft"))\/$galleryList_width;\r\n\t\t\tif ( $step < $galleryList_max ) {\r\n\t\t\t\t$step++\r\n\t\t\t\tbarScrollTo( $galleryList_max,$step );\r\n\t\t\t};\r\n\t\t}\r\n\t}\r\n\r\n\t$prevBtn.click(function(){\r\n\t\tprevScroll();\r\n\t});\r\n\t$nextBtn.click(function(){\r\n\t\tnextScroll();\r\n\t});\r\n\tfunction barScrollTo(over,step){\r\n\t\tvar posBtn = Math.ceil( $scroll_width\/over*step );\r\n\t\tvar posArea = -Math.ceil( ($galleryList_count-$gallery_width)\/over*step );\r\n\t\t$scrollBtn.animate({'marginLeft':posBtn});\r\n\t\t$scrollBg.animate({'width':posBtn});\r\n\t\t$galleryCon.animate({'marginLeft':posArea});\r\n\t}\r\n\t\/* \u6269\u5c55\u7ed3\u675f *\/\r\n\r\n\t\/* \u6269\u5c552\uff1a\u9f20\u6807\u6eda\u8f6e\u6eda\u52a8 *\/\r\n\tfunction mousewheel(e) {\r\n\t\tvar e=e || window.event,\r\n\t\t\twheelDelta = e.wheelDelta || e.detail;\r\n\t\tif( wheelDelta == 120 || wheelDelta == -3 ){\r\n\t\t\tprevScroll();\r\n\t\t}else if( wheelDelta == -120 || wheelDelta == 3 ){\r\n\t\t\tnextScroll();\r\n\t\t}\r\n\t}\r\n\tif( $gallery_index.addEventListener ){\r\n\t\t$gallery_index.addEventListener('DOMMouseScroll',mousewheel,false); \/\/ Firefox\r\n\t}\r\n\t$gallery_index.onmousewheel=mousewheel; \/\/ IE\/Opera\/Chrome\r\n\t\/* \u6269\u5c55\u7ed3\u675f *\/\r\n\r\n\t});\r\n}(jQuery));\r\n<\/pre>\n
\n2013.12.26 v1.1\uff081.\u652f\u6301\u9f20\u6807\u6eda\u8f6e\u6eda\u52a8\uff09
\n2014.03.19 v1.2\uff081.\u517c\u5bb9IE6\u30017\uff09<\/p>\n