您的位置：首页 > Web前端 > JQuery

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

2016-01-14 14:20 826 查看

本文实例讲述了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特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery 焦点图

相关文章推荐

新的分享

章节导航