создать слайд фотографий с помощью javascript

Question

Я использую VS2010, C# для разработки небольшого корпоративного веб-приложения ASP.NET для компании, я создал страницу истории, и я собираюсь разработать простой слайд фотографий с использованием JavaScript (без JQuery, если возможно), есть ли готовая библиотека? то, что отображает мелкие эскизы изображений и где пользователи нажимают над каждым, отображается большая версия изображения, как я могу создать или найти такой инструмент?

благодаря

Answer 1

Да, есть много готовых решений, и вы, конечно, можете создать свой собственный. Трюк здесь заключается в том, чтобы назначать классы DOM для больших изображений и эскизов и при запуске приложения показывать только первое изображение. Затем над мышкой добавьте класс ко второму большому изображению, которое покажет это, и тому, которое было видимо перед классом, который скроет его. Как я уже сказал, есть много учебников и готовых скриптов.

http://www.1stwebdesigner.com/css/57-free-image-gallery-slideshow-and-lightbox-solutions/

http://www.ehow.com/how_6457406_javascript-gallery-tutorial.html

Answer 2

Вместо того, чтобы использовать Javascript, если у вас есть как файл эскиза и увеличенный файл (или, возможно, единственный файл, если он изначально большой и масштабировать его вниз, чтобы создать миниатюру ,) вы можете использовать CSS, который был бы гораздо более доступным решением, поскольку пользовательские агенты без Javascript все равно смогут использовать эти функции. Такое решение также предполагает, что вы не хотите никакого дополнительного взаимодействия, кроме обмена изображениями.

Чтобы поменять местами изображения с помощью CSS, лучше иметь элемент контейнера для вашего изображения, таких как DIV (в то время как семантически не правильно, это делает этот тип взаимодействия проще):

<div id="thumbnail"> 
</div> 

#thumbnail 
{ 
    background-image:url("{URL to image, relative to the CSS}"); 
} 
/*Use :hover pseudo-class to detect hover events*/ 
#thumbnail:hover 
{ 
    background-image:url("{Replacement image URL}"); 
} 

Обратите внимание, что : hover pseudo-class не работает в IE6, если не применяется к привязному элементу, однако в настоящее время он редко поддерживает IE6, но все же хорошо знать.

Answer 3

jQuery - это всего лишь обертка JavaScript (по сути), поэтому вы будете обходить некоторое удобство, которое оно приносит. что, будучи сказанным, у них есть много libs, которые делают то, что вы axin '. Построение собственного тоже не было бы трудным. Вот пара вещей, о которых нужно подумать (мышление сначала спасет вас от чувства немой вниз! !!)

Здесь не так много волшебства .. вы просто захотите посмотреть на «onmouseover || onclick ', и когда миниатюрное изображение перевернуто над || щелкнули ', вам нужно получить некоторые базовые координаты, а затем показать div с большим изображением, зависающим над меньшим изображением (вы должны использовать 2 изображения (один маленький и один большой), и вы должны, вероятно, создать их на диске при загрузке или создание изображений (потоки файлов тоже работают, но не хватает эффективности, если они являются статическими изображениями (кеш?), сколько времени вы хотите потратить на это, lol).

Чтобы разместить правильное расположение большего изображения, re либо собирается захотеть добавить div динамически, кто является содержимым, это большое изображение, либо показать/скрыть скрытый div, у которого уже загружено большее изображение (таким образом, изображения уже могут быть загружены, однако он будет загружать все, даже если это не нужно, опять же, сколько времени), вы можете спрятать их в DOM где-то. Затем, установив положение более крупных парящих изображений на «абсолютное», и, скорее всего, это «z-index» на самой передней панели, вы можете показать большее изображение поверх миниатюры.

Вы можете использовать либо меньшее расположение меньшего изображения в качестве базовых коордов, либо положение указателя мыши относительно div, которое «перебирается над || щелкнули «в зависимости от того, как вы хотите, чтобы ваши функции работали»

так или иначе, как было сказано ранее, есть многочисленные библиотеки, которые будут делать именно это. Это было желательно функциональность в течение длительного времени, и вы, скорее всего, будет заново изобретать колесо .. Однако, нет ничего плохого в том, зная, как создать колесо ..

http://highslide.com/

http://www.admixweb.com/2010/03/08/how-to-create-a-fancy-image-gallery-with-css3/

google тоже поможет: «чистые слайдеры изображений javascript»

Answer 4

Возможно, вам это поможет. Вот пример кода.

<!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 runat="server"> 
    <title></title> 
    <style type="text/css"> 
     #nav 
     { 
      margin: 20px auto; 
     } 
     #nav a 
     { 
      padding: 4px 6px; 
      margin: 3px; 
      border: 1px solid #ccc; 
      text-align: center; 
      text-decoration: none; 
      background-color: #ddd; 
     } 
     #nav a.activeSlide 
     { 
      color: #c00; 
     } 
     #nav a:focus 
     { 
      outline: none; 
     } 

     .slideshow 
     { 
      margin: 20px auto; 
      padding: 0; 
      clear: left; 
     } 
     .slide 
     { 
      margin: 0; 
      padding: 0; 
     } 
     .slideshow, .slide 
     { 
      height: 232px; 
      width: 710px; 
     } 
     .slideshow img 
     { 
      padding: 15px; 
      border: 1px solid #ccc; 
      background-color: #eee; 
      margin: 0; 
     } 
    </style> 
    <script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"> </script> 
    <script type="text/javascript" src="Scripts/jquery.cycle.all.js"></script> 
    <script type="text/javascript"> 


     $(function() { 
      $('#main').cycle({ 

       fx: 'cover', 
       speed: 500, 
       timeout: 2000 

      }); 
     }); 

     $(document).ready(function() { 
      $('.slideshow').cycle({ 
       fx: 'scrollLeft', 
       timeout: 0, 
       pager: '#nav' 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <fieldset> 
     <legend>Cover Effect</legend> 
     <div id="main" style="width: 200px; height: 300px"> 
      <img src="Images/bamboo.jpg" style="width: 200px; height: 300px" /> 
      <img src="Images/ceynote.jpg" style="width: 200px; height: 300px" /> 
      <img src="Images/cypress.jpg" style="width: 200px; height: 300px" /> 
     </div> 
    </fieldset> 
    <fieldset> 
     <legend>Grouping div</legend> 
     <div style="margin: auto; text-align: center"> 
      <div id="nav"> 
      </div> 
     </div> 
     <div class="slideshow"> 
      <div class="slide"> 
       <img src="Images/firefox-512-200x200.png" width="200" height="200" /> 
       <img src="Images/iguana.jpg" width="200" height="200" /> 
       <img src="Images/josh-ships.jpg" width="200" height="200" /> 
      </div> 
      <div class="slide"> 
       <img src="Images/bamboo.jpg" width="200" height="200" /> 
       <img src="Images/ceynote.jpg" width="200" height="200" /> 
       <img src="Images/cypress.jpg" width="200" height="200" /> 
      </div> 
      <div class="slide"> 
       <img src="Images/jungle.jpg" width="200" height="200" /> 
       <img src="Images/palmtree.jpg" width="200" height="200" /> 
       <img src="Images/iguana.jpg" width="200" height="200" /> 
      </div> 
     </div> 
    </fieldset> 
    </form> 
</body> 
</html> 

Вы можете скачать демонстрационный пример asp.net для слайд-шоу из этой ссылки. Click Here...