我正在尝试制作一个图像 accordion ，以便在每个图像之间自动切换，现在请记住，我是javascript的新手，目标是通过进度条和每4秒自动显示图像来制作类似的内容：

您可以在此处看到正在运行的源代码：
http://newsite.mohaymen.ir：28080/mohaymen/home.html
我在wordpress网站上使用“帮助无限元素”插件的目的是：
http://demo3.shariot.ir/
请不要介意我的代码，我已经尝试了一些其他版本，但没有运气，我真的很感谢如果有人能帮助我在这里取得一个进度条和自动幻灯片

jQuery(document).ready(function(autoSlidingTimer){

var imageselements = document.getElementById("{{uc_id}}");
      jQuery("#{{uc_id}}.uc_image_accodion .uc_content .uc_image_accodion_holder").addClass("importantante blinkante");
      //imageselements.style.background = "#eee";
      imageselements.style.padding = "40px 1px";
carousel();

function carousel() {
  const itemindexer1 = document.getElementById('itemnumber1');
  const itemindexer2 = document.getElementById('itemnumber2');
  const itemindexer3 = document.getElementById('itemnumber3');
  const itemindexer4 = document.getElementById('itemnumber4');
  var i;
  var x = document.getElementsByClassName("uc_image_accodion_holder");
  for (i = 0; i < 4; i++) {
  if (i == 0)
  {  
     itemindexer1.classList.add("uc_hover");
     if (itemindexer2.classList.contains("uc_hover")) {itemindexer2.classList.remove("uc_hover");}
     if (itemindexer3.classList.contains("uc_hover")) {itemindexer3.classList.remove("uc_hover");}
     if (itemindexer4.classList.contains("uc_hover")) {itemindexer4.classList.remove("uc_hover");}
  }
  else if (i == 1)
  {  
     itemindexer2.classList.add("uc_hover");
     if (itemindexer1.classList.contains("uc_hover")) {itemindexer1.classList.remove("uc_hover");}
     if (itemindexer3.classList.contains("uc_hover")) {itemindexer3.classList.remove("uc_hover");}
     if (itemindexer4.classList.contains("uc_hover")) {itemindexer4.classList.remove("uc_hover");}
  }
  else if (i == 2)
  {  
     itemindexer3.classList.add("uc_hover");
     if (itemindexer1.classList.contains("uc_hover")) {itemindexer1.classList.remove("uc_hover");}
     if (itemindexer2.classList.contains("uc_hover")) {itemindexer2.classList.remove("uc_hover");}
     if (itemindexer4.classList.contains("uc_hover")) {itemindexer4.classList.remove("uc_hover");}
  }
  else if (i == 3)
  {  
     itemindexer4.classList.add("uc_hover");
     if (itemindexer1.classList.contains("uc_hover")) {itemindexer1.classList.remove("uc_hover");}
     if (itemindexer2.classList.contains("uc_hover")) {itemindexer2.classList.remove("uc_hover");}
     if (itemindexer3.classList.contains("uc_hover")) {itemindexer3.classList.remove("uc_hover");}
  }
  else
  {

  }
console.log("i=" + i);console.log("\n");
  }// End of loop

  setTimeout(carousel, 4000); // Change image every 4 seconds
}

});

jQuery(document).ready(function(){

{% if (event == "hover") %}
      jQuery("#{{uc_id}}.uc_image_accodion .uc_content .uc_image_accodion_holder").on('mouseenter', function(){
      jQuery("#{{uc_id}}.uc_image_accodion .uc_content .uc_image_accodion_holder").removeClass("uc_hover");
      jQuery(this).addClass("uc_hover");
    });
      jQuery("#{{uc_id}}.uc_image_accodion .uc_content .uc_image_accodion_holder").on('mouseleave', function(){
      jQuery("#{{uc_id}}.uc_image_accodion .uc_content .uc_image_accodion_holder").removeClass("uc_hover");
    });

{% else %}

      jQuery("#{{uc_id}}.uc_image_accodion .uc_content .uc_image_accodion_holder").on('click', function(){
      jQuery("#{{uc_id}}.uc_image_accodion .uc_content .uc_image_accodion_holder").removeClass("uc_hover");
      jQuery(this).addClass("uc_hover");

    });

{% endif %}

});

jQuery(document).ready(function(progressBar){
var i = 0;
  if (i == 0) {  
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 40);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
});

# {{uc_id}} * {

    box-sizing: border-box; 
}

# {{uc_id}}.uc_image_accodion .uc_content .uc_image_accodion_holder{

    transition: {{transition}}s;
}

# {{uc_id}}  a.uc_more_btn

{
  display:inline-block;
  text-decoration:none; 
}

.uc_image_accodion .uc_content{
    display: flex;
    flex-wrap: wrap;
}

.uc_image_accodion .uc_content .uc_image_accodion_holder{
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    flex: 1;
    text-align: center;
    background-size: cover;
    position: relative;
    text-decoration: none;
    transition: {{transition}}s;

}

.uc_image_accodion .uc_content .uc_image_accodion_holder.uc_hover{
    flex: 2;
}
.uc_image_accodion .uc_content .uc_image_accodion_holder .uc_overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition:{{transition}}s;

}

.uc_image_accodion .uc_content .uc_overlay .uc_overlay_inner {
    z-index: 1;
}
.uc_image_accodion .uc_content .uc_overlay .uc_overlay_inner h2 {
    transform: translate3d(0,-60px,0);
    opacity: 0;
    visibility: hidden;
}

.uc_image_accodion .uc_content .uc_image_accodion_holder.uc_hover .uc_overlay .uc_overlay_inner h2 {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: {{transition}}s;
}

.uc_image_accodion .uc_content .uc_overlay .uc_overlay_inner p {
    transform: translate3d(0,60px,0);
    opacity: 0;
    visibility: hidden;
}

.uc_image_accodion .uc_content .uc_image_accodion_holder.uc_hover .uc_overlay .uc_overlay_inner p {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: {{transition}}s;
}

{% if (direction == "vertical") %}
   .uc_content { 
    flex-direction: column;
}
{% endif %}

@media only screen and (max-width:{{change_to_vertical_on}}px){
  .uc_content {flex-direction: column;}
}

# myProgress {

  width: 100%;
  background-color: #eee;
}

# myBar {

  width: 1%;
  height: 3px;
  background-color: #000;
}

<div class="uc_image_accodion" id="{{uc_id}}">
  <div class="uc_content">
    {{put_items()}}
  </div>
</div>

{% set add_class = "" %}
{% if (item.item_index == opened_item_num) %}
{% set add_class="uc_hover" %} 
{% endif %}

<div id="itemnumber{{item.item_index}}" class="uc_image_accodion_holder {{add_class}}" {{item.html_attributes|raw}} {{item.item_id}} style="overflow:hidden;background-image: url({{item.image}})" >
  <div class="uc_overlay">
    <div class="uc_overlay_inner">
      {% if show_title == "true" %}<h2 class="ue_title"> {{item.title|raw}} </h2>{% endif %}    
        <p>    
          {% if show_subtitle == "true" %}<span class="ue_subtitle">{{item.subtitle|raw}}</span> {% endif %}
             <br>
            {% if show_button == "true" %}<a href="{{item.link}}" class="uc_more_btn" {{item.link_html_attributes|raw}}>{{button_text|raw}}</a>{% endif %}
        </p>    
    </div>
  </div>

<div id="myProgress"><div id="myBar" class="myBarLine"></div></div>

</div>