首页 > 语言 > JavaScript > 正文

jquery实现的图片点击滚动效果

2024-05-06 16:04:45
字体:
来源:转载
供稿:网友
这篇文章主要介绍了jquery实现的图片点击滚动效果,需要的朋友可以参考下

需要添加jquery文件才可以调试

复制代码 代码如下:


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
//alert($('#findclose').closest('div').attr('id'));
var pic_length = $('#gd li').length;
var n = 0;
$('#toleft').click(function(){
if (!$('#gd').is(':animated') && n)
{
$('#gd').animate({left:'+=120px'},500);
n--;
}
});
$('#toright').click(function(){
if (!$('#gd').is(':animated') && pic_length > n+5)
{
$('#gd').animate({left:'-=120px'},500);
n++;
}
});
})
</script>
<style type="text/css">
ul{
list-style:none;
margin:0px;
padding:0px;
text-align:center;
}
#gd li {
width:90px;
height:80px;
display:block;
float:left;
margin:9px 15px;
}
</style>
<div>
<div></div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div></div>
</div>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选