jquery编写一个简易的播放器竖型轮播

首先，这个是简易版的，所以程序可能会有不完善，见谅，老样子，话不多说，直接上码。

首先我们编写html的代码，一拨胡乱分析过后，我们发现布局可以简化为就是一个盒子中装了两个ul标签，左边一个右边一个，这样我们可以这样布局。

    <div   id="BOSS" >
    <ul id="one">
    <li style="display:list-item;">
        <img src="img/1.jpg" style="width:1000px;height:300px;" />
    </li>
    <li>
        <img src="img/2.jpg" style="width:1000px;height:300px;" />
    </li>
    <li>
        <img src="img/3.jpg" style="width:1000px;height:300px;" />
    </li>
    <li>
        <img src="img/4.JPG" style="width:1000px;height:300px;" />
    </li>
    <li>
        <img src="img/5.jpg" style="width:1000px;height:300px;" />
    </li>
</ul>
<ul id="two">
    <li class="current"><a href="#">帅1</a></li>
    <li><a href="#">帅2</a></li>
    <li><a href="#">帅3</a></li>
    <li><a href="#">帅4</a></li>
    <li class="last"><a href="#">帅5</a></li>
</ul>
    </div>

   当然，图片的话最好是自己整理下，不一定要和我的一样，但是为了方便遍历和插入，还是取数字的好。

那么接下来是样式表，样式表的话我就简写了，当然，你们可以用定位来做右边的选择栏，我为了图方便就直接写了float：right。

<style type="text/css">
        #one {
            width:1000px;
            height:300px;
            list-style:none;
            display:inline-block;
        }
            #one li {
            display:none;
            }
        #two {
        width:247px;
        height:300px;
        float:right;
            list-style:none;
            line-height:50px;
        }
            #two li {
            }
            #two .current {
            background-color:#000;
            color:#fff;

            }

那么接下来才是重点，上js代码：

<script type="text/javascript">

//首先是showImage函数，用来隐藏li和增加样式

function showIame（index）{

currentIndex=index;

$("#one li ").hide();

$("#one li").eq(index).stop(true).fadeIn(500);

$("#two li").removeClass("current");

$("#two li").eq(index).addClass("current");

}

//现在是star函数，用来播放图片

function star（）{

var currentIndex=0；

var temId；

temId=window.setInterval(funciton(){

if(currentIndex<9){

currentIndex++;

}

else{

currentIndex=0;

}

showImage（currentIndex）；

}，1000);

}

//现在是停止函数

function stop(){

windows.clearInterval(temId);

}

$(function(){

$("#BOSS").hover(

function () {star(); },

function () {stop();} );

$("#two li").each(function (index){

$(this).mouseover(function(){showImage(index);})

});

});

</script>