03JavaScript实现轮播特效21

day21(其实花了不止一天）

项目分为三个部分：

　　html（内容）

　　css（样式）

　　javascript（动作）

项目主要分成两个部分，一是实现轮播图，二是实现主菜单的编写

　　第一部分：

　　　　1.轮播图的按时自动轮播

　　　　2.圆点按钮的点击和随着图片轮播按钮的变换

　　　　3.方块按钮的点击

　　第二部分：

　　　　1.鼠标划过主菜单，出现子菜单

　　　　2.鼠标移除主菜单，子菜单消失

项目代码：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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="ml10 mr10">/</span>
                        <a href="#">手机维修</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">以旧换新</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">手机配件:</span>
                        <a href="#">手机壳</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">手机存储卡</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">数据线</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">充电器</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">电池</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">运营商:</span>
                        <a href="#">中国联通</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">中国移动</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">中国电信</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">智能设备:</span>
                        <a href="#">智能手环</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">智能家居</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">智能手表</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">其他配件</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">娱乐:</span>
                        <a href="#">耳机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">音响</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">收音机</a>
                        <span class="ml10 mr10">/</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="ml10 mr10">/</span>
                        <a href="#">平板</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">一体机</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">电脑配件:</span>
                        <a href="#">显示器</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">CPU</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">主板</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">硬盘</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">电源</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">显卡</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">其它配件</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">游戏设备:</span>
                        <a href="#">游戏机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">耳机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">游戏软件</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">网络产品:</span>
                        <a href="#">路由器</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">网络机顶盒</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">交换机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">存储卡</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">网卡</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">外部产品:</span>
                        <a href="#">鼠标</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">键盘</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">U盘</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">移动硬盘</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">鼠标垫</a>
                        <span class="ml10 mr10">/</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="ml10 mr10">/</span>
                        <a href="#">韩国品牌</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">欧美品牌</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">空调:</span>
                        <a href="#">柜式</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">中央</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">壁挂式</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">冰箱:</span>
                        <a href="#">多门</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">对开门</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">三门</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">双门</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">洗衣机:</span>
                        <a href="#">滚筒式洗衣机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">迷你洗衣机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">洗烘一体机</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">厨房电器:</span>
                        <a href="#">油烟机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">洗碗机</a>
                        <span class="ml10 mr10">/</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="ml10 mr10">/</span>
                        <a href="#">枕头</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">四件套</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">床垫</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">灯具:</span>
                        <a href="#">台灯</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">顶灯</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">节能灯</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">应急灯</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">厨具:</span>
                        <a href="#">烹饪锅具</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">餐具</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">菜板刀具</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">家装:</span>
                        <a href="#">地毯</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">沙发垫套</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">装饰字画</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">照片墙</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">窗帘</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">生活日用:</span>
                        <a href="#">收纳用品</a>
                        <span class="ml10 mr10">/</span>
                        <a href="#">浴室用品</a>
                        <span class="ml10 mr10">/</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-action"></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/script.js"></script>
</body>
</html>

View Code

style.css:

*{
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: #666;
}

@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.tff") format("truetype"),
        url("../img/font/iconfont.svg#iconfog") format("svg");
}

body{
    font-family: "微软雅黑";
    list-style: none;
}

.main{
    width: 1200px;
    height: 460px;
    margin: 0 auto;
    position: relative;
}

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

.banner-slide{
    width: 1200px;
    height: 460px;
    position: absolute;
    background-repeat: no-repeat;
    display: none;
}

.slide-action{
    display: block;
}

.slide1{
    background-image: url("../img/bg1.jpg");
}

.slide2{
    background-image: url("../img/bg2.jpg");
}

.slide3{
    background-image: url("../img/bg3.jpg");
}

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

.button:hover{
    background-color: #333;
    opacity: 0.7;
    filter: alpha(opacity-0.5);
}

.prev{
    transform: rotate(180deg);
}

