欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用JavaScript实现图片轮播图(代码教程)

程序员文章站 2022-09-16 08:08:12
css代码: img { width: 100%; } .liImg { width: 900px;...
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>  

效果图:图片轮播图

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