为了让自己能有个深刻记忆，把自己练习的代码一一总结一下行程文字。
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();//对应图片显示，其他图片隐藏
})
})
