js实现轮播图——三种切换方式

原本想用css实现轮播效果，就是改变透明的来实现轮播，但感觉太low了，于是便用JavaScript实现了，因为刚接触没多久所以写的不好。

先给大家看看效果图：

图片是我电脑保存的，如果要用的话可以把内的图片地址改下。

HTML

<div class="ad" id="ad">
        <div class="pics" id="pics">
            <img src="ad1.jpg">
            <img src="ad2.jpg">
            <img src="ad3.jpg">
            <img src="ad4.jpg">
            <div class="dots" id="dots">
                <span class="current"></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <!--上下页按钮-->
            <div>
                <a href="javascript:void(0)" class="button prev" id="prev"></a>
                <a href="javascript:void(0)" class="button next" id="next"></a>
            </div>
        </div>
    </div>

CSS

<style>

        .ad{
            width: 990px;
            height: 360px;
            margin: 20px auto;
            position: relative;
            margin-top: 300px;
        }
        .pics{
            width: 990px;
            height: 360px;
            overflow: hidden;/*内容会被修剪，并且其余内容是不可见的*/
            position: relative;
            cursor: pointer;   /*光标*/
        }

        .pics span{
            display: block;
            height: 60px;
            width: 220px;
            color: white;
            font-size: 18px;
            line-height: 60px;
            text-align: center;
            background: url("img/iconfont-arrow(1).png") no-repeat right center / 10% 20%;  
            cursor: pointer;  /*光标*/
        }
        .dots{
            position: absolute;
            right: 20px;
            bottom: 10px;
        }
        .dots span{
            display: inline-block;/*行列块*/
            width: 10px;
            height: 10px;
            border-radius: 10px; /*把四个行列块变成圆边框*/
            margin-left: 6px;
            box-shadow: 0  0 4px 1px rgba(0,0,0,0.2) inset;/*向div元素添加阴影*/
        }
        .dots .current{
            background-color: white;
        }
        .button{
            position: absolute;
            width: 40px;
            height: 70px;
            right: 0;
            top:50%;
            margin-top: -35px;
            background: url("img/iconfont-arrow(1).png") no-repeat center center;
            opacity: 0.4;  /*透明的*/
            filter: opacity(40);   /*滤镜*/
            z-index: 1; /*z-index属性指定一个元素的堆叠顺序。 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
        }
        .prev{
            left: 220px;
            transform: rotate(180deg); /*图标逆转*/
        }
        .button:hover{
            background-color: #717377;
            opacity: 0.8;   /*左右切换按键的透明度*/
            filter: opacity(80);  /*兼容浏览器*/
        }
    </style>

JS

 function byId(id) {
        return typeof(id) ==="string" ? document.getElementById(id) : id;
    }
    var index=0;
    var timer=null;
    var pics=byId("pics");
    var picArr=pics.getElementsByTagName("img");
    var dots=byId("dots");
    var spanArr=dots.getElementsByTagName("span");
    var ad=byId("ad");
    //底部按钮控制图片轮播
    for(var w=0;w<picArr.length;w++){
        spanArr[w].data=w;
        spanArr[w].onmouseover=function (/*ev*/) {
            index=this.data;
            imgChange();
        }
    }
    //获取上下页按钮
    var prev=byId("prev"),
        next=byId("next");
    next.onclick=function () {
        index++;
        index=index>=picArr.length ? 0 : index;
        imgChange();
    };
    prev.onclick=function () {
        index--;
        index=index<0 ? (picArr.length-1) : index;
        imgChange();
    };
    slideImg();
    //轮播图函数
    function slideImg() {
        ad.onmouseover=function () {
            if(timer) {
                clearInterval(timer);
            }
        };
        ad.onmouseout=function () {
            timer=setInterval(function () {
                imgChange();
                index++;
                index=index >= picArr.length ? 0 : index;
            },2000)
        };
        ad.onmouseout();
    }
    //封装图片切换函数
    //底部点钮的定时切换
    function imgChange() {
        for(var i=0;i<picArr.length;i++){
            picArr[i].style.display='none';
            spanArr[i].className="";
        }
        picArr[index].style.display='block';
        spanArr[index].className="current";

    }

最后

以上就是缓慢柠檬为你收集整理的js实现轮播图——三种切换方式js实现轮播图——三种切换方式JS的全部内容，希望文章能够帮你解决js实现轮播图——三种切换方式js实现轮播图——三种切换方式JS所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。