在jquery中怎么实现鼠标点击按钮图片滑动,我一直做不出来。

 我来答
xjlone
推荐于2016-10-24 · TA获得超过1428个赞
知道小有建树答主
回答量:157
采纳率:0%
帮助的人:114万
展开全部
这个不光用到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的宽度
})

还有不明白的再追问
追问
非常谢谢,我试一下看看。
Prince____Yu
2013-12-21 · TA获得超过3718个赞
知道小有建树答主
回答量:864
采纳率:33%
帮助的人:933万
展开全部

不知道你说的图片滑动是什么效果,是渐变,淡入淡出?

jquery中涉及到效果的方法就这么几个,你可以看一下:


你也可以把你要实现的功能再详细的说一下,希望能帮到你哦!

追问

是像这种,按钮点击一下,就图片滑过去,跟淘宝上的差不多。我一直都做不出来,布局用表格的,要怎么实现效果。

追答
这种不用表格布局啊。。我有类似的案例,是用jquery写的。需要的话可以私信。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式