简化Jquery/Javascript代码并添加动画

Simplifying Jquery/Javascript code and adding animation

本文关键字：添加 动画 代码 Javascript Jquery 简化      更新时间：2023-09-26

我编写了相当粗糙的代码，但它可以工作，但我认为我应该学习更好的方法来做它下次，所以我需要帮助得到这段代码更合适。

此代码的目的是图像滑块。

滑块图像

我想有动画从右到左，当按钮被按下，但我有点不知道如何做到这一点。滑块上总共有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>

提前感谢任何答案!

试试这段代码。

//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;

从我对你的代码的理解是，你正在做一个变量的变化a, b, c, I和v在1-5基于j的值。

这是一个"slider"的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");
   }
}
相关文章：