我编写了相当粗略的代码,但它确实有效,但我会在下次学习更好的方法,所以我需要帮助才能使这段代码更合适。
此代码的目的是图像滑块。
我想在按下按钮时从右到左有动画,但我有点想法如何做到这一点。滑块上共有4个图像。它一次只会显示3个,它会按正确的顺序旋转它们,但我还没有想到如何添加隐藏第一个图像的动画,因为其他图像从右侧“显示”。
的Javascript
function rullaaVasen(j) {
var divit = $("#portfolio").find("div").toArray();
//a , b, c - using them to switch classes which have different background images
if(j == 1) {
a = 2;
b = 3;
c = 4;
i = 2;
v = 4;
} else if(j == 2) {
a = 3;
b = 4;
c = 1;
i = 3;
v = 3;
} else if(j == 3) {
a = 4;
b = 1;
c = 2;
i = 4;
v = 2;
} else if(j == 4) {
a = 1;
b = 2;
c = 3;
i = 1;
v = 1;
}
$(divit[0]).attr("class","sivu1 kuva" + a);
$(divit[1]).attr("class","sivu2 kuva" + b);
$(divit[2]).attr("class","sivu3 kuva" + c);
$("#vasenNappi").attr('onClick', 'rullaaVasen('+i+');');
$("#oikeaNappi").attr('onClick', 'rullaaOikea('+v+');');
}
HTML
<div id="slideri">
<div id="vasenNappi" onClick="rullaaVasen(1);"></div>
<div id="portfolio">
<div class="sivu1 kuva1"></div>
<div class="sivu2 kuva2"></div>
<div class="sivu3 kuva3"></div>
</div>
<div id="oikeaNappi" onClick="rullaaOikea(1);"></div>
提前感谢您的任何答案!
答案 0 :(得分:1)
试试这段代码。
//increment a based on j. Since 5 is the limit if a is 5 it is reset to 1.
a = (j+1)==5?1:(j+1);
//increment b based on a. Since 5 is the limit if b is 5 it is reset to 1.
b = (a+1)==5?1:(a+1);
//increment c based on b. Since 5 is the limit if c is 5 it is reset to 1.
c = (b+1)==5?1:(b+1);
//i is same as a.
i = a;
//v is based on j
v = 5-j;
据我所知,你的代码是基于j的值在1-5中改变变量a,b,c,i和v。
答案 1 :(得分:0)
这是一个“滑块”的js小提琴http://jsfiddle.net/7HX2C/1/。 还粘贴了下面的jsfiddle。
//usage
var slider = new slider();
slider.slide(0); //slides to index 0 and shows 1,2,3 of 1,2,3,4
slider.next(); //goes to index 1 and shows 2,3,4 of 1,2,3,4 one more would show 3,4,1
slider.prev(); //goes back to index 0 and shows 1,2,3 of 1,2,3,4 one more would show 4,1,2
//slider
function slider() {
var self = this;
self.div = $("div");
self.items = [1, 2, 3, 4]; //an array of the items to slide
self.currentIndex = 0; //which one you are currently looking at
self.displayAmount = 3; //how many items to display
self.currentItems = []; //an array of the items to show out of items array
self.slide = function (j) {
self.currentItems = [];
self.currentIndex = j;
//start looping from current index, loop as long as i is less than the items we have and current items to show is less than the display amount
for (var i = self.currentIndex; i < self.items.length && self.currentItems.length < self.displayAmount; i++) {
self.currentItems.push(self.items[i]);
}
//if current items isn't hitting our display amount
if (self.currentItems.length < self.displayAmount) {
//calculate how many we need to add
var amountToAdd = self.displayAmount - self.currentItems.length;
//loop through starting from 0 and add the amount missing as long as current items never gets longer than the items we have
for (var i = 0; i < amountToAdd && self.currentItems.length < self.items.length; i++) {
self.currentItems.push(self.items[i]);
}
}
};
self.next = function () {
var slideTo = self.currentIndex + 1;
if (slideTo > self.items.length) {
slideTo = 0;
}
self.slide(slideTo);
};
self.prev = function () {
var slideTo = self.currentIndex - 1;
if (slideTo < 0) {
slideTo = self.items.length - 1;
}
self.slide(slideTo);
};
self.showInfo = function() {
self.div.html(self.currentItems.toString() + " of " + self.items.toString() + " is displayed");
}
}