使用JavaScript实现图片轮播图（代码教程）_CSS

css代码：

img {
        width: 100%;
    }

    .liImg {
        width: 900px;
        float: left;
        list-style: none;
    }

    .ulImg {
        width: 90000000px;
        padding: 0;
        margin: 0;
        /*动画时间 2s*/
        transition: all 2s;
    }

    .main {
        width: 900px;
        overflow: hidden;
        position: relative;
        margin: 0 auto;
    }

    .arrows {
        z-index: 999;
        position: absolute;
        padding-top: 350px;
        width: 900px;
    }

    .arrow {
        cursor: pointer;
        background-color: rgba(136, 136, 136, 0.3);
        font-size: 45px;
        color: rgba(136, 136, 136, 0.3);
    }

    /*鼠标经过时更改颜色*/
    .arrow:hover {
        color: rgba(9, 187, 7, 0.5);
        background-color: rgba(9, 187, 7, 0.5);
    }

    .btnDiv {
        width: 960px;
        height: 9px;
        margin: 13px auto;
    }

    .parent {
        margin-left: 23%;
    }

    .pBtn {
        float: left;
        border-radius: 150px;
        background-color: grey;
        width: 30px;
        height: 7px;
        margin-left: 15px;
    }

    .pBtn:hover {
        background-color: red;
    }

html代码：

<p class="main">  
    <!--浮动在图片上的左右按钮-->  
    <p class="arrows">  
        <span title="上一张" class="arrow"> << </span>  
        <span title="下一张" class="arrow" style="float: right"> >> </span>  
    </p>  
    <ul class="ulImg">  
        <li class="liImg"><img src="__IMAGES__/slideshow/pic01.jpg"></li>  
        <li class="liImg"><img src="__IMAGES__/slideshow/pic02.jpg"></li>  
        <li class="liImg"><img src="__IMAGES__/slideshow/pic03.jpg"></li>  
        <li class="liImg"><img src="__IMAGES__/slideshow/pic04.jpg"></li>  
        <li class="liImg"><img src="__IMAGES__/slideshow/pic05.jpg"></li>  
        <li class="liImg"><img src="__IMAGES__/slideshow/pic06.jpg"></li>  
        <li class="liImg"><img src="__IMAGES__/slideshow/pic07.jpg"></li>  
        <li class="liImg"><img src="__IMAGES__/slideshow/pic08.jpg"></li>  
        <li class="liImg"><img src="__IMAGES__/slideshow/pic09.jpg"></li>  
        <li class="liImg"><img src="__IMAGES__/slideshow/pic10.jpg"></li>  
        <li class="liImg"><img src="__IMAGES__/slideshow/pic11.jpg"></li>  
    </ul>  
</p>  
<!--底部按钮，可以利用css更改样式-->  
<p class="btnDiv">  
    <p class="parent"></p>  
</p>

JavaScript代码：

<script>  
    /** 
     * 全局变量 count isGo timer 
     * */  
//    循环的次数  
    var count = 0;  
    //    循环的方向  
    var isGo = false;  
    //    循环的时间  
    var timer;  
  
    /** 
     * 控制图片轮播 
     * */  
    function showTime() {  
        var ulImg = document.getElementsByClassName('ulImg')[0];  
        var liImg = document.getElementsByClassName("liImg");  
        timer = setInterval(function () {  
            if (isGo == false) {  
                count++;  
                ulImg.style.transform = "translate(" + -900 * count + "px)";  
                if (count >= liImg.length - 1) {  
                    count = liImg.length - 1;  
                    isGo = true;  
                }  
            } else {  
                count--;  
                ulImg.style.transform = "translate(" + -900 * count + "px)";  
                if (count <= 0) {  
                    count = 0;  
                    isGo = false;  
                }  
            }  
            pBtnColor();  
        }, 5000);  
    }  
  
    /** 
     * 控制上一页和下一页功能 
     * */  
    function arrow() {  
        var arrow = document.getElementsByClassName('arrow');  
        var ulImg = document.getElementsByClassName('ulImg')[0];  
        var liImg = document.getElementsByClassName("liImg");  
        for (var i = 0; i < arrow.length; ++i) {  
            //当鼠标经过的时候，清除定时器timer  
            arrow[i].onmouseover = function () {  
                clearInterval(timer);  
            };  
            //当鼠标离开的时候，继续图片轮播  
            arrow[i].onmouseout = function () {  
                showTime();  
            };  
            //当点击的时候  
            arrow[i].onclick = function () {  
                if (this.title == "下一张") {  
                    count++;  
                    if (count >= liImg.length - 1) {  
                        count = 0;  
                    }  
                } else {  
                    count--;  
                    if (count <= 0) {  
                        count = liImg.length - 1;  
                    }  
                }  
                ulImg.style.transform = "translate(" + -900 * count + "px)";  
                pBtnColor();  
            }  
        }  
    }  
  
    //  
    <!--根据图片的数量，动态创建底部按钮-->  
    function createDivBtn() {  
        var pParent = document.getElementsByClassName('parent')[0];  
        var chlidBtn = document.createElement('p');  
        chlidBtn.className = "pBtn";  
        pParent.appendChild(chlidBtn);  
    }  
  
    //    控制底部按钮的颜色  
    function pBtnColor() {  
        var pBtn = document.getElementsByClassName("pBtn");  
        for (var i = 0; i < pBtn.length; ++i) {  
            pBtn[i].style.backgroundColor = "grey";  
        }  
        pBtn[count].style.backgroundColor = "red";  
    }  
  
    //    控制底部按钮触发的事件  
    function pBtnEvent() {  
        var pBtn = document.getElementsByClassName("pBtn");  
        pBtn[0].style.backgroundColor = "red";  
  
        for (var i = 0; i < pBtn.length; ++i) {  
  
//            这句语句重要，用于标记当前选中的  
            pBtn[i].index = i;  
  
            pBtn[i].onmouseover = function () {  
                clearInterval(timer);  
  
                for (var j = 0; j < pBtn.length; ++j) {  
                    pBtn[j].style.backgroundColor = 'grey';  
                }  
  
                pBtn[this.index].style.backgroundColor = 'red';  
  
                if (this.index == pBtn.length - 1) {  
                    isGo = true;  
                }  
                if (this.index == 0) {  
                    isGo = false;  
                }  
                count = this.index;  
                var ulImg = document.getElementsByClassName('ulImg')[0];  
                ulImg.style.transform = "translate(" + -900 * count + "px)";  
            };  
            pBtn[i].onmouseout = function () {  
                showTime();  
            };  
        }  
    }  
  
    window.onload = function () {  
        showTime();  
        var liImg = document.getElementsByClassName("liImg");  
        for (var j = 0; j < liImg.length; ++j) {  
            createDivBtn();  
        }  
        arrow();  
        pBtnEvent();  
  
    }  
</script>

效果图：图片轮播图

好了，请耐心看，必要的注释，已经做了，看完应该有一定的理解