JQ封装切换滚动功能
/*---------控制滚动图片v1(作者:SFLYQ)-----------
Options 配置对象，（用来配置控制元素的dom位置，初始化一些必要的对象或者方法）
DoIni 初始化操作（初始化元素的jq对象，以及事件绑定等）
DoMove 控制图片现在模块的移动（控制的方向又用户传入）
BindMoveItem根据dom位置，绑定这个元素为初始化选中，并显示在第一个，
*/
效果地址：http://pro9505d48a.isitestar.cn/
代码下载地址：https://github.com/SFLAQiu/SFLAQiu.JQPack.ControlMoveDiv/
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <link href="Style/Default.css" type="text/css" rel="stylesheet"/> 6 <style type="text/css"> 7 .iconLeft{float:left; display:block; border:1px solid green; height:150px; width:50px;}/*左边按钮*/ 8 .iconRight { float:left;display:block; border:1px solid green; height:150px; width:50px;}/*右边按钮*/ 9 .picList{float:left; position: absolute; width:800px; left:0px; }/*移动模块*/ 10 .picList li{float:left; border:1px solid red; border:1px solid red; height:150px; width:200px;list-style:none; }/*移动项*/ 11 .picWrap{ float:left; overflow:hidden; height:150px; width:800px; border:1px solid blue;}/*移动范围模块*/ 12 /*效果*/ 13 .on{ background-color:#808080;}/*选中效果*/ 14 </style> 15 16 </head> 17 <body> 18 <div> 19 <a class="iconLeft" href="javascript:;" onclick="MoveByBtn.DoMove('l');return false;"><</a> 20 <div id="RangeBox" style="position: relative;" class="picWrap"> 21 <div id="MoveBox" class="picList"> 22 <ul> 23 <li>111111<span style="display:none;color:red;">√</span></li> 24 <li>222222<span style="display:none;color:red;">√</span></li> 25 <li>333333<span style="display:none;color:red;">√</span></li> 26 <li>4444444<span style="display:none;color:red;">√</span></li> 27 <li>5555<span style="display:none;color:red;">√</span></li> 28 <li>666<span style="display:none;color:red;">√</span></li> 29 <li>77<span style="display:none;color:red;">√</span></li> 30 <li>8<span style="display:none;color:red;">√</span></li> 31 <li>9<span style="display:none;color:red;">√</span></li> 32 <li>10<span style="display:none;color:red;">√</span></li> 33 <li>11<span style="display:none;color:red;">√</span></li> 34 <li>12<span style="display:none;color:red;">√</span></li> 35 </ul> 36 </div> 37 </div> 38 <a class="iconRight" href="javascript:;" onclick="MoveByBtn.DoMove('r');return false;">></a> 39 </div> 40 41 42 43 44 45 <script src="JS/jquery.1.9.1.min.js" type="text/javascript" ></script> 46 <script src="JS/jquery.easing.min.js" type="text/javascript" ></script> 47 <script type="text/javascript" > 48 /*---------控制滚动图片v1(作者:SFLYQ)----------- 49 Options 配置对象，（用来配置控制元素的dom位置，初始化一些必要的对象或者方法） 50 DoIni 初始化操作（初始化元素的jq对象，以及事件绑定等） 51 DoMove 控制图片现在模块的移动（控制的方向又用户传入） 52 BindMoveItem根据dom位置，绑定这个元素为初始化选中，并显示在第一个， 53 */ 54 var MoveByBtn = {}; 55 MoveByBtn = { 56 Options: { 57 moveBoxDom: "#MoveBox",//移动块html元素的dom位置 58 moveBoxItemsDom: "#MoveBox ul li",//移动项html元素的dom位置 59 moveRangeBoxDom: "#RangeBox",//移动范围块html元素的dom位置 60 selectItemsDom: "#MoveBox ul li",//选中项html元素的dom位置 61 selectClass: "on",//选中效果类名 62 clickDoFn: function () { }//点击选中项后操作（在所有操作之后） 63 }, 64 moveItemLength: 0,//移动项的总个数 65 moveWidth: 0,//每次移动的长度 66 moveBoxJq: null,//移动块的JQ对象 67 moveRangeBoxJq: null,//移动范围块的JQ对象 68 moveBoxItemJqs: null,//移动项JQ对象集合 69 selectItemsJq: null,//选中项JQ对象集合 70 // 初始化操作 71 DoIni: function (iniObj) { 72 MoveByBtn.moveBoxJq = $(MoveByBtn.Options.moveBoxDom); 73 MoveByBtn.moveRangeBoxJq = $(MoveByBtn.Options.moveRangeBoxDom); 74 MoveByBtn.moveBoxItemJqs = $(MoveByBtn.Options.moveBoxItemsDom); 75 MoveByBtn.selectItemsJq = $(MoveByBtn.Options.selectItemsDom); 76 77 MoveByBtn.Options = $.extend(MoveByBtn.Options, iniObj); 78 MoveByBtn.moveWidth = $(MoveByBtn.moveBoxItemJqs[0]).outerWidth(true); 79 MoveByBtn.moveItemLength = MoveByBtn.moveBoxItemJqs.length; 80 var getRestrictWidth = MoveByBtn.moveBoxItemJqs.length * MoveByBtn.moveWidth - MoveByBtn.moveRangeBoxJq.width(); 81 //初始化点击 82 MoveByBtn.moveBoxItemJqs.click(function () { 83 MoveByBtn.DoItemClick(this); 84 return false; 85 }); 86 87 //初始化范围这个的宽度 88 MoveByBtn.moveBoxJq.css({ "width": MoveByBtn.moveItemLength * MoveByBtn.moveWidth + "px" }); 89 MoveByBtn.moveBoxJq.css({ left: "0px", position: "absolute" }); 90 }, 91 //移动操作 92 DoMove: function (movePos) { 93 MoveByBtn.moveBoxJq.stop(false, true); 94 var getNowLeft = parseInt(MoveByBtn.moveBoxJq.css("left"), 10); 95 var needMoveLeft = 0; 96 MoveByBtn.DoItemSelect(movePos); 97 if (movePos == "r") { 98 needMoveLeft = getNowLeft - MoveByBtn.moveWidth; 99 var getRestrictWidth = MoveByBtn.moveBoxItemJqs.length * MoveByBtn.moveWidth - MoveByBtn.moveRangeBoxJq.width(); 100 if (needMoveLeft * -1 > getRestrictWidth) return; 101 } else if (movePos == "l") { 102 if (getNowLeft == 0) return; 103 needMoveLeft = getNowLeft + MoveByBtn.moveWidth; 104 } 105 MoveByBtn.moveBoxJq.stop(false, true).animate({ left: needMoveLeft + "px" }, 500, "easeOutQuint", function () { }); 106 }, 107 //根据movePos（移动方向）控制图片滚动切换的方向，并触发图片被选中的效果和点击选中图片的操作 l=left r=right 108 DoItemSelect: function (movePos) { 109 var nowSelJq = $(MoveByBtn.Options.moveBoxItemsDom + "[NowSelect='1']"); 110 if (!nowSelJq[0]) return; 111 var getSelNum = MoveByBtn.moveBoxItemJqs.index(nowSelJq); 112 var needSelNum = 0; 113 if (movePos == "l") { 114 needSelNum = getSelNum - 1; 115 } else if (movePos == "r") { 116 needSelNum = getSelNum + 1; 117 } 118 //选中效果 119 if (MoveByBtn.DoSelectEff(needSelNum)) { 120 //选中后调用点击操作 121 MoveByBtn.DoItemClick(MoveByBtn.moveBoxItemJqs.eq(needSelNum)[0]); 122 } 123 return; 124 }, 125 //被选中的效果 126 DoSelectEff: function (needSelNum) { 127 if (needSelNum >= MoveByBtn.moveItemLength || needSelNum < 0) return false;//如果被选中的 位置数不存在就直接跳出 128 MoveByBtn.selectItemsJq.filter("." + MoveByBtn.Options.selectClass).removeClass(MoveByBtn.Options.selectClass); 129 var selItemJq = MoveByBtn.selectItemsJq.eq(needSelNum); 130 if (!selItemJq[0]) return false; 131 MoveByBtn.moveBoxItemJqs.attr({ "NowSelect": "2" }); 132 MoveByBtn.moveBoxItemJqs.eq(needSelNum).attr({ "NowSelect": "1" }); 133 MoveByBtn.selectItemsJq.eq(needSelNum).addClass(MoveByBtn.Options.selectClass); 134 return true; 135 }, 136 //点击操作，（添加选中的效果，并判断是否触发外部传入的点击操作，这个操作在所有操作之后） 137 DoItemClick: function (moveItemDom) { 138 var getIndex = MoveByBtn.moveBoxItemJqs.index(moveItemDom);//被选中的位置 139 if (getIndex >= MoveByBtn.moveItemLength || getIndex < 0) return;//如果被选中的 位置数不存在就直接跳出 140 MoveByBtn.DoSelectEff(getIndex); 141 //用户配置了 Options 的点击操作的配置就执行 142 if (MoveByBtn.Options.clickDoFn) MoveByBtn.Options.clickDoFn(moveItemDom); 143 }, 144 //根据dom位置，绑定这个元素为初始化选中，并显示在第一个， 145 BindMoveItem: function (bingItemDom) { 146 if (!$(bingItemDom)[0]) return; 147 var getNum = MoveByBtn.moveBoxItemJqs.index($(bingItemDom));//元素在集合中所对应的位置数 148 var needMoveLeft = getNum * MoveByBtn.moveWidth * (-1); 149 var getRestrictWidth = MoveByBtn.moveBoxItemJqs.length * MoveByBtn.moveWidth - MoveByBtn.moveRangeBoxJq.width(); 150 MoveByBtn.DoItemClick(bingItemDom); 151 MoveByBtn.DoSelectEff(getNum); 152 if (needMoveLeft * -1 > getRestrictWidth) { MoveByBtn.moveBoxJq.css({ left: getRestrictWidth * (-1) + "px" }); return; } 153 MoveByBtn.moveBoxJq.css({ left: needMoveLeft + "px" }); 154 } 155 }; 156 //初始化 157 MoveByBtn.DoIni({ 158 moveBoxDom: "#MoveBox", moveBoxItemsDom: "#MoveBox ul li", moveRangeBoxDom: "#RangeBox", selectItemsDom: "#MoveBox ul li", selectClass: "on", clickDoFn: function (moveItemDom) { 159 BindSelBigPic(moveItemDom); 160 return false; 161 } 162 }); 163 164 //点击操作，拓展 165 function BindSelBigPic(moveItemDom) { 166 $("#MoveBox ul li span").hide(); 167 $(moveItemDom).find("span").show(); 168 } 169 //初始化绑定选中位置，（移动上去，并选中） 170 MoveByBtn.BindMoveItem($("#MoveBox ul li")[2]); 171 //MoveByBtn.BindMoveItem($("#MoveBox ul li")[7]); 172 </script> 173 </body> 174 </html>