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程序设计有所帮助。