<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);
????????????}
要填什么才能控制 left 的加減 在線等 急?。。?/h1>
5 回答
林逸舟丶
TA貢獻124條經(jīng)驗 獲得超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屬性和毫秒數(shù)可實現(xiàn)切換效果。如樓下所示，整個重點即是要控制$("#picture")的方法。
Hardy丶
TA貢獻9條經(jīng)驗 獲得超2個贊
jQuery提供的訪問元素的演示屬性css（）方法可以實現(xiàn)啊，.css("left","多少px")；
如果要做動畫效果就是.animate（{“l(fā)eft”：“多少px”}，多長時間完成）
FSYu
TA貢獻152條經(jīng)驗 獲得超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嗎，這個倒是也能寫
-
Anoxia_我把CSS和效果圖貼上來了，你再看一下，謝謝啦。
- 5 回答
- 0 關注
- 4685 瀏覽
添加回答
舉報
0/150
提交
取消