在jquery中怎么实现鼠标点击按钮图片滑动,我一直做不出来。
展开全部
这个不光用到jquery的animate,还要有css基础才行,要不你光靠js是做不出的。
先来段代码再来说明:
<div>
<ul>
<li> <img src="xxxx.jpg </li>
<li> <img src="xxxx.jpg </li>
<li> <img src="xxxx.jpg </li>
……
<ul>
</div>
第一步:先要写css,这个结构不知道你能否看懂。图省事标签上我就不标id或者css,实际做的时候你自己加上id或者class
先把div设成相对定位、设定宽度、隐藏溢出:
div{ position:relative;width:700px; overflow:hidden }
这css代码能看懂吧,看不懂建议去学习下css。
然后再设置 ul, 设置ul宽度(ul宽度等于 li宽度*li个数)、绝对定位及位置。
ul{ width: 1280px; position:absolute; top:0;left:0}
在设置li 宽度 以及浮动
ul li { float:left, width:300px;}
css就完了
剩下就是js了,比如加个按钮点击按钮就让图片向左滚动
$('button').click(function(){
$('ul')..animate({
left: "-300"
}, 1000 );
});
//这是1秒内ul像坐滚动300像素,300像素就是一个li的宽度
})
还有不明白的再追问
先来段代码再来说明:
<div>
<ul>
<li> <img src="xxxx.jpg </li>
<li> <img src="xxxx.jpg </li>
<li> <img src="xxxx.jpg </li>
……
<ul>
</div>
第一步:先要写css,这个结构不知道你能否看懂。图省事标签上我就不标id或者css,实际做的时候你自己加上id或者class
先把div设成相对定位、设定宽度、隐藏溢出:
div{ position:relative;width:700px; overflow:hidden }
这css代码能看懂吧,看不懂建议去学习下css。
然后再设置 ul, 设置ul宽度(ul宽度等于 li宽度*li个数)、绝对定位及位置。
ul{ width: 1280px; position:absolute; top:0;left:0}
在设置li 宽度 以及浮动
ul li { float:left, width:300px;}
css就完了
剩下就是js了,比如加个按钮点击按钮就让图片向左滚动
$('button').click(function(){
$('ul')..animate({
left: "-300"
}, 1000 );
});
//这是1秒内ul像坐滚动300像素,300像素就是一个li的宽度
})
还有不明白的再追问
追问
非常谢谢,我试一下看看。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询