jq滑过文字切换图片

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

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

1、html布局代码

     

       

• 选矿设备

       

• 破碎设备

       

• 制砂设备

       

• 磨粉设备

     

     

       

• 

       

• 

       

• 

       

• 

     

   

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();//对应图片显示，其他图片隐藏

    })

})