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 相关文章推荐
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
javascript系统时间设置操作示例
Jun 17 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
php版微信自定义回复功能示例
2016/12/05 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
PHP7新特性简述
2017/06/11 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
python中time、datetime模块的使用
2020/12/14 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
药剂专业学生求职信范文
2013/12/28 职场文书
十周年庆典策划方案
2014/06/03 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
社区干部培训心得体会
2016/01/06 职场文书
python中__slots__节约内存的具体做法
2021/07/04 Python
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
python数字图像处理:图像的绘制
2022/06/28 Python