<!DOCTYPE HTML>

 <html>

 <head>

     <meta charset="utf-8">

     <title>水平切换 demo</title>

     <meta name="Keywords" content="">

     <meta name="author" content="@my_programmer">

     <style type="text/css">

             /*重置{*/

         body, div, span {

             padding: 0;

             margin: 0;

         }

             /*}重置*/

         .all {

             width: 602px;

             height: 302px;

             margin: 100px auto 0;

             border: 2px green solid;

             overflow: hidden;

         }

         .inner {

             width: 4816px;

             height: 302px;

             border: solid 1px red;

         }

         .inner>div {

             width: 600px;

             height: 300px;

             border: 1px blue solid;

             float: left;

             font-size: 80px;

             font-weight: bold;

             text-align: center;

             line-height: 300px;

         }

         .pointer {

             width: 256px;

             margin: 20px auto;

             overflow: hidden;

         }

         .pointer>span {

             float: left;

             width: 20px;

             height: 20px;

             border-radius: 50%;

             margin: 0 5px;

             border: 1px #000 solid;

         }

         .color {

             background: #ff0;

         }

         .test{

             width: 7px;

 height: 7px;

 display: inline-block;

 position: absolute;

 right: 5px;

 bottom: 20px;

 border-bottom: 3px solid #666;

 border-right: 3px solid #666;

 -webkit-transform: rotate(45deg);

         }

     </style>

 </head>

 <body>

 <div class="all">

     <div class="inner">

         <div>1</div>

         <div>2</div>

         <div>3</div>

         <div>4</div>

         <div>5</div>

         <div>6</div>

         <div>7</div>

         <div>8</div>

     </div>

 </div>

 <div class="pointer" id="pointer">

     <span class="color"></span>

     <span></span>

     <span></span>

     <span></span>

     <span></span>

     <span></span>

     <span></span>

     <span></span>

 </div>

 <div style="margin:0px auto;width:80px;" class="go">

     <input type="button" value="go" style="width:50px;height:30px;"/>

 </div>

 <span class="test"></span>

 <script type="text/javascript" src="js/jquery-1.7.1.js"></script>

 <script type="text/javascript" src="js/Flipsnap%20.js"></script>

 <!-- 下面为了省事，例子4、6、7 使用了jquery-->

 <script type="text/javascript">

     /*1.简单水平拖动*/

     // Flipsnap('.inner');    //移动次数为子元素个数减一

     /*2.设定每次移动的距离*/

     //    Flipsnap('.inner',{

     //    distance:602    //每次移动的距离，移动次数为子元素个数减一；注意：此处不能有分号,可以有逗号

     //    });

     /*3.设定每次移动的距离,和，最多移动的次数*/

     //    Flipsnap('.inner',{

     //    distance:602,

     //    maxPoint:7        //最多移动的次数

     //    });

     /*4.绑定事件*/

     //    var $pointer = $('.pointer span');

     //    var flipsnap = Flipsnap('.inner', {distance:602});

         //    flipsnap.element.addEventListener('fsmoveend', function() {

     //        //filter 为jquery的筛选器，筛选出与指定表达式匹配的元素集合

     //        $pointer.filter('.color').removeClass('color');

     //        $pointer.eq(flipsnap.currentPoint).addClass('color');

     //    }, false);

     /*5.refresh 刷新*/

     //var flipsnap=Flipsnap('.inner');

     //flipsnap.refresh();        //刷新当前页面，当屏幕切换时，此代码就派上用场了

     /*6.移动到指定位置,鼠标不可拖动 */

     /*var flipsnap = Flipsnap('.inner', {

      distance: 602,

      disableTouch: true     //true 鼠标不可拖动;  false 鼠标可拖动

      });

      $('.go').click(function() {

      //flipsnap.moveToPoint(3);    //移动到指定位置,第n+1个

      flipsnap.toNext();    //移动到下一元素

      //flipsnap.toPrev();    //移动到上一元素

      });*/

     /*7.next, prev*/

     var spanobj = $(".pointer span");

     var flipsnap = Flipsnap('.inner', {

         distance: 602,

         disableTouch: true     //true 鼠标不可拖动;  false 鼠标可拖动

     });

     flipsnap.element.addEventListener('fsmoveend', function() {

         spanobj.filter('.color').removeClass('color')

         spanobj.eq(flipsnap.currentPoint).addClass('color');

     });

     $('.go').click(function() {

         setInterval(function() {

            if(flipsnap.hasNext()){

                 flipsnap.toNext();

            }else{

               flipsnap.moveToPoint(0)

            }

         }, 1000)

         // flipsnap.toPrev();    //移动到上一元素

     });

 </script>

 </body>

 </html>