Question

这个大代码的所有想法是为左右两侧的图像设置动画，请执行“运行”按钮，因为我已插入一个控制台，向您解释每个函数中代码的作用，

我的问题是，jquery在第一个/第二个事件中运行良好，但在此之后它将被破坏。请不要对代码大小感到惊讶，功能很简单“我只为每个事件制作功能”

任何帮助请以根本解释来理解我做错了什么？谢谢

function ClearClasses(Elements)
{
    var i =0;
    while(i<Elements.length)
    {
        $("#"+Elements+"").attr("class","");
        i++;
    }
}

var ArrayOfImages;
ArrayOfImages = [
    " /images/ad1.jpg",
    " /images/apple.png",
    " /images/avatar.png",
    " /images/banner-left.jpg",
    " /images/cassiel-login.png",
    " /images/google.png",
    " /images/JamaloukiCon.jpg",
    " /images/jamaloukitv.svg",
    " /images/logo.png",
    " /images/logo-white.png",
    " /images/menu.png"
];



function ReturnObjectLength(ArrayOfImageSource) {
    var NumberOfImages = $(ArrayOfImageSource).length;
    return NumberOfImages - 1;
}

function GetSourceOfSelectedIndex(arrayOfImageSource, Index)
{
    return arrayOfImageSource[Index];
}



//Global Variable Clicker

var ClickerCounter = 2;

function setImagesPositions(ArrayOfElements,ArrayOfWidth,height)
{
    var documentWidth = $(document).width();
    var documentHeight = $(document).height();

    if (ArrayOfElements.length == ArrayOfWidth.length)
    {
        for (var i = 0 ; i < ArrayOfElements.length; i++)
        {
            $("#" + ArrayOfElements[i]).css({
                "height": (documentHeight*(height/100)) + "px",
                "width": ((ArrayOfWidth[i]/100)*documentWidth)+ "px"
            });
        }
    }
    //FixClickerPosition();
}

function changeImageSource(element,imageSource)
{
    if (element.length == imageSource.length)
    {
        for (var i = 0 ; i < element.length; i++) {
            $("#" + element[i]).attr("src", imageSource[i]);
        }
    }
}

function loadSettlement()
{
    var firstImage = GetSourceOfSelectedIndex(ArrayOfImages, 0);
    var secondImage = GetSourceOfSelectedIndex(ArrayOfImages, 1);
    var thirdImage = GetSourceOfSelectedIndex(ArrayOfImages, 2);
    changeImageSource(["firstImage", "secondImage", "thirdImage"], [firstImage, secondImage, thirdImage]);
    setImagesPositions(["firstImage", "secondImage", "thirdImage"], [23, 50, 23], 20);
    //FixClickerPosition();
}

function EventClick_RightClicker(ArrayOfImageSource)
{
    var NumberOfImages = ReturnObjectLength(ArrayOfImageSource);
    if (ClickerCounter == 0) { ClickerCounter = NumberOfImages; } else { --ClickerCounter; }
    console.log(ClickerCounter);
    var firstImage = "firstImage";
    var secondImage = "secondImage";
    var thirdImage = "thirdImage";
    var distanceFirstImage = DistanceToRight(firstImage);
    var distanceSecondImage = DistanceToRight(thirdImage);
    var distThirdImage = $("#thirdImage").position().left;
    var distanceThirdImage = "-="+distThirdImage + "px";
    MoveSelectedImage(firstImage, distanceFirstImage, 5000, 50, 20);
    MoveSelectedImage(secondImage, distanceSecondImage, 5000, 23, 20);
    MoveSelectedImage(thirdImage, distanceThirdImage, 5000, 23, 20);

    setImagesPositions(["firstImage"],[23]);
    ChangeID("firstImage","secondImage","tmpImage");
    ChangeID("tmpImage","thirdImage","tmpImage2");
    ChangeID("tmpImage2","firstImage","thirdImage");
    setImagesPositions(["firstImage", "secondImage", "thirdImage"], [23, 50, 23], 20);
    // FixClickerPosition();
}
function EventClick_LeftClicker(ArrayOfImageSource)
{

    var NumberOfImages = ReturnObjectLength(ArrayOfImageSource);
    if (ClickerCounter == NumberOfImages) { ClickerCounter = 0; } else { ++ClickerCounter; }
    console.log("we are looking for the image index in the array :"+ClickerCounter);
    var distanceFirstImage = $("#thirdImage").position().left;
    console.log("getting the distance of the first image "+ distanceFirstImage);
    var formatedDistanceFirstImage = "+="+distanceFirstImage+"px";
    var distanceSecondImage = DistanceToLeft("firstImage");
    console.log("getting the distance of the second image "+ distanceSecondImage);
    var distancethirdImage =DistanceToLeft("thirdImage");
    console.log("getting the distance of the third image "+ distanceFirstImage);
    var SelectedImageSource =  GetSourceOfSelectedIndex(ArrayOfImages,ClickerCounter);
    console.log("getting image source of selected counter :"+ SelectedImageSource+ "index is :" + ClickerCounter);
    changeImageSource(["firstImage"],[SelectedImageSource]);
    
    MoveSelectedImage("firstImage",formatedDistanceFirstImage,2000,23,20);             
    MoveSelectedImage("secondImage",distanceSecondImage,2000,23,20);              
    MoveSelectedImage("thirdImage",distancethirdImage,2000,50,20);

    ChangeID("firstImage","thirdImage","tmpfirstImage");//firstImage disappear
    ChangeID("secondImage","tmpFirstImage","tmpSecondImage");//secondImage disappear
    ChangeID("thirdImage","tmpSecondImage","secondImage");//
    $("#tmpFirstImage").attr("id","firstImage");
    $("#tmpSecondImage").attr("id","thirdImage");
    ClearClasses(["firstImage", "secondImage", "thirdImage"]);
    setImagesPositions(["firstImage", "secondImage", "thirdImage"], [23, 50, 23], 20);
}



