好资源导航 » 文章资讯 » jQuery实现的左右移动焦点图效果

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

2024-03-22 23:54:04 457

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