.next{
    left: auto;
    right: 0px;
}

.dots{
    position: absolute;
    right: 30px;
    bottom: 24px;
    text-align: right;
}

.dots span{
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 50%;
    margin-left: 8px;
    background: rgba(7,17,27,0.4);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
    cursor: pointer;
}

.dots span.active{
    box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
    background: #fff;
}

.menu-box{
    width: 244px;
    height: 460px;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(7,17,27,0.5);
    opacity: 0.5;
    z-index: 1;
}

.menu-content{
    width: 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 {
    position: absolute;
    right: 32px;
    font-size: 24px;
    top: 2px;
    font-family: "iconfont";
    font-style: normal;
    font-weight: normal;
    color: rgba(255,255,255,0.5);
}

.sub-menu{
    width: 730px;
    height: 458px;
    border:1px solid #d9ddc1;
    background: #fff;
    position: absolute;
    left: 244px;
    top: 0px;
    z-index: 999;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
    overflow: hidden;
}

.inner-box{
    width: 100%;
    height: 100%;
    background: url(../img/fe.png) no-repeat;
    display: none;
}

.sub-inner-box{
    width: 652px;
    margin-left: 40px;
    overflow: hidden;
}

.sub-row{
    margin-top: 25px;
}

.title{
    color: #f01414;
    margin-top: 25px;
    font-weight: bold;
    line-height: 16px;
}

.bold{
    font-weight: bold;
}

.mr10{
    margin-right: 10px;
}

.ml10{
    margin-left: 10px;
}

.hide{
    display: none;
}

View Code

script.js

function byId(id) {
    return typeof id === 'string' ? document.getElementById(id) : id;  //包装document.getElementById(id)
}

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

function slideImg() {
    var main = byId("main");

    main.onmouseout = function () {
        timer = setInterval(function () {
            index++;
            if (index >= len) {
                index = 0;
            }
            changeImg();
        },2000);
    }

    main.onmouseover = function () {
        if (timer) clearInterval(timer);
    }

    main.onmouseout();
    // 圆点点击
    for (var d = 0; d < len; d++) {
        dots[d].id =d;
        dots[d].onclick = function () {
            index = this.id;
            changeImg();
        }
    }
    //方块按钮prev
    prev.onclick = function () {
        index--;
        if (index < 0) {
            index = len-1;
        }
        changeImg();
    }
    //方块按钮next
    next.onclick = function () {
        index++;
        if (index >= len) {
            index = 0;
        }
        changeImg();
    }
}

    //导航菜单

    for (var i = 0; i < menuItem.length; i++) {
        menuItem[i].setAttribute("data-index",i);
        menuItem[i].onmouseover = function () {
            /*问题：
            console.log(i);
            console.log(innerBox[i]);*/
            subMenu.className = "sub-menu";
            var index = this.getAttribute("data-index");
            innerBox[index].style.display = "block";
        };
        menuItem[i].onmouseout = function () {
            subMenu.className = "sub-menu hide";
            var index = this.getAttribute("data-index");
            innerBox[index].style.display = "none";
        }
    }

function changeImg() {
    for (var i = 0; i < pics.length; i++) {
        pics[i].style.display = "none";
        dots[i].className = "";
    }
    pics[index].style.display = "block";
    dots[index].className = "active";
}

slideImg();

View Code

图示：

项目源码下载：

https://files.cnblogs.com/files/shink1117/JavaScript%E5%AE%9E%E7%8E%B0%E8%BD%AE%E6%92%AD%E7%89%B9%E6%95%88.zip

posted @ 2018-03-02 15:47 cheinlbb 阅读(247) 评论(0) 编辑收藏举报

刷新页面返回顶部

shink

——在现实断裂的地方梦汇成了海

03JavaScript实现轮播特效21

公告

shink

——在现实断裂的地方 梦 汇成了海

03JavaScript实现轮播特效21

公告

——在现实断裂的地方梦汇成了海