javascript와 jquery로 사이드 바를 동시에 생성하고 div를 동시에 순환합니다.

Question

우선, 프로그래밍에 익숙하지 않고 영어가 제 두 번째 언어이므로 좀 더 관대해질 수 있습니다! 자, 나는별로 성공하지 HTML/자바 스크립트/jquery와 사이드 바를 만들려고 노력하고있어. 예제는 꽤 자체 설명하고 있습니다. 이것은 내가 생각해 낸 것입니다.
html 코드;

<div id="sidebar"> 
    <ul id="side-rcnt-thumb-post-list"> 

     <li> 
      <div id="content-1">include title 1</div> 
      <div id="content-2">include title 2</div> 
      <div id="content-3">include title 3</div> 
      <div id="content-4">include title 4</div> 
      <div id="content-5">include title 5</div> 
      <div id="content-6">include title 6</div> 
      <div id="content-7">include title 7</div> 
     </li> 
     <li> 
      <div id="content-1">include title 1</div> 
      <div id="content-2">include title 2</div> 
      <div id="content-3">include title 3</div> 
      <div id="content-4">include title 4</div> 
      <div id="content-5">include title 5</div> 
      <div id="content-6">include title 6</div> 
      <div id="content-7">include title 7</div> 
     </li> 
     <li> 
      <div id="content-1">include title 1</div> 
      <div id="content-2">include title 2</div> 
      <div id="content-3">include title 3</div> 
      <div id="content-4">include title 4</div> 
      <div id="content-5">include title 5</div> 
      <div id="content-6">include title 6</div> 
      <div id="content-7">include title 7</div> 
     </li> 
     <li> 
      <div id="content-1">include title 1</div> 
      <div id="content-2">include title 2</div> 
      <div id="content-3">include title 3</div> 
      <div id="content-4">include title 4</div> 
      <div id="content-5">include title 5</div> 
      <div id="content-6">include title 6</div> 
      <div id="content-7">include title 7</div> 
     </li> 
     <li> 
      <div id="content-1">include title 1</div> 
      <div id="content-2">include title 2</div> 
      <div id="content-3">include title 3</div> 
      <div id="content-4">include title 4</div> 
      <div id="content-5">include title 5</div> 
      <div id="content-6">include title 6</div> 
      <div id="content-7">include title 7</div> 
     </li> 
     <li> 
      <div id="content-1">include title 1</div> 
      <div id="content-2">include title 2</div> 
      <div id="content-3">include title 3</div> 
      <div id="content-4">include title 4</div> 
      <div id="content-5">include title 5</div> 
      <div id="content-6">include title 6</div> 
      <div id="content-7">include title 7</div> 
     </li> 
    </ul> 




</div> 

내 기본 javascript + jquery 코드;

var divs = $('div[id^="content-"]').hide(), 
    i = 0; 

(function cycle() { 

    divs.eq(i).fadeIn(400) 
     .delay(1000) 
     .fadeOut(400, cycle); 

    i = ++i % divs.length; 

})(); 

[이는 지금 작동하는 방법의 예] [1]

[1] : https://jsfiddle.net/9020cew0/


을 그리고 그것이 작동하는 방법;
동시에 li을 순환시켜야합니다 (예 :
초 1). 그것은 "포함 제목 1"을 6 번 표시합니다.
초 2; 그것은 "제목 2 포함"을 보여줍니다 6 번
등 ... 당신은 요점을!

뭔가 ... 그냥 지저분하다고, 내가 ... 사전에
감사 ..

Answer 1

그래서 나는 단순히 요인을 제거하기 위해,이 버전에서 전환을 혼란 삭제 한거야 시도 할 때마다 복잡. 나는 카운터를 망치고 있지 않다. 절대적으로 필요한 것은 아니다. 어떤 div가 다른 div보다 더 많은 요소를 가지고 있다면, 그것은 깨지지 않을 것입니다 - 각 LI는 개별적으로 처리됩니다. 그것은 fiddle으로 제공, 또는 아래 참조 : 모든 리튬 div에 대한 별도의 ID를 가질 필요가

