jquery实现图片轮番效果（一）

最近因项目功能需要，就研究了js实现多张图片轮番展示的功能。废话不多说，直接上代码

效果图：

1、显示页面效果的代码，在里定义轮番的图片

<div id="wrapper">
            <!-- 最外层部分 -->
            <div id="banner">
                <!-- 轮播部分 -->
                <ul class="imgList">
                    <!-- 图片部分 -->
                    <li>
                        <a href="#"><img src="img/shiti.png" width="400px" height="200px" alt="puss in boots1"></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/312_20161009162348.png" width="400px" height="200px" alt="puss in boots2"></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/312_20161009162444.png" width="400px" height="200px" alt="puss in boots3"></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.png" width="400px" height="200px" alt="puss in boots4"></a>
                    </li>       
                </ul>
        <img src="img/left.png" width="20px" height="40px" id="prev"> 
                <img src="img/right.png" width="20px" height="40px" id="next">
                <div class="bg"></div>
                <!-- 图片底部背景层部分-->
                <ul class="infoList">
                    <!-- 图片左下角文字信息部分 -->
                    <li class="infoOn">puss in boots1</li>
                    <li>puss in boots2</li>
                    <li>puss in boots3</li