手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery实现的左右移动焦点图效果
jQuery实现的左右移动焦点图效果
摘要:本文实例讲述了jQuery实现的左右移动焦点图效果。分享给大家供大家参考,具体如下:jquery部分:$(function(){var_sp...

本文实例讲述了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> <A id="pic_left">left</A> <DIV id="ISL_Cont_1"> <DIV> <div> <div> <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 id="pic_right">right</A> </div>

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

【jQuery实现的左右移动焦点图效果】相关文章:

jquery实现的判断倒计时是否结束代码

jQuery插件实现适用于移动端的地址选择器

jquery实现弹出层效果实例

jQuery实现给页面换肤的方法

基于jquery实现下拉框美化特效

jQuery实现的多屏图像图层切换效果实例

jQuery实现转动随机数抽奖效果的方法

JS+CSS实现的拖动分页效果实例

jquery实现用户打分评分特效

jQuery实现弹出窗口中切换登录与注册表单

精品推荐
分类导航