根據js輪播圖原理寫出合理的結構與樣式、并實作js互動效果-有解無憂

在JS中，能用 . 的地方一般都可以用 [ ] 取代

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main" id="main">
        <div class="menu-box"></div>
        <!-- 二級選單 -->
        <div class="sub-menu hide" id="sub-menu">
            <div class="wrap">
                <div class="sub-menu-row">
                    <div class="sub-menu-item-title">英國短毛貓</div>
                    <span class="title mr10">英國短毛貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
                <div class="sub-menu-row">
                    <span class="title mr10">英國短毛貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
                <div class="sub-menu-row">
                    <span class="title mr10">英國短毛貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
                <div class="sub-menu-row">
                    <span class="title mr10">英國短毛貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
            </div>
            <div class="wrap">
                <div class="sub-menu-row">
                    <div class="sub-menu-item-title">暹羅貓</div>
                    <span class="title mr10">暹羅貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
                <div class="sub-menu-row">
                    <span class="title mr10">暹羅貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
                <div class="sub-menu-row">
                    <span class="title mr10">暹羅貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
                <div class="sub-menu-row">
                    <span class="title mr10">暹羅貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
            </div>
            <div class="wrap">
                <div class="sub-menu-row">
                    <div class="sub-menu-item-title">布偶貓</div>
                    <span class="title mr10">布偶貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
                <div class="sub-menu-row">
                    <span class="title mr10">布偶貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
                <div class="sub-menu-row">
                    <span class="title mr10">布偶貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
                <div class="sub-menu-row">
                    <span class="title mr10">布偶貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
            </div>
            <div class="wrap">
                <div class="sub-menu-row">
                    <div class="sub-menu-item-title">蘇格蘭折耳貓</div>
                    <span class="title mr10">蘇格蘭折耳貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
                <div class="sub-menu-row">
                    <span class="title mr10">蘇格蘭折耳貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
                <div class="sub-menu-row">
                    <span class="title mr10">蘇格蘭折耳貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
                <div class="sub-menu-row">
                    <span class="title mr10">蘇格蘭折耳貓：</span>
                    <a href="">喵1</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵2</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">喵3</a>
                </div>
            </div>
        </div>
        <!-- 一級選單 -->
        <div class="main-menu" id="main-menu">
            <div class="menu-item">
                <a href="javascript:void(0)">
                    英國短毛貓<i class="icon">&#xe606;</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="javascript:void(0)">
                    暹羅貓<i class="icon">&#xe606;</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="javascript:void(0)">
                    布偶貓<i class="icon">&#xe606;</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="javascript:void(0)">
                    蘇格蘭折耳貓<i class="icon">&#xe606;</i>
                </a>
            </div>
        </div>
        <!-- 焦點圖 -->
        <div class="banner" id="banner">
            <!-- javascript:void(0) 不添加鏈接 -->
            <a href="javascript:void(0)">
                <div class="banner-slide slide1 banner-active"></div>
            </a>
            <a href="javascript:void(0)">
                <div class="banner-slide slide2"></div>
            </a>
            <a href="javascript:void(0)">
                <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="script.js"></script>
</body>
</html>

style.css

*{
    margin:0;
    padding:0;
}

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

