kann mir hier jemand helfen diesen code dosent arbeiten?

-1

das ist meine HTML-Dateikann mir hier jemand helfen diesen code dosent arbeiten?

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="UTF-8" content="text/html" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="Stylesheet" type="text/css" href="styles/grabel-home.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="js/slide.js" type="text/javascript"></script> 
</head> 
<body> 
    <div id="container"> 
     <div id="slider"> 
      <img src="images/1.png" alt="" id="1" /> 
      <img src="images/2.png" alt="" id="2" /> 
      <img src="images/3.png" alt="" id="3" /> 
      <img src="images/4.png" alt="" id="4" /> 
      <img src="images/1.png" alt="" id="5" /> 
     </div> 
    </div> 
</body> 
</html>

und dies ist meine CSS-Datei

* { 
    margin: 0px; 
    padding: 0px; 
    font-family: Calibri; 
} 

#container { 
    width: 100%; 
    height: 300px; 
} 

#slider { 
    width: 100%; 
    height: 300px; 
} 

#slider img { 
    width: 100%; 
    height: 300px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

#1 { 
    z-index: 10; 
} 

#2 { 
    z-index: 20; 
} 

#3 { 
    z-index: 30; 
} 

#4 { 
    z-index: 40; 
} 

#5 { 
    z-index: 50; 
}

und das ist meine Javascript-Datei

$(document).ready(function(){ 

    var currentImg = 1; 
    var animationSpeed = 4000; 
    var index = 60; 

    setInterval(function(){ 
     $("#"+currentImg).css("zIndex", index); 
     index = index + 10; 
     currentImg++; 
     if(currentImg == 5){ 
      $("#1").css("zIndex", "10"); 
      $("#2").css("zIndex", "20"); 
      $("#3").css("zIndex", "30"); 
      $("#4").css("zIndex", "40"); 
      $("#5").css("zIndex", "50"); 
      currentImg = 1; 
     } 
    }, pause); 
});

jetzt das Problem, bitte, ist, dass ich alle Bilder setzen übereinander als Schichten mit jeweils verschiedenen Z-Index und ich möchte diesen Code zwischen ihnen tauschen, wenn es Slider ist du hast es ??? !! Aber dieser Code scheint nicht zu funktionieren. Warum? und Dank im Voraus

Quelle

2016-04-02 Ahmed Nader

Haben Sie versucht, es zu debuggen? Wo passiert was für ein Fehler ?? – RhinoDevel

Verwenden von Zahlen als IDs oder Klassen ist eine schlechte Idee. –

Ich habe versucht, es zu debuggen |||| Warum Zahlen schlecht? !!! –

Wenn JavaScript unter Verwendung ein Element Eigenschaften zu ändern, würde ich die einheimische Art und Weise verwenden:

document.getElementById(id).style.zIndex=1;

Das ist viel zuverlässiger. Wenn Sie z-Index verwenden, müssen Sie außerdem sicherstellen, dass die Eigenschaft position festgelegt ist. (Wie position:absolute)

Quelle

2016-04-02 19:44:22 Wolfsmash

gutes Konzept, aber hat auch nicht funktioniert! –

Alter, hast du versucht, was ich gesagt habe? – Wolfsmash

ja ja aber nichts funktioniert –

Try this, this helps .. :)

