jQuery Slider Gallery（滑动相册带拖动按钮）

以前做过个项目，需求是做一个图片集（图片相册），其中有个小功能是底部带拖动按钮，拖动按钮相册列表一起滚动。当初单独做个拖动按钮没什么问题，问题不知道怎么让上面的内容随着这滚动条一起等比例的滚动，后来这块是由我同事帮忙写的。所以空下来便研究一下，把思路理清自己写个试试，结果比想象中的要简单很多。

当前版本：v1.2
兼容：IE6+、Firefox、Chrome、Safair

HTML CODE：

</pre>
<div id="gallery">
<div id="galleryArea">
<ul id="galleryCon">
	<li><a href="#"><img alt="" src="images/img1.jpg" /></a></li>
	<li><a href="#"><img alt="" src="images/img2.jpg" /></a></li>
	<li><a href="#"><img alt="" src="images/img3.jpg" /></a></li>
	<li><a href="#"><img alt="" src="images/img4.jpg" /></a></li>
	<li><a href="#"><img alt="" src="images/img5.jpg" /></a></li>
	<li><a href="#"><img alt="" src="images/img6.jpg" /></a></li>
	<li><a href="#"><img alt="" src="images/img7.jpg" /></a></li>
	<li><a href="#"><img alt="" src="images/img8.jpg" /></a></li>
	<li><a href="#"><img alt="" src="images/img9.jpg" /></a></li>
	<li><a href="#"><img alt="" src="images/img10.jpg" /></a></li>
</ul>
</div>
<div id="scrollbar"><a id="scrollBtn" href="javascript:;"></a>
<div id="scrollBg"></div>
</div>
 <a id="prevBtn" href="javascript:;"></a>
 <a id="nextBtn" href="javascript:;"></a></div>
<pre>

CSS CODE：

body{
	background:url(../images/body_bg.png);
}
#gallery{
	position:absolute; top:50%; left:50%;
	width:1320px;
	margin:-125px 0 0 -672px;
}
#galleryArea{
	width:100%;
	overflow:hidden;
}
#galleryCon{
	height:154px;
	padding:13px 0;
	margin-bottom:50px;
	background-color:#1D1D1F;
 	background:-webkit-linear-gradient(top, #27252A 0%, #232027 50%, #1D1D1F 50%, #1B1B1D 100%);
 	box-shadow:0 1px 3px rgba(0,0,0,0.5),inset 0 1px 0 #37343B;
	overflow:hidden;
}
#galleryCon li{
	float:left;
	display:inline;
	margin:0 10px;
	border:2px solid #37343B;
}
#galleryCon li img{
	display:block;
	width:240px; height:150px;
}
#scrollbar{
	position:relative;
	width:500px; height:7px;
	margin:0 auto 13px auto;
	background:#1A1819;
	box-shadow:inset 0 0 5px #0F0D12;
	border-radius:6px;
}
#scrollBtn{
	display:block;
	position:absolute; top:-10px; left:0;
	margin-left:0;
	width:23px; height:23px;
	cursor:pointer;
	border:2px solid #151318;
	background-color:#1B1B1D;
	background:-webkit-linear-gradient(top, #27252A 0%, #232027 50%, #1D1D1F 50%, #1B1B1D 100%);
}
#scrollBg{
	position:absolute; top:0; left:0;
	height:7px;
	background-color:#6B32B5;
	background:-webkit-linear-gradient(top, #7532BD, #432364);
	border-radius:6px 0 0 6px;
	overflow:hidden;
}
#scrollBtn:before{
	content:'';
	position:absolute; top:7px; left:7px;
	width:9px; height:9px;
	background-color:#514559;
}
#scrollBtn:hover{
	box-shadow:0 0 10px #7337BB;
}
#scrollBtn:hover:before{ /* IE10不支持该方法 */
	background-color:#CE9CE1;
	box-shadow:0 0 5px #7337BB;
}

/* 扩展 */
#prevBtn, #nextBtn{
	display:block;
	position:absolute; top:68px;
	width:40px; height:40px;
	border:2px solid #151318;
	box-shadow:inset 0 1px 0 #37343B;
	background-color:#1B1B1D;
	background:-webkit-linear-gradient(top, #27252A 0%, #232027 50%, #1D1D1F 50%, #1B1B1D 100%);
}
#prevBtn{
	left:-50px;
}
#nextBtn{
	right:-50px;
}
#prevBtn:before, #nextBtn:before{
	content:'';
	position:absolute; top:10px;
	width:0; height:0;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
}
#prevBtn:before{
	left:14px;
	border-right:10px solid #514559;
}
#nextBtn:before{
	right:14px;
	border-left:10px solid #514559; 
}
#prevBtn:hover:before{
	border-right:10px solid #CE9CE1;
	-webkit-filter:drop-shadow(0 1px 8px #7337BB);
}
#nextBtn:hover:before{
	border-left:10px solid #CE9CE1;
	-webkit-filter:drop-shadow(0 1px 8px #7337BB);
}

JQUERY CODE：