@font-face {font-family: "iconfont";
    src:url('source/font/iconfont.eot?t=1581168967831'); /* IE9 */
    src:url('source/font/iconfont.eot?t=1581168967831#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('source/font/data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKYAAsAAAAABkgAAAJLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApQYwE2AiQDCAsGAAQgBYRtBzQbjQXIHpIkRSIVUICEKgjCM+Lhaz/25+4uJhLpnkyTSSIUGkQSxEbpTIcvJbx799P7HZPN82U5ILLFS5p+zr+SG4Ea27ElozdhULjJrQCCfeLe6Z9AH2TUA8pxLxpr0qQuoC4OpID2xiiyIom9YeyCF/iYQKNRftrW+OwqVCvsVYF4liIB1YWQorBsvVDbcLCITzXq03t6Az6i78d/0agmqcnsusOnsTQM/lQ6efm12nAREMIEdLwGGctAIU4bU/vKBOPKNKbKTYJjVQc/lVUVOMVR/zxRy65sBsNQ/kwKT/mo2QSPNVI3MDhpMtHt8cuj840OTPsXXxx3iasu7ert/+T1kbf/tOWvL+/ORVv8e/zlpqVV420wCFBNVR4CDcH27dV8rKn3r76pgO/0xwQJVIthHlC/F3fwNxQDu4qhsh2paIrG/qT7LA2NGlHBvk4/U809p86Fej0TPHVGMmT1psnCLqNGkxXUqreKRksmjjfpopSJ0oBFuwCh3ROSVl/I2r2Thf1GjV6/qNUeZWh0Hm0XNpkNWTuiMEGYZskSkynb4q6LauPqZRQ5I6HyqohfR+XJKIsEw+XsBFqoltji5UWUiDOubJONg+fQMGzmKDuLKQpmiJzuUIg3vSmYsk2otUlBCQSlMUkljJRis/BgMKmtfH4ZEnIMCaqjoy67DikeOT4TERQeQE7orUEdj/KKJ0+IIoRjOMVmYsbBPGQw2BineV4WSiFBmQkJR7eQ04sP1Qe3N5p/dwga2ZYUzqSs8cXOZWXCotAGAAAAAA==') format('woff2'),
        url('source/font/iconfont.woff?t=1581168967831') format('woff'),
        url('source/font/iconfont.ttf?t=1581168967831') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
        url('source/font/iconfont.svg?t=1581168967831#iconfont') format('svg'); /* iOS 4.1- */
}

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

/*焦點圖*/
.banner{
    width:1200px;
    height:460px;
    overflow:hidden;
}

.banner-slide{
    width:1200px;
    height:460px;
    float:left;
    overflow:hidden;
    background:center no-repeat;
    display: none;
}

.banner-active{
    display: block;
}

.slide1{
    background-image:url(source/banner1.jpg);
}

.slide2{
    background-image:url(source/banner2.jpg);
}

.slide3{
    background-image:url(source/banner3.jpg);
}

.button{
    width:40px;
    height:80px;
    position: absolute;
    top:50%;
    left:244px;
    margin-top:-40px;
    background:url(source/arrow.png) center center no-repeat;
    cursor:pointer;
    -webkit-transform:rotate(180deg);
       -moz-transform:rotate(180deg);
        -ms-transform:rotate(180deg);
         -o-transform:rotate(180deg);
            transform:rotate(180deg);
}

.button:hover{
    background-color:rgba(100, 100, 100, .7);
}

.button.next{
    right:0;
    left:auto;
    -webkit-transform:rotate(0deg);
       -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
         -o-transform:rotate(0deg);
            transform:rotate(0deg);
}

.dots{
    position: absolute;
    right:24px;
    bottom:24px;
}

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

.dots span.active{
    background:rgba(255, 255, 255, .8);
    box-shadow:0 0 0 2px rgba(7, 17, 27, .4) inset;
}

/*選單*/
.menu-box{
    position: absolute;
    top:0;
    left:0;
    width:244px;
    height:460px;
    background:rgba(0, 0, 0, .5);
    z-index:1;
}

.main-menu{
    position: absolute;
    top:0;
    left:0;
    width:244px;
    height:460px;
    z-index:2;
}

.menu-item{
    height:64px;
    padding:0 20px;
    line-height:63px;
}

.menu-item a{
    display: block;
    height:64px;
    border-bottom:1px solid rgba(255, 255, 255, .5);
    color:#fff;
    padding-left:5px;
    font-size:14px;
    position: relative;
}

.menu-item a i{
    position: absolute;
    right:20px;
    top:2px;
    font-style:normal;
    font-weight:normal;
    font-family: "iconfont";
    color:rgba(255, 255, 255, .8);
}

.sub-menu{
    position: absolute;
    top:1px;
    left:244px;
    width:600px;
    height:458px;
    background:rgba(255, 255, 255, .8);
    box-shadow:0 2px 5px 0 #ccc;
    z-index:500;
    overflow:hidden;
}

.sub-menu .wrap{
    width:100%;
    height:100%;
    padding:20px 0 0 20px;
}

.sub-menu-item-title{
    color:red;
    font-weight:bold;
    margin-bottom:25px;
}

.sub-menu-row{
    margin-bottom:25px;
}

.sub-menu-row .title{
    font-weight:bold;
    color:#333;
}

.mr10{
    margin-right:10px;
}

.ml10{
    margin-left:10px;
}

.hide{
    display: none;
}
/*# sourceMappingURL=style.css.map */

script.js

var index = 0, //最初索引
    mindex = 0,
    timer = null, //定時器
    main = byId("main"),
    mainMenu = byId("main-menu"),
    menuItems = mainMenu.getElementsByClassName("menu-item"),//主選單項
    subMenu = byId("sub-menu"),
    wraps = subMenu.getElementsByClassName("wrap"),//子選單項
    wsize = wraps.length,
    prev = byId("prev"), //獲取上一張按鈕
    next = byId("next"), //獲取下一張按鈕
    pics = byId("banner").getElementsByTagName("div"), //所有banner圖
    dots = byId("dots").getElementsByTagName("span"), //所有圓點
    size = pics.length;  //banner圖的個數

//通過id獲取元素
function byId(id){
    return typeof id === "string" ? document.getElementById(id) : id;
}

//事件系結函式封裝
function addHandler(ele, type, handler){
    if(ele.addEventListener){
        ele.addEventListener(type, handler, false);
    }else if(ele.attachEvent){
        ele.attachEvent("on"+type, handler);
    }else{
        ele["on"+type] = handler;
    }
}

//樣式切換
function changeImg(){
    for(var i=0;i<size;i++){
        pics[i].style.display="none";
        dots[i].className="";
    }
    pics[index].style.display="block";
    dots[index].className="active";
}

//自動輪播
function startAutoPlay(){
    timer=setInterval(function(){
        index++;
        if(index>=size) index=0;
        changeImg();
    },1000)
}

//停止自動輪播
function stopAutoPlay(){
    if(timer){
        clearInterval(timer);
    }
}

//點擊下一張按鈕
addHandler(next, "click", function(){
    index++;
    if(index>=size) index=0;
    changeImg();
});

//點擊上一張按鈕
addHandler(prev, "click", function(){
    index--;
    if(index<0) index=size-1;
    changeImg();
})

//點擊圓點切換圖片
for(var d=0;d<size;d++){
    //存盤每次的索引值
    dots[d].setAttribute("data-id", d);
    addHandler(dots[d], "click", function(){
        //此處不能直接獲取d的值，由于作用域的原因，d的值是回圈結束后的值，此處永遠是3
        index=this.getAttribute("data-id");
        changeImg();
    })
}

//默認自動輪播
startAutoPlay();

//滑鼠移入main停止輪播
addHandler(main, "mouseover", stopAutoPlay);

//滑鼠移出main繼續輪播
addHandler(main, "mouseout", startAutoPlay);

// 選單顯示效果
for(var m=0,mlen=menuItems.length;m<mlen;m++){
    menuItems[m].setAttribute("data-mid", m);
    addHandler(menuItems[m], "mouseover", function(){
        subMenu.className="sub-menu";//顯示子選單容器
        mindex=this.getAttribute("data-mid");//this指當前觸發事件的元素
        for(var w=0;w<wsize;w++){
            wraps[w].style.display="none";
            menuItems[w].style.background="none";
        }
        wraps[mindex].style.display="block";
        menuItems[mindex].style.background="rgba(0, 0, 0, .2)";
    });
}

//滑鼠離開主選單，隱藏子選單
addHandler(mainMenu, "mouseout", function(){
    subMenu.className="sub-menu hide";
});

//滑鼠離開子選單，隱藏子選單
addHandler(subMenu, "mouseout", function(){
    this.className="sub-menu hide";
});

//滑鼠進入子選單，顯示子選單
addHandler(subMenu, "mouseover", function(){
    this.className="sub-menu";
});

效果圖

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/150296.html

標籤：JavaScript

上一篇：Umi 小白紀實（三）—— 震驚！路由竟然如此強大！

下一篇：那些 JavaScript 自帶的奇妙 Bug