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

本文实例讲述了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程序设计有所帮助。