水平滑動菜單類型圖像滑塊

enter image description here 水平滑動菜單類型圖像滑塊

有人能幫助我嗎？我想爲我的網站創建這種類型的圖像滑塊。但事情是我看到過這樣的菜單，但沒有幻燈片。

請給我一些指導，讓這樣的幻燈片。

謝謝你我的朋友。

我不是在jQuery的天才..所以我只是嘗試做一些事情，但沒有工作..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 

#slideshow { 
    position:relative; 
    height:350px; 
} 

#slideshow IMG { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:8; 

} 

#slideshow IMG.active { 
    z-index:10; 
} 

#slideshow IMG.last-active { 
    z-index:9; 
} 
</style> 
<script src="jquery-1.10.2.js"></script> 
<script> 

    function slideSwitch() { 

    var $active = $('#slideshow IMG.active'); 
    if ($active.length == 0) $active = $('#slideshow IMG:last'); 
     var $next = $active.next().length ? $active.next() 
     : $('#slideshow IMG:first'); 
     $active.addClass('last-active'); 

     $next.css({width: 0}) 
     .addClass('active') 
     .animate({width: 376}, 1000, function() { 
      $active.removeClass('active last-active'); 
     }); 
} 

$(function() { 
    setInterval("slideSwitch()", 5000); 
}); 


</script> 

</head> 

<body> 
<div id="slideshow"> 

     <img src="images(1).jpg" alt="" height="134" class="active"> 
     <img src="images.jpg" alt="" height="134"> 
     <img src="3.jpg" alt="" height="134"> 
     <img src="4.jpg" alt="" height="134"> 
     <img src="5.jpg" alt="" height="134"> 
     <img src="6.jpg" alt="" height="134"> 

    </div> 
</body> 
</html>

來源

2013-12-23 Yasitha

你現在試過的是什麼？任何鏈接或代碼？ –

@RununKathuria - 我用我試過的代碼更新了我的問題。我對jquery不太瞭解。所以這段代碼沒有做我需要做的事 – Yasitha

你用jQuery插件很好嗎？或者你想通過你自己來實現它？ –

使用以下HTML的幻燈片

<div id="one"> 
      <ol> 
       <li> 
        <h2><span>Slide One</span></h2> 
        <div> 
         <figure> 
          <img src="img-demo/1.jpg" alt="image" /> 
          <figcaption class="ap-caption">Slide One</figcaption> 
         </figure> 
        </div> 
       </li> 
       <li> 
        <h2><span>Slide Two</span></h2> 
        <div> 
         <figure> 
          <img src="img-demo/2.jpg" alt="image" /> 
          <figcaption class="ap-caption">Slide Two</figcaption> 
         </figure> 
        </div> 
       </li> 
    </ol> 
</div>

$('#one').liteAccordion({ 
         onTriggerSlide : function() { 
          this.find('figcaption').fadeOut(); 
         }, 
         onSlideAnimComplete : function() { 
          this.find('figcaption').fadeIn(); 
         }, 
         autoPlay : true, 
         pauseOnHover : true, 
         theme : 'stitch', 
         rounded : true, 
         enumerateSlides : true 
       }).find('figcaption:first').show();

檢查JS小提琴http://jsfiddle.net/raunakkathuria/7rK6c/

您可以查看更多文檔http://nicolahibbert.com/demo/liteAccordion/

來源

2013-12-23 14:12:24

哇你的上帝.....沒話說老闆..非常感謝你....這真的對我完全有幫助。。再次感謝...帽子.. :) – Yasitha

我只是一個凡人:)如果它已回答您的查詢Upvote /接受答案。謝謝 –

Rununak先生，我們可以改變這一點嗎？是否有可能爲一張幻燈片添加更多照片？ – Yasitha

水平滑動菜單類型圖像滑塊

回答

相關問題