$(document).ready(function() { 
 

 
    var currentImg = 0; 
 
    var animationSpeed = 2000; 
 
    var v, play = "play"; 
 
    initSlider(play); 
 

 
    function initSlider(type) { 
 
    clearInterval(v); 
 

 
    if (type == "pause") { 
 
     clearInterval(v); 
 
    } else if (type == "next") { 
 
     var n = currentImg; 
 
     currentImg < $('.slideImg').length - 1 ? n = currentImg + 1 : n = 0; 
 
     $('.slideImg').removeClass('active').eq(n).addClass('active'); 
 
     currentImg = n; 
 
     initSlider(play); 
 

 
    } else if (type == "prev") { 
 

 
     var p = 0; 
 
     currentImg > $('.slideImg').length - 1 ? p = 0 : p = currentImg - 1; 
 

 
     $('.slideImg').removeClass('active').eq(p).addClass('active'); 
 
     currentImg = p; 
 

 
     initSlider(play); 
 

 
    } else if (type == "play") { 
 

 
     v = setInterval(function() { 
 
     $('.slideImg').removeClass('active').eq(currentImg).addClass('active') 
 
     currentImg++; 
 
     if (currentImg > $('.slideImg').length - 1) { 
 
      currentImg = 0; 
 
      $('.slideImg').removeClass('active').eq(0).addClass('active'); 
 
     }; 
 

 
     }, animationSpeed); 
 
    } 
 
    }; 
 

 
    /*@@Controls code slider will work even without this*/ 
 
    $('.ctrlWrapper .ctrl').on('click', function() { 
 

 
    if ($(this).hasClass('play')) { 
 
     initSlider("play"); 
 
     $('.ctrlWrapper .ctrl').removeClass('active'); 
 
     $(this).addClass('active'); 
 
    } else if ($(this).hasClass('next')) { 
 
     initSlider("next"); 
 
     $('.ctrlWrapper .ctrl').removeClass('active'); 
 
     $('.ctrlWrapper .ctrl.play').addClass('active'); 
 
    } else if ($(this).hasClass('prev')) { 
 
     initSlider("prev"); 
 
    } else if ($(this).hasClass('pause')) { 
 
     initSlider("pause"); 
 
     $('.ctrlWrapper .ctrl').removeClass('active'); 
 
     $('.ctrlWrapper .ctrl.play').addClass('active'); 
 
     $('.ctrlWrapper .ctrl').removeClass('active'); 
 
     $(this).addClass('active'); 
 
    }; 
 

 
    }); 
 

 
    /*@@slide Control code ends here*/ 
 

 
});

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    font-family: Calibri; 
 
} 
 
#container { 
 
    width: 100%; 
 
    height: 300px; 
 
} 
 
#slider { 
 
    width: 100%; 
 
    height: 300px; 
 
    overflow: hidden; 
 
} 
 
#slider img { 
 
    width: 100%; 
 
    height: 300px; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 1; 
 
    opacity: 0; 
 
    -webkit-transition: opacity ease 1s; 
 
    -moz-transition: opacity ease 1s; 
 
    -o-transition: opacity ease 1s; 
 
    transition: opacity ease 1s; 
 
} 
 
#slider img.active { 
 
    opacity: 1; 
 
    z-index: 2; 
 
    transition: opacity ease 1s; 
 
} 
 
.ctrlWrapper { 
 
    padding: 5px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.ctrlWrapper .ctrl { 
 
    display: inline-block; 
 
    padding: 5px 10px; 
 
    background: #eee; 
 
    cursor: pointer; 
 
    border: 1px solid #C7C7C7; 
 
    transition: all ease .3s; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 
.ctrlWrapper .ctrl:hover { 
 
    background: #888; 
 
    color: #fff; 
 
    border-color: #000; 
 
} 
 
.ctrlWrapper .ctrl.active { 
 
    background: #FF9800; 
 
    color: #000; 
 
    border-color: #607D8B; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="slider"> 
 
    <img class="slideImg active" src="http://lorempixel.com/580/250/nature/1/" alt="" id="1" /> 
 
    <img class="slideImg" src="http://lorempixel.com/580/250/nature/2/" alt="" id="2" /> 
 
    <img class="slideImg" src="http://lorempixel.com/580/250/nature/3/" alt="" id="3" /> 
 
    <img class="slideImg" src="http://lorempixel.com/580/250/nature/4/" alt="" id="4" /> 
 
    <img class="slideImg" src="http://lorempixel.com/580/250/nature/5/" alt="" id="5" /> 
 
    </div> 
 
</div> 
 
<div class="ctrlWrapper"> 
 
    <div class="ctrl next">Next</div> 
 
    <div class="ctrl prev">Prev</div> 
 
    <div class="ctrl play active">Play</div> 
 
    <div class="ctrl pause">Pause</div> 
 
</div>

Quelle

2016-04-02 20:53:11

kann mir hier jemand helfen diesen code dosent arbeiten?

Antwort

Verwandte Themen