直接上代码了 仔细看看例子就会明白 简单实用
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>水平切换 demo</title> 6 <meta name="Keywords" content=""> 7 <meta name="author" content="@my_programmer"> 8 <style type="text/css"> 9 /*重置{*/ 10 body, div, span { 11 padding: 0; 12 margin: 0; 13 } 14 15 /*}重置*/ 16 .all { 17 width: 602px; 18 height: 302px; 19 margin: 100px auto 0; 20 border: 2px green solid; 21 overflow: hidden; 22 } 23 24 .inner { 25 width: 4816px; 26 height: 302px; 27 border: solid 1px red; 28 } 29 30 .inner>div { 31 width: 600px; 32 height: 300px; 33 border: 1px blue solid; 34 float: left; 35 font-size: 80px; 36 font-weight: bold; 37 text-align: center; 38 line-height: 300px; 39 } 40 41 .pointer { 42 width: 256px; 43 margin: 20px auto; 44 overflow: hidden; 45 } 46 47 .pointer>span { 48 float: left; 49 width: 20px; 50 height: 20px; 51 border-radius: 50%; 52 margin: 0 5px; 53 border: 1px #000 solid; 54 } 55 56 .color { 57 background: #ff0; 58 } 59 .test{ 60 width: 7px; 61 height: 7px; 62 display: inline-block; 63 position: absolute; 64 right: 5px; 65 bottom: 20px; 66 border-bottom: 3px solid #666; 67 border-right: 3px solid #666; 68 -webkit-transform: rotate(45deg); 69 } 70 </style> 71 </head> 72 <body> 73 <div class="all"> 74 <div class="inner"> 75 <div>1</div> 76 <div>2</div> 77 <div>3</div> 78 <div>4</div> 79 <div>5</div> 80 <div>6</div> 81 <div>7</div> 82 <div>8</div> 83 </div> 84 </div> 85 <div class="pointer" id="pointer"> 86 <span class="color"></span> 87 <span></span> 88 <span></span> 89 <span></span> 90 <span></span> 91 <span></span> 92 <span></span> 93 <span></span> 94 </div> 95 <div style="margin:0px auto;80px;" class="go"> 96 <input type="button" value="go" style="50px;height:30px;"/> 97 </div> 98 <span class="test"></span> 99 <script type="text/javascript" src="js/jquery-1.7.1.js"></script> 100 <script type="text/javascript" src="js/Flipsnap%20.js"></script> 101 <!-- 下面为了省事，例子4、6、7 使用了jquery--> 102 <script type="text/javascript"> 103 104 /*1.简单水平拖动*/ 105 // Flipsnap('.inner'); //移动次数为子元素个数减一 106 107 /*2.设定每次移动的距离*/ 108 // Flipsnap('.inner',{ 109 // distance:602 //每次移动的距离，移动次数为子元素个数减一；注意：此处不能有分号,可以有逗号 110 // }); 111 112 /*3.设定每次移动的距离,和，最多移动的次数*/ 113 // Flipsnap('.inner',{ 114 // distance:602, 115 // maxPoint:7 //最多移动的次数 116 // }); 117 118 /*4.绑定事件*/ 119 // var $pointer = $('.pointer span'); 120 // var flipsnap = Flipsnap('.inner', {distance:602}); 121 // flipsnap.element.addEventListener('fsmoveend', function() { 122 // //filter 为jquery的筛选器，筛选出与指定表达式匹配的元素集合 123 // $pointer.filter('.color').removeClass('color'); 124 // $pointer.eq(flipsnap.currentPoint).addClass('color'); 125 // }, false); 126 127 /*5.refresh 刷新*/ 128 //var flipsnap=Flipsnap('.inner'); 129 //flipsnap.refresh(); //刷新当前页面，当屏幕切换时，此代码就派上用场了 130 /*6.移动到指定位置,鼠标不可拖动 */ 131 /*var flipsnap = Flipsnap('.inner', { 132 distance: 602, 133 disableTouch: true //true 鼠标不可拖动; false 鼠标可拖动 134 }); 135 $('.go').click(function() { 136 //flipsnap.moveToPoint(3); //移动到指定位置,第n+1个 137 flipsnap.toNext(); //移动到下一元素 138 //flipsnap.toPrev(); //移动到上一元素 139 });*/ 140 141 /*7.next, prev*/ 142 var spanobj = $(".pointer span"); 143 var flipsnap = Flipsnap('.inner', { 144 distance: 602, 145 disableTouch: true //true 鼠标不可拖动; false 鼠标可拖动 146 }); 147 flipsnap.element.addEventListener('fsmoveend', function() { 148 spanobj.filter('.color').removeClass('color') 149 spanobj.eq(flipsnap.currentPoint).addClass('color'); 150 }); 151 $('.go').click(function() { 152 setInterval(function() { 153 if(flipsnap.hasNext()){ 154 flipsnap.toNext(); 155 }else{ 156 flipsnap.moveToPoint(0) 157 } 158 }, 1000) 159 // flipsnap.toPrev(); //移动到上一元素 160 }); 161 162 </script> 163 </body> 164 </html>