jQuery实现的左右移动焦点图效果


Posted in Javascript onJanuary 14, 2016

本文实例讲述了jQuery实现的左右移动焦点图效果。分享给大家供大家参考,具体如下:

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>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
js的2种继承方式详解
Mar 04 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 #Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 #Javascript
jQuery遮罩层效果实例分析
Jan 14 #Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 #Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 #Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 #Javascript
jQuery div拖拽用法实例
Jan 14 #Javascript
You might like
IStream与TStream之间的相互转换
2008/08/01 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
快速了解Python相对导入
2018/01/12 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
python中id函数运行方式
2020/07/03 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
django中cookiecutter的使用教程
2020/12/03 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
给朋友的道歉信
2014/01/09 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
支行行长岗位职责
2015/02/15 职场文书
聘任书的格式及模板
2019/10/28 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript