Автоматического изменения DIV при наведении курсора мыши и таймер

Я немного габаритный нуб так что любая помощь будет большой ...Автоматического изменения DIV при наведении курсора мыши и таймер

Что мне нужно сделать, это его так, чтобы ДИВ, связанное с конкретным литием может изменить при зависании, а также автоматически изменять таймер, чтобы он прокручивал эту опцию.

вот мой код:

<script type="text/javascript"> 
    $(function() { 
     $("#switches li").mouseover(function() { 
     var $this = $(this); 
      $("#slides div").hide(); 
      $("#slide" + $this.attr("id").replace(/switch/, "")).show(); 
     }); 
    }); 
</script> 


<div id="featured"> 
<ul id="switches"> 
    <li id="switch1"><a href="activity_spa.html">Spa &amp; Wellness</a></li> 
    <li id="switch2"><a href="#">Gala Venues</a></li> 
    <li id="switch3"><a href="#">Dining</a></li> 
    <li id="switch4"><a href="#">Shopping</a></li> 
    <li id="switch5"><a href="#">Golf</a></li> 
    <li id="switch6"><a href="#">Team Building</a></li> 
    <li id="switch7"><a href="#">Equestrian</a></li> 
</ul> 

<div id="slides"> 
    <div id="slide1"><img src="images/image2.jpg" alt="" /></div> 
    <div id="slide2" style="display:none;"><img src="images/image6.jpg" alt="" /></div> 
    <div id="slide3" style="display:none;"><img src="images/image1.jpg" alt="" /></div> 
    <div id="slide4" style="display:none;"><img src="images/image3.jpg" alt="" /></div> 
    <div id="slide5" style="display:none;"><img src="images/image5.jpg" alt="" /></div> 
    <div id="slide6" style="display:none;"><img src="images/image7.jpg" alt="" /></div> 
    <div id="slide7" style="display:none;"><img src="images/image4.jpg" alt="" /></div> 
</div> 
</div>

источник

2010-04-28 IrishSaffa

Знаете ли вы, что вы можете использовать функцию 'class =" slide "и' .index() '? –

извините, как я уже сказал, я новичок в этом, могу прочитать и понять, как работает какой-то код, но писать это не моя сильная сторона, у вас есть пример того, что вы думаете ... – IrishSaffa

Я изменил ваш HTML немного

<div id="featured"> 
<ul id="switches"> 
    <li id="switch_1"><a href="activity_spa.html">Spa &amp; Wellness</a></li> 
    <li id="switch_2"><a href="#">Gala Venues</a></li> 
    <li id="switch_3"><a href="#">Dining</a></li> 
    <li id="switch_4"><a href="#">Shopping</a></li> 
    <li id="switch_5"><a href="#">Golf</a></li> 
    <li id="switch_6"><a href="#">Team Building</a></li> 
    <li id="switch_7"><a href="#">Equestrian</a></li> 
</ul> 

<div id="slides"> 
    <div id="slide_1">1<img src="images/image2.jpg" alt="" /></div> 
    <div id="slide_2" style="display:none;">2<img src="images/image6.jpg" alt="" /></div> 
    <div id="slide_3" style="display:none;">3<img src="images/image1.jpg" alt="" /></div> 
    <div id="slide_4" style="display:none;">4<img src="images/image3.jpg" alt="" /></div> 
    <div id="slide_5" style="display:none;">5<img src="images/image5.jpg" alt="" /></div> 
    <div id="slide_6" style="display:none;">6<img src="images/image7.jpg" alt="" /></div> 
    <div id="slide_7" style="display:none;">7<img src="images/image4.jpg" alt="" /></div> 
</div> 
</div>

и сценарий

$(function() { 
     $("#switches li").mouseover(function() { 
     var $this = $(this); 
     $("#slides div").hide(); 
     $("#slide_" + $this.attr("id").split('_')[1]).show(); 
     }); 
    });

увидеть working demo для наведения мыши части.

working demo для части таймера.

источник

2010-04-28 10:24:50 rahul

Вау, спасибо, что так быстро вернулись. Возможно ли иметь обе функциональности ... т. Е. Автоматически изменяется по таймеру, а также при наведении элемента списка. Благодарим вас за помощь и не стесняйтесь модифицировать код. – IrishSaffa

Автоматического изменения DIV при наведении курсора мыши и таймер

ответ

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