jQuery实现的左右移动焦点图效果
本文实例讲述了jQuery实现的左右移动焦点图效果。分享给大家供大家参考，具体如下：
jquery部分：
$(function(){
var_speed=1000;
var_len=0;
var_size=150;
var_direction='left';
functionmar(){
if(_direction=='left'){
if(_len>=450){
_direction='right';
}else{
$(".flowul").animate({"margin-left":"-="+_size+"px"});
_len+=_size;
}
}else{
if(_len<=0){
_direction='left';
}else{
$(".flowul").animate({"margin-left":"+="+_size+"px"});
_len-=_size;
}
}
}
var_go=setInterval(mar,_speed);
$("#pic_left").click(function(){
_direction='left';
});
$("#pic_right").click(function(){
_direction='right';
});
$(".flowli").mouseover(function(){
clearInterval(_go);
}).mouseout(function(){
_go=setInterval(mar,_speed);
});
});
html部分
<divclass="salebox"> <Aclass="left"id="pic_left">left</A> <DIVclass="pcont"id="ISL_Cont_1"> <DIVclass="ScrCont"> <divclass="flowbox"style="width:150px;height:60px;overflow:hidden;float:left;"> <divclass="flow"style="width:150px;height:60px;"> <ul> <li><imgsrc="__PUBLIC__/images/demo/01.jpg"mce_src="__PUBLIC__/images/demo/01.jpg"width="150px"height="60px"></li> <li><imgsrc="__PUBLIC__/images/demo/02.jpg"mce_src="__PUBLIC__/images/demo/02.jpg"width="150px"height="60px"></li> <li><imgsrc="__PUBLIC__/images/demo/03.jpg"mce_src="__PUBLIC__/images/demo/03.jpg"width="150px"height="60px"></li> <li><imgsrc="__PUBLIC__/images/demo/04.jpg"mce_src="__PUBLIC__/images/demo/04.jpg"width="150px"height="60px"></li> </ul> </div> </div> </DIV> </DIV> <Aclass="right"id="pic_right">right</A> </div>
更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。