jQuery實(shí)現(xiàn)的左右移動(dòng)焦點(diǎn)圖效果

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

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

本文實(shí)例講述了jQuery實(shí)現(xiàn)的左右移動(dòng)焦點(diǎ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動(dòng)畫與特效用法總結(jié)》及《jQuery常見經(jīng)典特效匯總》

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

您可能感興趣的文章:

相關(guān)文章

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