Горизонтальное раздвижное меню типа слайдер изображения

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

Что вы пытались на данный момент? любая ссылка или код? –

@RaunakKathuria - Я обновил свой вопрос кодом, который я пробовал. Я не знаю много о 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

wow ваш бог ..... никаких слов босса .. спасибо очень много .... это действительно действительно помогает мне. Еще раз спасибо ... Шляпы выключены .. :) – Yasitha

Я просто смертный :) Отвечаю/принимаю ответ, если он ответил на ваш запрос. Спасибо –

Mr.Raunak мы можем изменить это немного? есть ли возможность добавить еще несколько фотографий на один слайд? – Yasitha

Горизонтальное раздвижное меню типа слайдер изображения

ответ

Смежные вопросы