jquery实现纵向焦点轮播

今天把jQuery实现轮播的代码整理了出来，下面贴出代码！

script代码：

<script>//1.初始化，让图片显示$(document).ready(function(e) {        $(".img_left>li:first-child").css("display","block");//当鼠标悬停在上$(".right_text>li").mouseover(function(e) {            //删除li当前有的样式$(".right_text>li").removeClass("currentStyle");//添加样式$(this).addClass("currentStyle");//var s = $(this).index();$(".img_left>li").css("display","none");$(".img_left>li").eq(s).css("display","block");        });    });</script>

css代码：

<style>body,ul,li{margin:0px;padding:0px;font-size:14px;}ul{list-style:none;float:left;}#box_out{width:615px;height:265px;border:2px solid #F00;margin:50px auto; }#box_out>.img_left{width:403px;height:265px;position:relative;}#box_out>.img_left>li{width:100%;height:100%;position:absolute;top:0px;left:0px;overflow:hidden;display:none;}#box_out>.img_left>li>img{width:100%;height:auto;}/*left_text*/#box_out>.right_text{width:212px;height:265px;}#box_out>.right_text>li{line-height:38px;background:url(img/bg_j04.jpg) repeat-x;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:34px;z-index:999px;}#box_out>.right_text>.currentStyle{background:url(img/bg_j05.png) no-repeat;margin-left:-13px;width:225px;height:38px;font-size:12px;padding-left:44px;z-index:999px;}</style>

body中的代码：

<div id="box_out">  <ul class="img_left">    <li class="currentStyle"><img src="img/img1.jpg"/></li>    <li><img src="img/img2.jpg"/></li>    <li><img src="img/img3.jpg"/></li>    <li><img src="img/img4.jpg"/></li>    <li><img src="img/img5.jpg"/></li>    <li><img src="img/img6.jpg"/></li>    <li><img src="img/img7.jpg"/></li>  </ul>  <ul class="right_text">    <li class="currentStyle">极致美景 中国七大秋色斑斓地</li>    <li>畅游大理 体味民族风情</li>    <li>桂林初冬 浓妆淡抹最佳处</li>    <li>新疆库尔勒：铁关西天涯极目少行客</li>    <li>神秘美丽的内蒙古草原</li>    <li>历史遗产:兴安灵渠</li>    <li>回归自然 感受风情</li>  </ul></div>

jQuery库

<script src="js/jquery-1.11.0.min.js"></script>

这得需要去下载jQuery库，链接地址为http://jquery.com/download/

本人是个新手，如有错误请多多指教！谢谢