<address id="xxfdj"></address>

      jQuery 間歇式無縫滾動

      注意事項:

      1.內部會自動創建 plus 及 minus 元素,也可以在外部直接創建,若外部已創建或設置 plus:false 及 minus:false ,內部將跳過此步驟;

      2.若(滾動的列表寬度 ≤ 父元素的寬度),則不會自動創建 plus 及 minus 元素,也不會自動滾動,也無法滾動;

      3.鼠標放在滾動元素上,會暫停自動滾動,移出后會恢復自動滾動(若設置 auto:false 則不會恢復);

      間歇式無縫滾動 Demo

      【示例】

      橫向滾動[→]

      瀏覽器兼容性

      IE 6+ Chrome 12+ Firefox 3.5+ Safari 4.0+ Opera 9.6+

      【direction 參數說明】(必須)

      滾動方向
      設置值 說明
      left 自左向右方向滾動 [→]
      right 自右向左方向滾動 [←]
      top 自上向下方向滾動 [↓]
      bottom 自下向上方向滾動 [↑]

      【settings 參數說明】(可選)

      名稱 默認值 說明
      step 1 滾動步長
      speed 800 滾動速度(單位:毫秒)
      time 2600 自動滾動間隔時間(單位:毫秒)
      auto true 是否自動滾動
      plus true 是否使用plus按鈕
      minus true 是否使用minus按鈕

      【DOM 結構】

      
      <div id="element_id" class="scroll_horizontal">
      	<div class="box">
      		<ul class="list">
      			<li></li>
      			<li></li>
      			...
      			<li></li>
      		</ul>
      	</div>
      	<!-- 左右控制按鈕,內部會自動創建,可省略 -->
      	<a class="plus"></a>
      	<a class="minus"></a>
      </div>
      

      【CSS 樣式】

      
      /* 水平滾動
      ------------------------------ */
      .scroll_horizontal{position:relative;width:660px;height:120px;padding:20px;line-height:20px;background:#000;}
      .scroll_horizontal .box{overflow:hidden;position:relative;width:600px;height:120px;margin:0 auto;}
      .scroll_horizontal .plus,
      .scroll_horizontal .minus{position:absolute;top:50px;width:30px;height:60px;background:#f90;cursor:pointer;}
      .scroll_horizontal .plus{left:10px;}
      .scroll_horizontal .minus{right:10px;}
      .scroll_horizontal .plus:hover,
      .scroll_horizontal .minus:hover{background:#f60;}
      .scroll_horizontal ul{position:absolute;top:0;left:0;width:9999px;}
      .scroll_horizontal li{float:left;width:200px;text-align:center;}
      
      /* 垂直滾動
      ------------------------------ */
      .scroll_vertical{position:relative;width:180px;height:340px;padding:20px;line-height:20px;background:#000;}
      .scroll_vertical .box{overflow:hidden;position:relative;height:280px;margin:40px 0 0 0;}
      .scroll_vertical .plus,
      .scroll_vertical .minus{position:absolute;left:50px;width:120px;height:30px;background:#09f;cursor:pointer;}
      .scroll_vertical .plus{top:10px;}
      .scroll_vertical .minus{bottom:10px;}
      .scroll_vertical .plus:hover,
      .scroll_vertical .minus:hover{background:#0cf;}
      .scroll_vertical ul{position:absolute;top:0;left:0;}
      .scroll_vertical li{height:140px;text-align:center;}
      

      【JavaScript 調用方式】

      
      // 直接調用
      $("#element_id").scrollShow("left");
      
      // 自定義參數調用
      $("#element_id").scrollShow("right",{
      	step:1,
      	speed:800,
      	time:2600,
      	auto:ture,
      	plus:ture,
      	minus:ture
      });
      

      【更多示例】

      橫向滾動[←]

      $("#element_id").scrollShow("right",{step:3});

      垂直滾動[↓]

      $("#element_id").scrollShow("top",{auto:false});

      垂直滾動[↑]

      $("#element_id").scrollShow("bottom",{speed:500,time:1500,plus:false,minus:false});
      我趁老师喝醉后玩弄她的身体

        <address id="xxfdj"></address>