Jump to content
Sign in to follow this  
crelix

JavaScript carousel problēma.

Recommended Posts

Hey. Jau kādu laiku cīnos ar šo problēmu, šķiet esmu izmeiģinājis visus iespējamos risinājumus, tāpēc vēršos pie jums.

Nepieciešamais rezultāts : Primārs JS skripts, kas reseto vairākus "div", kā image slideshow, gan automātiski, gan onButtonClick.

 

Kamēr skripts darbojas automātiski viss strādā, kā tas paredzēts, taču, ja manuāli tiek uzspiesta kāda no pogām:

- Timing funkcija "salūzt" panelis netiek rādīts 10 sekundes, bet dažādos laikos. Reizēm 5 sekundes, reizēm 3, reizēm pat tikai 1 un atkal jau refrešojas.

- Īsti neesmu sapratis kādēļ, bet reizēm dēļ nepareiza timing, netiek parādīts neviens panelis vai visi paneļi uzreiz.

 

Īss piemērs no koda.

HTML:

<section id="about">

      <div id="about_image"></div>

      <div class="about"  id="about_1">
        //vairāki paragrāfi
      </div>

      <div class="about" id="about_2">
         //vairāki paragrāfi
      </div>

      <div class="btn_second" id="btn_about_2"></div>
      <div class="btn_primary" id="btn_about_1"></div>

 </section>

JavaScript(Pievienoju komentārus, kā konkrētā lieta manā izpratnē darbojas):

  //about carousel
  var panelAIndex = 0; //set default div
  showAPanel(); // call function

  $("#btn_about_1").on("click", function(){
    panelAIndex = 0; // set div
    showAPanel() // call function
  });

  $("#btn_about_2").on("click", function(){
    panelAIndex = 1; // set div
    showAPanel() // call function
  });

  function showAPanel(){
    var timer = "10000"; // 10 seconds timer
    var panelA = document.getElementsByClassName("about"); // get div's
    var btn_A_primary = document.getElementById("btn_about_1"); // get first button
    var btn_A_second = document.getElementById("btn_about_2"); // get second button

    for (var i = 0; i < panelA.length; i++){
      panelA[i].style.display = "none"; // hide all div
    }
    panelAIndex++; // increse div id
    if (panelAIndex > panelA.length) {panelAIndex = 1} // if last panel, reset to first

    // change buttons
    if (panelAIndex == 2){
      btn_A_primary.classList.remove("btn_primary");
      btn_A_primary.classList.add("btn_second");

      btn_A_second.classList.remove("btn_second");
      btn_A_second.classList.add("btn_primary");
    }else{
      btn_A_second.classList.remove("btn_primary");
      btn_A_second.classList.add("btn_second");

      btn_A_primary.classList.remove("btn_second");
      btn_A_primary.classList.add("btn_primary");
    }

    // show div
    $(panelA[panelAIndex-1]).fadeIn('slow');

    // after 10 seconds call function again
    setTimeout(showAPanel, timer);
  };

 

Edited by crelix

Share this post


Link to post
Share on other sites

Visticamāk pēc pogas nospiešanas tev vecais timeout turpina skaitīties + ir izveidots jauns timeout. Vairākas reizes nospiežot jau ir vairāki timeout un aiziet pa ķēdīti. Kad nospied pogu vajag aizvākt veco timeout, šis var palīdzēt https://www.w3schools.com/jsref/met_win_cleartimeout.asp 

Edited by LoyC
  • Like 1
  • Upvote 2

Share this post


Link to post
Share on other sites
On 2/26/2019 at 3:28 PM, LoyC said:

Visticamāk pēc pogas nospiešanas tev vecais timeout turpina skaitīties + ir izveidots jauns timeout. Vairākas reizes nospiežot jau ir vairāki timeout un aiziet pa ķēdīti. Kad nospied pogu vajag aizvākt veco timeout, šis var palīdzēt https://www.w3schools.com/jsref/met_win_cleartimeout.asp 

Šis. 
Tiek izsaukts JS kods, palaižas funkcija showAPanel(), kurā iekšā tiek uzsākts timeout
Ja persona uzspiež, izsauc funkciju showAPanel(), kas uzsāk jaunu timeout, nevis pārraksta veco. 
 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.