Jquery 自动更改鼠标上方和计时器上的div

我有点糊涂，所以任何帮助都会很好

我需要做的是使与特定li关联的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>

$（函数（）{
$（“#开关li”）.mouseover（函数（）{
var$this=$（this）；
$（“#幻灯片分区”）.hide（）；
$（“#slide”+$this.attr（“id”）.replace（/switch/，”）.show（）；
});
});

我对您的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>

鼠标悬停部分请参见

---

计时器部分见。

你知道你可以使用

class=“slide”

和

.index（）

函数吗？对不起，就像我说的，我对这有点陌生，可以阅读和理解一些代码的工作原理，但编写它不是我的强项，你能举个例子说明你的想法吗…哇，谢谢你这么快回来。是否可以同时使用这两种功能。。。i、 即在计时器上以及在列表项悬停时自动更改。感谢您迄今为止的帮助，请随意修改代码。

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