<div id="box">
<div id="picture" style="left: -600px;">
<img src="img/5.jpg"/><!--0-->
<img src="img/1.jpg"/><!-- -600 --><!--默认-->
<img src="img/2.jpg"/><!-- -1200 -->
<img src="img/3.jpg"/><!--1800-->
<img src="img/4.jpg"/><!--2400-->
<img src="img/5.jpg"/>
<img src="img/1.jpg"/>
</div>
<div id="button">
<a href="#" class="left_a"><img src="img/箭头左.png"/></a>
<a href="#" class="right_a"><img src="img/箭头右.png"/></a>
</div>
</div>$(document).ready(function(){
$(".left_a").mousedown(function(){
？
})
$('.right_a').mousedown(function(){
？
})
})*{
margin: 0;
padding: 0;
}
#box{
width: 600px;
height: 400px;
border: 2px solid black;
overflow: hidden;
position: relative;
top: 100px;
left: 100px;
}
#picture{
width: 4200px;
position: absolute;
}
img{
float: left;
}
#button{
width: 600px;
position: absolute;
top: 170px;
left: 0px;
}
.left_a{
float: left;
margin: 0 20px;
}
.right_a{
float: right;
margin: 0 20px;
}
#box:hover img{
background-color: rgba(0,0,0,0.5);
}
5 回答
林逸舟丶
TA贡献124条经验 获得超28个赞
$(".left_a").mousedown(function(){
var picture=$("#picture");
var befo=picture.css("left");
var left_a=befo-600+"px";
picture.css("left",left_a);
})可能这就是你想要的代码，点击left图标后，div#picture的left属性-600px。
---------------------------------------------------------------------------
补充一下：这样写是直接无动画切换到上一张图，带动画的可以用.animate，带指定left属性和毫秒数可实现切换效果。如楼下所示，整个重点即是要控制$("#picture")的方法。
Hardy丶
TA贡献9条经验 获得超2个赞
jQuery提供的访问元素的演示属性css（）方法可以实现啊，.css("left","多少px")；
如果要做动画效果就是.animate（{“left”：“多少px”}，多长时间完成）
FSYu
TA贡献152条经验 获得超59个赞
<div id="button">
<a href="#" class="left_a" style="display:inline-block"><img src="img/箭头左.png" style="width:40px;position:relative;" /></a>
<a href="#" class="right_a" style="display:inline-block"><img src="img/箭头右.png" style="width:40px;position:relative;" /></a>
</div>
<script>
$(document).ready(function() {
$(".left_a").mousedown(function() {
$(".left_a img").css("left", "-4px");
})
$(".left_a").mouseup(function() {
$(".left_a img").css("left", "0");
})
$('.right_a').mousedown(function() {
$(".right_a img").css("right", "-4px");
})
$('.right_a').mouseup(function() {
$(".right_a img").css("right", "0");
})
})
</script>这种效果不是应该用css的hover吗，这个倒是也能写
- 5 回答
- 0 关注
- 4597 浏览
添加回答
举报
0/150
提交
取消