(function($){
	/*!
	* jQuery Slider Gallery Can Drap
	* Copyright (c) 2013, 梦幻神化
	* Create: 2013.07.12
	* Version: 1.1
	* Update: 1. 支持鼠标滚轮滚动 2. 改成插件形式 3. 兼容IE6+ （2013-12-26）
	*
	* 请保留此信息，如果您有修改或意见可通过网站给我留言
	* http://www.bluesdream.com
	*/
	$(function() {
	/* 默认：拖动滚动 */
	var $startX					= 0,
		$startMargin			= 0,
		$gallery 				= $("#gallery"),										// 容器
		$galleryCon 			= $("#galleryCon"),									// 内容区域(滚动区域)
		$scrollBtn 				= $("#scrollBtn"),									// 拖动按钮
		$scrollBg				= $("#scrollBg"),									// 按钮背景
		$galleryList 			= $galleryCon.children("li"),						// 图片列表
		$galleryList_len			= $galleryList.length,								// 图片数量
		$gallery_width			= $gallery.width(),									// 容器的宽度
		$galleryList_width		= $galleryList.outerWidth(true),					// 单张图片区域的总宽
		$galleryList_count		= $galleryList_width*$galleryList_len,				// 内容宽度(所有图片的宽度总和)
		$scrollbar_wdith		= $("#scrollbar").outerWidth(),						// 滚动条宽度
		$scrollBtn_wdith		= $scrollBtn.outerWidth(true),						// 拖动按钮宽度
		$scroll_width			= $scrollbar_wdith-$scrollBtn_wdith,				// 滚动条拖动范围
		$galleryList_max 		= Math.ceil( $galleryList_len-$gallery_width/$galleryList_width ); // 列表最大数量
		$gallery_index			= $gallery[$gallery.index()];							// 便于后续扩展

	// 初始化
	$galleryCon.css('width',$galleryList_count);

	// 滚动代码
	function scrollTo(distance){
		if(distance<0) distance=0;
		if(distance>$scroll_width) distance=$scroll_width;
		var pos=-Math.ceil((distance/$scroll_width)*($galleryList_count-$gallery_width)); // 向上取整( ( 按钮拖动距离/滚动条拖动范围 ) * ( 内容宽度/容器的宽度 ) )
		$galleryCon.css('marginLeft',pos);
		$scrollBtn.css('marginLeft',distance);
		$scrollBg.css('width',distance);
	}

	$scrollBtn.on('mousedown',function(e){
		var $startX=e.clientX,
			$startMargin=parseInt($scrollBtn.css('marginLeft').replace('px',''));
		e.preventDefault();
		$(document).on('mousemove',function(e){
			var distance=e.clientX-$startX+$startMargin;
			scrollTo(distance);
			window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //禁止拖放对象文本被选择的方法 支持：Chrome、Firefox、Opera、Safari
			window.event.returnValue = false; //针对 IE
		}).on('mouseup',function() {
			$(this).off('mousemove');
		});
	});
	/* 默认结束 */

	/* 扩展1：左右点击滚动 */
	var $step = 0,
		$prevBtn = $("#prevBtn"),
		$nextBtn = $("#nextBtn");

	function prevScroll(){
		if ( !$galleryCon.is(":animated") ) {
			$step = -parseInt($galleryCon.css("marginLeft"))/$galleryList_width;
			if ( $step > 0 ) {
				$step--
				barScrollTo( $galleryList_max,$step );
			}
		}
	}
	function nextScroll(){
		if ( !$galleryCon.is(":animated") ) {
			$step = -parseInt($galleryCon.css("marginLeft"))/$galleryList_width;
			if ( $step < $galleryList_max ) {
				$step++
				barScrollTo( $galleryList_max,$step );
			};
		}
	}

	$prevBtn.click(function(){
		prevScroll();
	});
	$nextBtn.click(function(){
		nextScroll();
	});
	function barScrollTo(over,step){
		var posBtn = Math.ceil( $scroll_width/over*step );
		var posArea = -Math.ceil( ($galleryList_count-$gallery_width)/over*step );
		$scrollBtn.animate({'marginLeft':posBtn});
		$scrollBg.animate({'width':posBtn});
		$galleryCon.animate({'marginLeft':posArea});
	}
	/* 扩展结束 */

	/* 扩展2：鼠标滚轮滚动 */
	function mousewheel(e) {
		var e=e || window.event,
			wheelDelta = e.wheelDelta || e.detail;
		if( wheelDelta == 120 || wheelDelta == -3 ){
			prevScroll();
		}else if( wheelDelta == -120 || wheelDelta == 3 ){
			nextScroll();
		}
	}
	if( $gallery_index.addEventListener ){
		$gallery_index.addEventListener('DOMMouseScroll',mousewheel,false); // Firefox
	}
	$gallery_index.onmousewheel=mousewheel; // IE/Opera/Chrome
	/* 扩展结束 */

	});
}(jQuery));

更新日志：
2013.12.26 v1.1（1.支持鼠标滚轮滚动）
2014.03.19 v1.2（1.兼容IE6、7）

Demo Download Github

jQuery Slider Gallery（滑动相册 带拖动按钮）

发表评论 Click here to cancel reply.

jQuery Slider Gallery（滑动相册带拖动按钮）