Здравствуйте! Заранее извиняюсь за свою некомпетентность.) Сам дизайнер сумок, решил попробовать сделать сайт-визитку... Вопрос такой: При наведении курсора на блок начинают меняться фото. Задача в том, чтобы при отводе курсора, слайдшоу возвращалось к первому фото, а не оставалось на текущем. Используется этот плагин -http://slideshow.hohli.com/ Заранее спасибо! HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SlideShow</title> <script type="text/javascript" src="file:///D|/a.slideshow/js/jquery.js"></script> <script type="text/javascript" src="file:///D|/a.slideshow/js/jquery.aslideshow.pack.js"></script> <style> .slideshow-content {color:#333; overflow:hidden; position:relative; z-index:1;} .slideshow-slide {display:none; position:absolute;} .slideshow-load {display:none;} .slideshow-shadow {position:absolute; z-index:200;} .slideshow-opacity {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpiYmBgaAAIMAAAjwCD5Hc2/AAAAABJRU5ErkJggg==);background:rgba(0, 0, 0, 0.5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#85000000, endColorstr=#85000000);} </style> </head> <body> <div id="CustomSlideshow"> <img src="1.jpg" alt="" /> <img src="2.jpg" alt="" /> <img src="3.jpg" alt="" /> </div> <script type="text/javascript"> $(document).ready(function(){$('#CustomSlideshow').slideshow({playhover:true,playframe:false, panel:false, time:1500, effecttime:1500, index:0, width: 310, height: 213 });});</script> </body> </html>
у этого плагина есть метод goToSlide(N) - который отправляет на слайд с номером N. По идее, вызывай этот метод на mouseout и все.
Спасибо за ответ! Но хочется немного пояснения) Действовать надо как то так? Что тут неправильно? Спасибо. HTML: <body> <div> <div id="CustomSlideshow"> <p><img src="../../site/img/1.jpg" alt="" /> </p> <p><img src="../../site/img/2.jpg" alt="" /> </p> <p><img src="../../site/img/Untitled-1.jpg" alt="" /> </p> </div> <script type="text/javascript"> $(document).ready(function(){$('#CustomSlideshow').slideshow({playhover:true,playframe:false, panel:false, time:800, effecttime:1100, index:0, width: 310, height: 213 });});</script> <script type="text/javascript"> $(document).ready(function(){ $("p").mouseout(function(){ $('#CustomSlideshow').goToSlide(1) }); }); </script>
Решение найдено такое) Код (Text): <div class="CustomSlideshow"> <div class="gallery"><a href="http://www.designbombs.com/portfolio/sushi-robots/" class="thumb"><span><img src="../../site/img/1.jpg" alt="" /></span></a></div> <div class="return"> <img src="../../site/img/2.jpg" alt="" /> </div> <div class="return"><img src="../../site/img/Untitled-1.jpg" alt="" /> </div> </div> <script type="text/javascript"> $(document).ready(function(){ var slide = $('.CustomSlideshow').slideshow({playhover:true,playframe:false, panel:false, time:800, effecttime:1100, index:0, width: 310, height: 213 }); $(".return").mouseout(function(){ slide.goToSlide(0); });}); </script>