16 JavaScript实现网站轮播特效

html结构

css样式

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
body{

    font-family: "微软雅黑";
    color: #14191e
}
.main{

    width: 1200px;
    height: 400px;
    margin: 30px auto;
    overflow: hidden; 
    position: relative;
}
.banner{

    width: 1200px;
    height: 460px;
    position: relative;
}
.banner-slide {

    width: 1200px;
    height: 460px;
    position: absolute;
    background-repeat: no-repeat;
    display: none;
}
/* 显示当前图片 */
.slider-active{

    display: block; 
}
.slider1{

    background-image: url('../img/banner1.jpg');
}
.slider2{
    background-image: url('../img/banner2.jpg');
}
.slider3{

    background-image: url('../img/banner3.jpg');
}
.button{

    position: absolute;
    width: 40px;
    height: 80px;
    left: 0px;
    top: 50%;
    margin-top: -40px;
    background: url(../img/nexImg.png) no-repeat center center;
}
.button:hover{

    background-color: #333;
    opacity: 0.8;
    filter: alpha(opacity=80); 
}
.next{

    left: auto;
    right: 0;
}
.prev{

    transform: rotate(180deg);
}
.dots{
    position: absolute;
    right: 20px;
    bottom: 24px;
    text-align: center;
}
.dots span{

    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(17, 17, 27, 0.5);
    margin-left: 8px;
    line-height: 12px;
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset; /* 圆点描边*/
}
.dots span.active{

    box-shadow: 0 0 0 2px rgba(17, 17, 27, 0.5);
    background: #fff;
}

js代码实现轮播

//封装一个代替getElementById()的方法
function byId(id) {

    return typeof (id) === "string" ? document.getElementById(id) : id;
}

//鼠标轮播

var index = 0;
var timer = null;//定时器
var pics = byId("banner").getElementsByTagName("div"); //banner下面的div
var len = pics.length;//有多少个图片
var dots = byId("dots").getElementsByTagName("span"); //小圆点控制
var prev = byId("prev"); //上一张
var next = byId("next");//下一张
function slideImg() {

    var main = byId("main");
    //滑过清除定时器 离开继续执行
    main.onmouseover = function () {
        //滑过清除定时器
        if (timer) clearInterval(timer); //鼠标移入清除定时器
    }

    main.onmouseout = function () {

        timer = setInterval(function () {
            index++;
            if (index >= len) {
                index = 0;
            }
            changeImg();//点击切换图片
        }, 3000);
    }

    main.onmouseout(); //这里是方法执行  自动在main上触发事件

    //点击圆点切换图片  遍历所有点击 且绑定事件

    for (var d = 0; d < len; d++) {
        //给所有span添加一个id的属性 值为d 作为当前的span的索引
        dots[d].id = d;
        dots[d].onclick = function () {

            //改变index为当前span的id值
            index = this.id;
            //调用changeImg实现切换图片
            changeImg();
        }
    }

    //下一张
    next.onclick = function () {

        index++;
        if (index > len) index = 0;
        changeImg();
    };
    //上一张
    prev.onclick = function () {
        index--;
        if (index < 0) {

            index = len - 1;
        }
        changeImg();
    };
}

function changeImg() {

    for (var i = 0; i < len; i++) {

        pics[i].style.display = "none";
        dots[i].className = "";
    }
    pics[index].style.display = "block";
    dots[index].className = "active";
}
slideImg();

实现效果如下：

image.png

image.png