var divs = $('div[id^="content-"]').hide(); 
 

 
cycle(); 
 

 
function cycle() { 
 
    $("li").children(":visible").hide().next().show(); 
 
    if ($("li").children(":visible").length == 0) { 
 
    $("li").children(":first-child").show(); 
 
    } 
 
    setTimeout(cycle, 500); 
 
}

#sidebar{ 
 
     width: 250px; 
 
     margin-left:50%; 
 
    } 
 

 

 

 
    /* 
 
    Style Sidebar Recent Blog Posts with 75x75px Thumbnails 
 
    */ 
 
    ul#side-rcnt-thumb-post-list { 
 
     list-style: none; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    #side-rcnt-thumb-post-list li { 
 
     margin-top: 15px; 
 
     overflow: hidden; 
 
     border-top: 1px solid #CCC; 
 
     padding-top: 15px; 
 
     position: relative; 
 
     min-height: 76px; 
 
    } 
 

 

 
    .srtpl-l { 
 
     float: left; 
 
     margin-right: 15px; 
 
    } 
 

 
    .srtpl-a { 
 
     display: block; 
 
     outline: 0!important; 
 
     font-weight: 400; 
 
    } 
 

 
    #side-rcnt-thumb-post-list img { 
 
     max-width: 100%; 
 
     width: auto\9; 
 
     height: auto; 
 
     vertical-align: middle; 
 
     border: 0; 
 
     -ms-interpolation-mode: bicubic; 
 
    } 
 

 
    .srtpl-r { 
 
     margin-left: 90px; 
 
    } 
 

 

 
    .srtpl-n { 
 
     display: block; 
 
     color: #343534; 
 
     line-height: 1.2; 
 
     font-weight: 600; 
 
     font-size: 13px; 
 
     outline: 0!important; 
 
     text-decoration: none; 
 
     font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<body> 
 
<div id="sidebar"> 
 
    <ul id="side-rcnt-thumb-post-list"> 
 

 
     <li> 
 
      <div id="content-1">include title 1</div> 
 
      <div id="content-2">include title 2</div> 
 
      <div id="content-3">include title 3</div> 
 
      <div id="content-4">include title 4</div> 
 
      <div id="content-5">include title 5</div> 
 
      <div id="content-6">include title 6</div> 
 
      <div id="content-7">include title 7</div> 
 
     </li> 
 
     <li> 
 
      <div id="content-11">include title 1</div> 
 
      <div id="content-22">include title 2</div> 
 
      <div id="content-33">include title 3</div> 
 
      <div id="content-44">include title 4</div> 
 
      <div id="content-55">include title 5</div> 
 
      <div id="content-66">include title 6</div> 
 
      <div id="content-77">include title 7</div> 
 
     </li> 
 
     <li> 
 
      <div id="content-1">include title 1</div> 
 
      <div id="content-2">include title 2</div> 
 
      <div id="content-3">include title 3</div> 
 
      <div id="content-4">include title 4</div> 
 
      <div id="content-5">include title 5</div> 
 
      <div id="content-6">include title 6</div> 
 
      <div id="content-7">include title 7</div> 
 
     </li> 
 
     <li> 
 
      <div id="content-1">include title 1</div> 
 
      <div id="content-2">include title 2</div> 
 
      <div id="content-3">include title 3</div> 
 
      <div id="content-4">include title 4</div> 
 
      <div id="content-5">include title 5</div> 
 
      <div id="content-6">include title 6</div> 
 
      <div id="content-7">include title 7</div> 
 
     </li> 
 
     <li> 
 
      <div id="content-1">include title 1</div> 
 
      <div id="content-2">include title 2</div> 
 
      <div id="content-3">include title 3</div> 
 
      <div id="content-4">include title 4</div> 
 
      <div id="content-5">include title 5</div> 
 
      <div id="content-6">include title 6</div> 
 
      <div id="content-7">include title 7</div> 
 
     </li> 
 
     <li> 
 
      <div id="content-1">include title 1</div> 
 
      <div id="content-2">include title 2</div> 
 
      <div id="content-3">include title 3</div> 
 
      <div id="content-4">include title 4</div> 
 
      <div id="content-5">include title 5</div> 
 
      <div id="content-6">include title 6</div> 
 
      <div id="content-7">include title 7</div> 
 
     </li> 
 
    </ul> 
 

 

 

 

 
</div>