通过幻灯片来回点击

这是这样的，当你开始图片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

通过幻灯片来回点击

回答

相关问题