通過幻燈片來回點擊

這是這樣的，當你開始圖片1，以便當圖片2上的開關，然後你可以說「點擊」它，這樣你就可以回到現在的第1幀在再次出現之前您必須等待更多的10張照片，但您只需點擊它即可。通過幻燈片來回點擊

現在的問題是：我必須這樣做，以便您可以在「圖片」中來回點擊，即一張在照片3中，並且希望返回到圖片1，然後您可以通過點擊返回。

我試着谷歌周圍這樣做，你只需點擊圖片，然後你來回。

這裏是我的代碼，我會告訴你：

PHP/mysqli的

echo "<div id=\"slideshow\">"; 
    if ($stmt = $this->mysqli->prepare("SELECT navn, title FROM slideshow ORDER BY id DESC LIMIT 5")) { 
     $stmt->execute(); 

     $stmt->bind_result($navn, $title); 

     while ($stmt->fetch()) { 
     echo "<div> 
     <img src=\"/indhold/img/tilbage.png\" id=\"tilbage\"> 
     <h3>$title</h3> 
     <img src=\"/indhold/img/$navn\" alt=\"$title\" title=\"$title\"> 
     <img src=\"/indhold/img/frem.png\" id=\"frem\"> 
     </div>"; 
     } 

     /* Luk statement */ 
     $stmt->close(); 

    } else { 
     echo 'Der opstod en fejl i erklÃÂ¦ringen: ' . $this->mysqli->error; 
    } 
    echo "</div>";

CSS代碼在這裏：

#slideshow { 
    width: 708px; 
    float: right; 
    margin-bottom: 42px; 
    min-height: 99px; 
} 
#slideshow > div { 
    position: absolute; 

} 
#slideshow > div h3 { 
    position: absolute; 
    bottom: -35px; 
    padding: 11px; 
    color: #ffffff; 
    width: 97%; 
    background-color: #002855; 
} 
#slideshow > div #tilbage { 
    position: absolute; 
    left: 6px; 
    bottom: 35px; 
    z-index: 1000; 
} 
#slideshow > div #frem { 
    position: absolute; 
    right: 6px; 
    bottom: 35px; 
    z-index: 1000; 
}

jquery的代碼在這裏：

<script> 
     $(function() { 
      $("#slideshow > div:gt(0)").hide(); 
      setInterval(function() { 
       $('#slideshow > div:first') 
       .fadeOut(1000) 
       .next() 
       .fadeIn(1000) 
       .end() 
       .appendTo('#slideshow'); 
      }, 9500); 
     }); 
    </script>

來源

2013-07-05 Kasper Willumsen

談到jQue，我是個初學者ry，但我用這段代碼來創建我的圖像卷軸可以這麼說。我使用的是一個和下一個按鈕，通過我的圖片滾動：

的javascript：

<script> 
    var init = function() { 
     var carousel = document.getElementById('carousel222'), 
      navButtons = document.querySelectorAll('#navigationcaro222 button'), 
      panelCount = carousel.children.length, 
      transformProp = Modernizr.prefixed('transform'), 
      theta = 0, 

      onNavButtonClick = function (event) { 
       var increment = parseInt(event.target.getAttribute('data-increment')); 
       theta += (360/panelCount) * increment * -1; 
       carousel.style[transformProp] = 'translateZ(-182px) rotateY(' + theta + 'deg)'; 
      }; 

     for (var i = 0; i < 2; i++) { 
      navButtons[i].addEventListener('click', onNavButtonClick, false); 
     } 

    }; 

    window.addEventListener('DOMContentLoaded', init, false);

然後爲我所用的HTML部分：

<p id="navigationcaro222" style="padding-left:80px"> 
<button id="previous2" data-increment="-1">Previous</button> 
<button id="next2" data-increment="1">Next</button>

希望這有助於。

來源

2013-07-05 13:44:20 Keith

通過幻燈片來回點擊

回答

相關問題