jq滑过文字切换图片

为了让自己能有个深刻记忆，把自己练习的代码一一总结一下行程文字。

jq滑过文字切换图片就是防淘宝橱窗广告形式。滑过文字，然后后面的图片相对应的发生变化，就是索引值对应。

1、html布局代码

<div class="wrapper">

      <ul class="left">

        <li><a href="#">选矿设备</a></li>

        <li><a href="#">破碎设备</a></li>

        <li><a href="#">制砂设备</a></li>

        <li><a href="#">磨粉设备</a></li>

      </ul>

      <ul class="right">

        <li><a href="#"><img src="images/bigpc.jpg" alt=""></a></li>

        <li><a href="#"><img src="images/bigpc1.jpg" alt=""></a></li>

        <li><a href="#"><img src="images/bigpc2.jpg" alt=""></a></li>

        <li><a href="#"><img src="images/bigpc3.jpg" alt=""></a></li>

      </ul>

    </div>

2、css样式代码

.container3 .wrapper{overflow: hidden;width: 100%;height: 506px;margin-bottom: 50px;}

.container3 .wrapper .left,.container3 .wrapper .right{float: left;}

.container3 .wrapper .left{width: 30%;font-size: 26px;line-height: 45px;}

.container3 .wrapper .left li{margin-bottom: 20px;border-bottom: 1px solid #ccc;text-align: center;}

.container3 .wrapper .right{width: 68%;margin-left:2%;}

.container3 .wrapper .right img{display: block;width: 100%;}

3、js代码

$(document).ready(function(){

    $('.wrapper .left').mouseover(function(){

        var indexLi = $(this).index();//对应图片的索引值与文字的索引值一一对应

        $('.wrapper .right').eq('indexLi').show().sublings().hide();//对应图片显示，其他图片隐藏

    })

})