$(document).ready(function () {
    loadSettlement();
});



function MoveSelectedImage(Element,distance,Speed,NewWidth,NewHeight)
{
    console.log("so we are animating :"+Element +" it should move :"+ distance + "with the speed of :"+Speed +"do not remember to set the width and height again where height =" +NewHeight+" and width ="+NewWidth );
    var formatedWidth = formatWidth(NewWidth);
    var formatedHeight = formatHeight(NewHeight);
    //  alert(formatedWidth + "   "+ formatedHeight);
    console.log("we only manipulatig width and height to become pixels :" +formatedHeight + "formted width :"+ formatedWidth );
    $("#" + Element).addClass("relativePosition").animate({ "left": distance }, Speed,function(){
        $(this).css({ "width": formatedWidth, "height": formatedHeight });
    });
    //$("#" + Element).css({"position":"relative","width": formatedWidth, "height": formatedHeight }).animate({ "left": distance }, Speed);
}

function DistanceToRight(Element)
{
    var ElementWidth = $("#" + Element).width();
    var returnedDistance = "+=" + ElementWidth + "px";
    return returnedDistance;
}

function DistanceToLeft(Element)
{
    var ElementWidth = $("#" + Element).width();
    var returnedDistance = "-=" + ElementWidth + "px";
    return returnedDistance;
}


function formatWidth(width)
{
    var documentWidth = $(document).width();
    var formatedWidth = (width / 100) * documentWidth;
    var returnedWith = formatedWidth + "px";
    return returnedWith;
}

function formatHeight(height)
{
    var documentHeight = $(document).height();
    var formatedHeight = (height / 100) * documentHeight;
    var returnedHeight = formatedHeight + "px";
    return returnedHeight;
}

function RemoveClasses(ArrayOfElement,ArrayOfClass)
{
    for(var i = 0 ; i<ArrayOfElement.length;i++)
    {
        var selectedElement = ArrayOfElement[i];
        for (var j = 0 ; j< ArrayOfClass.length;j++)
        {
            var selectedClass = ArrayOfClass[i];
            $("#"+selectedElement+"").removeClass(selectedClass);
        }
    }
}

function ChangeID(pastID, newID, tmpId)
{
    if(document.getElementById(newID))
    {
        console.log("if the new ID exist to an html element , change it to something else :"+tmpId );
        $("#"+newID).attr("id",tmpId);
    }

    $("#"+pastID).attr("id",newID);
}

$("#RightClicker").click(function(){
    EventClick_RightClicker(ArrayOfImages);
    console.log("clicking the right clicker ");
});
$("#LeftClicker").click(function(){
    EventClick_LeftClicker(ArrayOfImages);
    console.log("clicking the left clicker ");
});

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    /*top: 50%;*/
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: blue;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev {
    left:0;
    border-radius:3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.relativePosition
{
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
    <img src=""   id="firstImage" alt ="First Image" />
    <img src=  ""  id="secondImage" alt="Second Image"/>
    <img src=  "" id="thirdImage" alt="third Image"/>

    <a class="prev" id="LeftClicker">&#10094;</a>
    <a class="next" id="RightClicker">&#10095;</a>
</div>

动画在前两次单击时工作正常，但在此之后，图像顺序变得混乱

0 个答案: