JavaScript实现轮播特效

JavaScript实现轮播特效

1.封装一个getElementById()方法

//封装一个代替getElementById()的方法
function byId(id) {
    return typeof(id) === "string"?document.getElementById(id):id;
}

2.定时器设置

——当鼠标没有在中心内容上，图片定时器开始启用，每个三秒执行一次切换图片

main.onmouseout = function () {
        //setTimeout超时定时器
        //setInterval定时调用
        timer = setInterval(function () {
            index++;
            if(index>=len){
                index = 0;
            }
            //切换图片
            changeImg();
        }, 3000);
    }

——

function changeImg() {
    //不管元素上有没有类，className属性设置的类会重写元素上的类

    //遍历banner下多有的div及dots下所有的span，将其隐藏，将span清空类
    for (var i = 0; i < len ; i++) {
        pics[i].style.display = 'none';
        dots[i].className = "";
    }

    //根据index索引找到当前div和当前span，将其显示出来和设为当前
    pics[index].style.display = 'block';
    dots[index].className = 'active';
}

3.图片自动轮播

4.图片的自动轮播和停止

5.点击圆点切换图片（圆点和index的绑定）

6.点击圆点切换图片（圆点和图片的绑定）

7.点击按钮切换图片

8.导航菜单的内容和样式

9.导航菜单的展开和收起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/style.css">

</head>
<body>
    <div class="main" id="main">
        <div class="menu-box"></div>
        <!--子菜单-->
        <div class="sub-menu hide" id="sub-menu">
            <!--手机-->
            <div class="inner-box">
                <div class="sub-inner-box">
                    <div class="title">手机、配件</div>
                    <div class="sub-row">
                        <span class="bold mr10">手机通讯：</span>
                        <a href="#">手机</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">以旧换新</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">手机配件：</span>
                        <a href="#">手机壳</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">手机存储卡</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">数据线</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">充电器</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">电池</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">运营商：</span>
                        <a href="#">中国联通</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">中国移动</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">中国电信</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">智能设备：</span>
                        <a href="#">智能手环</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">智能家居</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">智能手表</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">其他配件</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">娱乐：</span>
                        <a href="#">耳机</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">音响</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">收音机</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">麦克风</a>
                    </div>
                </div>
            </div>
            <!--电脑-->
            <div class="inner-box">
                <div class="sub-inner-box">
                    <div class="title">电脑</div>
                    <div class="sub-row">
                        <span class="bold mr10">电脑通讯：</span>
                        <a href="#">手机</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">以旧换新</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">手机配件：</span>
                        <a href="#">手机壳</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">手机存储卡</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">数据线</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">充电器</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">电池</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">运营商：</span>
                        <a href="#">中国联通</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">中国移动</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">中国电信</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">智能设备：</span>
                        <a href="#">智能手环</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">智能家居</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">智能手表</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">其他配件</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">娱乐：</span>
                        <a href="#">耳机</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">音响</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">收音机</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">麦克风</a>
                    </div>
                </div>
            </div>
            <!--家用电器-->
            <div class="inner-box">
                <div class="sub-inner-box">
                    <div class="title">家用电器</div>
                    <div class="sub-row">
                        <span class="bold mr10">手机通讯：</span>
                        <a href="#">手机</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">以旧换新</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">手机配件：</span>
                        <a href="#">手机壳</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">手机存储卡</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">数据线</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">充电器</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">电池</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">运营商：</span>
                        <a href="#">中国联通</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">中国移动</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">中国电信</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">智能设备：</span>
                        <a href="#">智能手环</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">智能家居</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">智能手表</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">其他配件</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">娱乐：</span>
                        <a href="#">耳机</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">音响</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">收音机</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">麦克风</a>
                    </div>
                </div>
            </div>
            <!--家具-->
            <div class="inner-box">
                <div class="sub-inner-box">
                    <div class="title">家具</div>
                    <div class="sub-row">
                        <span class="bold mr10">手机通讯：</span>
                        <a href="#">手机</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">以旧换新</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">手机配件：</span>
                        <a href="#">手机壳</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">手机存储卡</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">数据线</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">充电器</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">电池</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">运营商：</span>
                        <a href="#">中国联通</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">中国移动</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">中国电信</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">智能设备：</span>
                        <a href="#">智能手环</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">智能家居</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">智能手表</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">其他配件</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">娱乐：</span>
                        <a href="#">耳机</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">音响</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">收音机</a>
                        <span class="mr10 ml10">/</span>
                        <a href="#">麦克风</a>
                    </div>
                </div>
            </div>
        </div>

        <!--主菜单-->
        <div class="menu-content" id="menu-content">
            <div class="menu-item">
                <a href="">
                    <span>手机、配件</span>
                    <i>&#xe665</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="">
                    <span>电脑</span>
                    <i>&#xe665</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="">
                    <span>家用电器</span>
                    <i>&#xe665</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="">
                    <span>家具</span>
                    <i>&#xe665</i>
                </a>
            </div>
        </div>
        <!--图片轮播-->
        <div class="banner" id="banner">
            <a href="">
                <div class="banner_slide slide1 slide-active"></div>
            </a>
            <a href="">
                <div class="banner_slide slide2"></div>
            </a>
            <a href="">
                <div class="banner_slide slide3"></div>
            </a>
        </div>
        <!--上一张、下一张按钮-->
        <a href="javascript:void(0)" class="button prev" id="prev"></a>
        <a href="javascript:void(0)" class="button next" id="next"></a>
        <!--圆点按钮-->
        <div class="dots" id="dots">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script src="../js/js.js"></script>
</body>
</html>

　　

*{
    margin: 0px;
    padding: 0px;
}

@font-face {
    font-family: "iconfont";
    src:url("../img/font/iconfont.eot");
    src:url("../img/font/iconfont.eot") format("embedded-opentype"),
        url("../img/font/iconfont.woff") format("woff"),
        url("../img/font/iconfont.ttf") format("truetype"),
        url("../img/font/iconfont.svg#iconfog") format("svg");
}

a:link,a:visited{
    color: #5e5e5e;
}
a{
    text-decoration: none;
}

body{
    font-family: 微软雅黑;
    color: #14191e;
}
.main{
     1200px;
    height: 460px;
    margin: 30px auto;
    overflow: hidden;
    position: relative;
}
.banner{
     1200px;
    height: 460px;
    position: relative;
    overflow: hidden;
}
.banner_slide{
     1200px;
    height: 460px;
    background-repeat: no-repeat;
    display: none;
    float: left;
}
.slide1{
    background-image: url("../img/bg1.jpg");
}
.slide2{
    background-image: url("../img/bg2.jpg");
}
.slide3{
    background-image: url("../img/bg3.jpg");
}
.slide-active{
    display: block;
}
.button{
    position: absolute;
     40px;
    height: 80px;
    left: 244px;
    top: 50%;
    margin-top: -40px;
    background: url("../img/arrow.png") no-repeat center center;
}
.prev{
    transform:rotate(180deg);

}
.button:hover{
    background-color: #333;
    opacity: 0.4;
    /*兼容其他浏览器*/
    filter: alpha(opacity=80);
}
.next{
    left: auto;
    /*如果left和right同时出现，谁先出现采用谁，另一个无效，要想使它有效*/
    /*将有效的那个设置为auto*/
    right: 0;
}
.dots{
    position: absolute;
    right: 20px;
    bottom: 24px;
    text-align: center;
}
.dots span{
    /*排布方式在一条线上*/
    display: inline-block;
     12px;
    height: 12px;
    border-radius: 50%;
    background:rgba(7,17,27,0.4);
    /*c3新增属性
        水平方向  垂直方向  阴影的距离  模糊程度  阴影的颜色  阴影设置为内置的使圆点变小*/
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
    margin-left: 8px;
    /*光标呈现为指示链接的指针（一只手）*/
    cursor: pointer;
}
.dots span.active{
    box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
    background-color: #fff;
}

.menu-box{
     244px;
    height: 460px;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(7,17,27,0.5);
    z-index: 1;
    opacity: 0.5;
}
.menu-content{
     244px;
    height: 454px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    padding-top: 6px;
}
.menu-item{
    height: 64px;
    line-height: 66px;
    font-size: 16px;
    padding: 0 24px;
    position: relative;
}
.menu-item a:link,.menu-item a:visited{
    color: #fff;
}
.menu-item a{
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 0 8px;
    height: 63px;
}
.menu-item i{
    font-family: iconfont;
    position: absolute;
    top: 2px;
    right: 32px;
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    color: rgba(255,255,255,0.5);
}
.sub-menu{
     730px;
    height: 458px;
    border: 1px solid #d9dde1;
    background: #fff;
    position: absolute;
    left: 244px;
    top: 0;
    z-index: 999;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.inner-box{
     100%;
    height: 100%;
    background: url("../img/fe.png") no-repeat;
    display: none;
}
.sub-inner-box{
     652px;
    margin-left: 40px;
    overflow: hidden;
}
.title{
    color: #f01414;
    font-size: 16px;
    line-height: 16px;
    margin: 28px 0 30px 0;
    font-weight: bold;
}
.sub-row{
    margin-bottom: 25px;
}
.bold{
    font-weight: bold;
}
.mr10{
    margin-right: 10px;
}
.ml10{
    margin-left: 10px;
}
.hide{
    display: none;
}
//封装一个代替getElementById()的方法
function byId(id) {
    return typeof(id) === "string"?document.getElementById(id):id;
}

//全局变量
var index = 0,
    timer = null,
    pics = byId("banner").getElementsByTagName("div"),
    len = pics.length,
    dots = byId("dots").getElementsByTagName("span"),
    prev = byId("prev"),
    next = byId("next"),
    menu = byId("menu-content"),
    subMenu = byId("sub-menu"),
    innerBox = subMenu.getElementsByClassName("inner-box"),
    menuItems = menu.getElementsByClassName("menu-item");

function slideImg(){
    var main = byId("main");
    //鼠标滑过清除定时器，离开继续
    main.onmouseover = function () {
        //滑过清除定时器
        if(timer) clearInterval(timer);
    }
    main.onmouseout = function () {
        //setTimeout超时定时器
        //setInterval定时调用
        timer = setInterval(function () {
            index++;
            if(index>=len){
                index = 0;
            }
            //切换图片
            changeImg();
        }, 3000);
    }
    //自动在main上触发鼠标离开的事件
    main.onmouseout();

    //点击圆点切换图片
    for (var i = 0; i < len ; i++) {
        //在JavaScript中function会改变作用域的，此时在function中的i是3
        dots[i].id = i;
        dots[i].onclick = function () {
            index = this.id;

            //调用changeImg，实现切换图片
            changeImg();
        }
    }
    //点击下一张图片
    next.onclick = function () {
        index++;
        if (index>=len) index = 0;
        changeImg();
    }
    //点击上一张图片
    prev.onclick = function () {
        index--;
        if (index<0) index = 2;
        changeImg();
    }
    //导航菜单
    //遍历主菜单，且绑定事件，
    for (var m = 0; m < menuItems.length ; m++) {
        //给每一个menu-item定义data-index属性，作为索引
        menuItems[m].setAttribute("data-index",m);

        menuItems[m].onmouseover = function () {
            subMenu.className = "sub-menu";
            var idx = this.getAttribute("data-index");

            //遍历所有子菜单，将每一个都隐藏
           for (var i = 0; i < innerBox.length ; i++) {
                innerBox[i].style.display = 'none';
                menuItems[i].style.background = 'none';
            }
             menuItems[idx].style.background = 'rgba(0,0,0,0.1)';
                 innerBox[idx].style.display = 'block';
        }
    }
    menu.onmouseout = function () {
        subMenu.className = "sub-menu hide";
    }
    subMenu.onmouseover = function () {
       this.className = "sub-menu";
    }
    subMenu.onmouseout = function () {
        this.className = "sub-menu hide"
    }

}

function changeImg() {
    //不管元素上有没有类，className属性设置的类会重写元素上的类

    //遍历banner下多有的div及dots下所有的span，将其隐藏，将span清空类
    for (var i = 0; i < len ; i++) {
        pics[i].style.display = 'none';
        dots[i].className = "";
    }

    //根据index索引找到当前div和当前span，将其显示出来和设为当前
    pics[index].style.display = 'block';
    dots[index].className = 'active';
}


slideImg();

　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yangHS/p/10851484.html