快捷導(dǎo)航

jQuery實現(xiàn)的左右移動焦點圖效果

更新時間：2016年01月14日 14:20:49 作者：乘著風(fēng)在飛

這篇文章主要介紹了jQuery實現(xiàn)的左右移動焦點圖效果,涉及jQuery結(jié)合時間函數(shù)響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)的左右移動焦點圖效果。分享給大家供大家參考，具體如下：

jquery 部分：

$(function () {
  var _speed = 1000;
  var _len = 0;
  var _size = 150;
  var _direction = 'left';
  function mar(){
    if(_direction == 'left'){
      if(_len >= 450){
       _direction = 'right';
      }else{
       $(".flow ul").animate({"margin-left":"-=" + _size + "px"});
       _len += _size;
      }
    }else{
      if(_len <= 0){
       _direction = 'left';
      }else{
       $(".flow ul").animate({"margin-left":"+=" + _size + "px"});
       _len -= _size;
      }
    }
  }
  var _go = setInterval(mar,_speed);
  $("#pic_left").click(function (){
   _direction = 'left';
  });
  $("#pic_right").click(function (){
   _direction = 'right';
  });
  $(".flow li").mouseover(function (){
    clearInterval(_go);
  }).mouseout(function (){
    _go = setInterval(mar,_speed);
  });
});

html 部分

<div class="salebox">
  <A class="left" id="pic_left">left</A>
  <DIV class="pcont" id="ISL_Cont_1">
    <DIV class="ScrCont">
      <div class="flowbox" style="width:150px; height:60px; overflow:hidden;float:left;">
        <div class="flow" style="width:150px;height:60px;">
          <ul >
           <li><img src="__PUBLIC__/images/demo/01.jpg" mce_src="__PUBLIC__/images/demo/01.jpg" width="150px" height="60px"></li>
           <li><img src="__PUBLIC__/images/demo/02.jpg" mce_src="__PUBLIC__/images/demo/02.jpg" width="150px" height="60px"></li>
           <li><img src="__PUBLIC__/images/demo/03.jpg" mce_src="__PUBLIC__/images/demo/03.jpg" width="150px" height="60px"></li>
           <li><img src="__PUBLIC__/images/demo/04.jpg" mce_src="__PUBLIC__/images/demo/04.jpg" width="150px" height="60px"></li>
          </ul>
        </div>
      </div>
    </DIV>
   </DIV>
  <A class="right" id="pic_right">right</A>
</div>

更多關(guān)于jQuery特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery動畫與特效用法總結(jié)》及《jQuery常見經(jīng)典特效匯總》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery AjaxQueue改進步驟
之前用jquery實現(xiàn)了一個簡單的AjaxQueue，用于管理ajax請求的發(fā)送順序。這次改進了下。
2011-10-10
基于jquery固定于頂部的導(dǎo)航響應(yīng)瀏覽器滾動條事件
這款導(dǎo)航當(dāng)瀏覽器滾動條位于頂部時，導(dǎo)航高度較高，當(dāng)瀏覽器滾動向下滾動時，導(dǎo)航高度自動減低，并位于頂部
2014-11-11
jquery next nextAll nextUntil siblings的區(qū)別介紹
在本文為大家詳細(xì)介紹下jquery next nextAll nextUntil siblings的區(qū)別，感興趣的朋友可以參考下
2013-10-10
JQuery的$命名沖突詳細(xì)解析
在Jquery中，$是JQuery的別名，所有使用$的地方也都可以使用JQuery來替換，如$('#msg')等同于JQuery('#msg')的寫法。然而，當(dāng)我們引入多個js庫后，在另外一個js庫中也定義了$符號的話，那么我們在使用$符號時就發(fā)生了沖突
2013-12-12
easyui取消表單實時驗證,提交時統(tǒng)一驗證的簡單實例
下面小編就為大家?guī)硪黄猠asyui取消表單實時驗證,提交時統(tǒng)一驗證的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
jquery實現(xiàn)的縮略圖預(yù)覽滑塊實例
這篇文章主要介紹了jquery實現(xiàn)的縮略圖預(yù)覽滑塊,實例分析了jQuery縮略圖預(yù)覽滑塊的實現(xiàn)與使用技巧,并提供了完整的實例下載,需要的朋友可以參考下
2015-06-06
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建CRUD應(yīng)用
這篇文章主要幫大家輕松學(xué)習(xí)jQuery插件EasyUI，并利用EasyUI創(chuàng)建CRUD應(yīng)用，感興趣的小伙伴們可以參考一下
2015-11-11
jquery ajax 同步異步的執(zhí)行示例代碼
jquery ajax 同步異步的執(zhí)行示例代碼，需要的朋友可以參考下。
2010-06-06
jQuery基于ajax操作json數(shù)據(jù)簡單示例
這篇文章主要介紹了jQuery基于ajax操作json數(shù)據(jù)的方法,結(jié)合簡單實例形式分析了jQuery的ajax基本使用方法及json數(shù)據(jù)傳輸操作相關(guān)技巧,需要的朋友可以參考下
2017-01-01
jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點顏色的方法
這篇文章主要介紹了jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點顏色的方法,結(jié)合實例形式分析了jQuery圖表插件echarts設(shè)置折線圖的相關(guān)操作技巧,需要的朋友可以參考下
2017-03-03