js实现轮播图特效

js实现轮播图特效

html代码：

<div class="slider" id="slider">
    <div class="slider-img">
        <ul>
            <li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/6.jpg" alt=""/></a></li>
        </ul>
    </div>
    <div class="slider-ctrl">
        <span class="prev" id="prev"></span>
        <span class="next" id="next"></span>
    </div>
</div>

css代码：

* {
   
    margin: 0;
    padding: 0;
}
.slider {
   
    width: 310px;
    height: 265px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
.slider-img {
   
    width: 310px;
    height: 220px;
}
ul {
   
    list-style: none;
}
li {
   
    position: absolute;
    top: 0;
    left: 0;
}
.slider-ctrl {
   
    text-align: center;
    padding-top: 10px;
}
.slider-ctrl-con {
   
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../images/icon.png) no-repeat -24px -780px;
    text-indent: -99999px;
    margin: 0 5px;
    cursor: pointer;
}
.slider-ctrl-con.current {
   
    background-position: -24px -760px;
}
.prev,.next {
   
    position: absolute;
    top: 40%;
    width: 30px;
    height: 35px;
    background: url(../images/icon.png) no-repeat;
}
.prev {
   
    left: 10px;
}
.next {
   
    right: 10px;
    background-position: 0 -44px;
}

JavaScript代码：

<script type=