我把css和jquery设置为制作一个上下移动的滑块,但它不起作用。
CSS:
div#container img#slider_img {
float:left;
position:relative;
top:0px;
的jQuery
$(document).ready(function(){
$('#btn_1').click(function(){
$('#slider_img').css({'top','0px'});
});
$('#btn_2').click(function(){
$('#slider_img').css('top','-400px');
});
$('#btn_3').click(function(){
$('#slider_img').css({'top','-800px'});
});
$('#btn_4').click(function(){
$('#slider_img').css({'top','-1200px'});
});
});
我手动将顶部的CSS位置更改为-400,-800和-1200并且它有效,但我似乎无法让jQuery处理css属性......
答案 0 :(得分:1)
尝试{'top':'0px'}
使用:
代替,
在对象文字符号{}
中,属性(键)分配器为:
在数组,
中是分隔符。
答案 1 :(得分:0)
除了{"":""}
对象文字符号错误...
JS 如果比你想象的更有趣,
如果你需要不断移动400px
,为什么不简单地使用
#btn_0 #btn_1 #btn_2 #btn_3
从0开始!
每次点击后,如果你从点击的元素中取出那个数字,你会得到这个简单的数学:
-0 * 400 = move to -0px
-1 * 400 = move to -400px
-2 * 400 = move to -800px
..........etc
$(function(){ // DOM READY FUNCTION SHORTHAND
$('[id^="btn_"]').click(function(){
var N = this.id.split('_')[1]; // Get the number
$('#slider_img').stop().animate({top: -N*400}, "slow");
});
});