Javascript слайд-шоу кликабельные кнопки - PullRequest
Новая
       6

Javascript слайд-шоу кликабельные кнопки

0 голосов
/ 07 июня 2011

Я ищу небольшую помощь с моим слайд-шоу javascript, для которого код был использован из учебника в Интернете. Я хочу сделать так, чтобы при наведении курсора мыши изображение не менялось. Кроме того, мне бы хотелось, чтобы в нижней части слайд-шоу были две кнопки, например изображение ниже.

http://imageshack.us/photo/my-images/841/slideshowexample.jpg/

    <img src="/wp-content/themes/twentyten/images/slide1.jpg" name="slide" />
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 5 seconds
setTimeout("slideit()",5000)
}
slideit()
//--></div></script>

Заранее спасибо, Ник.

1 Ответ

0 голосов
/ 07 июня 2011

Если вы просто не делаете это как упражнение, чтобы узнать больше о JavaScript, лучшим вариантом, чем домашнее слайд-шоу, вероятно, будет использование библиотеки DOM.Существует довольно хорошее руководство по созданию слайд-шоу с jQuery в SixRevisions.

Существует также несколько готовых плагинов для слайд-шоу для различных библиотек DOM, в jQuery есть куча .

Если бы вы продолжали использовать текущий код, чтобы создать паузу при наведении курсора, вам сначала нужно создать переменную и сохранить в ней результат setTimeout(). 

var timer;
timer = setTimeout(slideIt, 5000);  // note I just passed the function name instead
                                    // of quoting an invocation.  Using "slide()"
                                    // creates an unnecessary eval() call.

Затем можно использовать переменную timer для вызова clearTimeout() в событии наведения мыши, которое вы прикрепляете к изображению.Вам также потребуется прикрепить событие mouseout, чтобы снова вызвать setTimeout(), чтобы перезапустить слайд-шоу.Тем не менее, это ситуация, которую вы действительно должны использовать setInterval() и clearInterval() вместо setTimeout().

Вам не нужны <!-- и //-->, если вы не ожидаете, что кодработать в древних браузерах, таких как Netscape 1.0 и IE 2;Все современные браузеры понимают JavaScript и не нуждаются в этом хакере, чтобы скрыть JS.

...