<!--图片轮播      Start-->

                    <div class="pics-ul">

                        <div class="pics-ulleft">                            

                            <ul id="allImg">

                                <li><img src="img/img01.png"/></li>    

                                <li><img src="img/img2.jpg"/></li>    

                                <li><img src="img/img1.jpg"/></li>    

                                <li><img src="img/img3.jpg"/></li>    

                                <li><img src="img/img4.jpg"/></li>    

                            </ul>

                            <a name="btn" id="prev" class="prev" style="display: block;"></a>

                            <a name="btn" id="next" class="next" style="display: block;"></a>

                            <ul id="btn" class="pagination">

                                 <li class="hover"><a href="#0">1</a></li>

                                 <li><a href="#1">2</a></li>

                                 <li><a href="#2">3</a></li>

                                 <li><a href="#3">4</a></li>

                                 <li><a href="#4">5</a></li>

                            </ul>

                        </div>

                        <div class="pics-ulright"><img src="img/imgright.png"/></div>

                    </div>

                <!--图片轮播      End-->   

 

 

 

 

 

/*图片轮播*/

var but1 = document.getElementById("prev");

var abtn = document.getElementById("btn").getElementsByTagName("li"); //获取所有的按钮

var lis = document.getElementById('allImg').getElementsByTagName('li');

var but2 = document.getElementById("next");

var index = 0;

var timer = null;

but2.onclick = function() {

    index++;

    if (index > lis.length - 1) {

        index = 0;

    }

    setImg(index);

}

but1.onclick = function() {

    index--;

    if (index < 0) {

        index = lis.length - 1;

    }

    setImg(index);

}

function changeImg() {

    if (index == lis.length - 1) { //当到最后一张图片时

        index = 0

    } else {

        index++; //图片索引发生改变

    }

    setImg(index);

}

function setImg(index) {

    for (j = 0; j < lis.length; j++) {

        lis[j].style.display = "none";

    }

    lis[index].style.display = "block";

    //按钮的样式要与图片对应

    for (var i = 0; i < abtn.length; i++) {

        abtn[i].className = ""

    }

    abtn[index].className = "hover";

}

//自动切换

timer = setInterval(changeImg, 3000);

//按钮

for (var i = 0; i < abtn.length; i++) {

    (function() {

        var p = i

        abtn[p].onclick = function() {

            index = p;

            setImg(index);

        }

    })();

}