前端系列之JavaScript(实现轮播特效)

最新推荐文章于 2024-07-30 17:43:17 发布

众拾达人

最新推荐文章于 2024-07-30 17:43:17 发布

阅读量2.8k

点赞数 2

分类专栏：前端文章标签： javascript 前端实例

本文链接：https://blog.csdn.net/wtdask/article/details/79193563

版权

前端专栏收录该内容

58 篇文章 5 订阅

订阅专栏

轮播图内容和样式

这里写图片描述

carousel.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>综合实例—图片轮播</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <div class="main" id="main">
            <!--图片轮播-->
            <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/script.js"></script>
    </body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
}

ul{
    list-style: none;
}

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

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

.banber{
    width: 1200px;
    height: 460px;
    overflow: hidden;
    position: relative;
}

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

.slide-active{
    display: block;
}

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

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

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

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

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

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

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

.dots{
    position: absolute;
    right: 20px;
    bottom: 21px;
    text-align: right;
}

.dots span{
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 50%;
    background: rgba(7,17,27,0.4);
    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: #FFFFFF;
}

轮播图特效的实现

封装getElementById()

//封装一个代替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;

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

图片自动轮播

//切换图片
function changeImg(){
    //遍历banner下所有的div，将其隐藏
    for (var i=0;i<len;i++) {
        pics[i].style.display='none';
    }
    //根据index索引找到当前div，将其显示出来
    pics[index].style.display='block';
}

点击圆点切换图片

//下一张
    next.onclick=function(){
        index++;
        if(index>=len){
            index=0;
        }
        //调用changeImg实现切换图片
        changeImg();
    }

    //上一张
    prev.onclick=function(){
        index--;
        if(index<0){
            index=len-1;
        }
        //调用changeImg实现切换图片
        changeImg();
    }

子菜单的展开和收起

html代码：

<!DOCTYPE html>
<html>

    <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>
                            <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-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/script.js"></script>
    </body>

</html>

style.css代码

*{
    margin: 0;
    padding: 0;
}

@font-face {
    font-family:"iconfont";
    src: url("../image/font/iconfont.eot");
    src: url("../image/font/iconfont.eot") format("embedded-opentype"),
    url("../image/font/iconfont.woft") format("woft"),
    url("../image/font/iconfont.ttf") format("truetype"),
    url("../image/font/iconfont.svg#iconfog") format("svg");
}
ul{
    list-style: none;
}

a{
    text-decoration: none;
}

a:link,a:visited{
    color:#5e5e5e;
}

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

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

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

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

.slide-active{
    display: block;
}

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

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

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

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

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

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

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

.dots{
    position: absolute;
    right: 20px;
    bottom: 21px;
    text-align: right;
}

.dots span{
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 50%;
    background: rgba(7,17,27,0.4);
    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: #FFFFFF;
}

/*导航菜单*/
.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: #FFFFFF;
}

.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: 460px;
    border: 1px solid #d9ddel;
    background: #FFFFFF;
    position: absolute;
    left: 244px;
    top: 0;
    z-index: 999;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
}

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

.sub-inner-box{
    width: 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
}

script.js代码

//封装一个代替getElementById()的方法
function byId(id) {
    return typeof(id) === "string" ? document.getElementById(id) : 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"),
    subMenu=byId("sub-menu"),
    innerBox=subMenu.getElementsByClassName("inner-box"),
    menuItems = menu.getElementsByClassName("menu-item");
//注意：getElementsByClassName这个方法在ie8及其浏览器中，不能使用。

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

    //遍历所有圆点，且绑定事件，点击圆点切换图片
    for(var d = 0; d < len; d++) {
        //给所有span添加一个id的属性，值为d作为当前span的索引
        dots[d].id = d;
        dots[d].onclick = function() { //注意：function改变作用域，d值始终为3
            //改变index为当前span的索引
            index = this.id;
            //调用changeImg实现切换图片
            changeImg();
        }
    }

    //下一张
    next.onclick = function() {
        index++;
        if(index >= len) {
            index = 0;
        }
        //调用changeImg实现切换图片
        changeImg();
    }

    //上一张
    prev.onclick = function() {
        index--;
        if(index < 0) {
            index = len - 1;
        }
        //调用changeImg实现切换图片
        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 j=0;j<innerBox.length;j++) {
                innerBox[j].style.display='none';
                menuItems[j].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(){
        subMenu.className="sub-menu hide";
    }
}

//切换图片
function changeImg() {
    //遍历banner下所有的div及dots下所有的span，将div隐藏，将span清除类
    for(var i = 0; i < len; i++) {
        pics[i].style.display = 'none';
        dots[i].className = "";
    }
    //根据index索引找到当前div和当前span，将其显示出来和设置为当前span
    pics[index].style.display = 'block';
    dots[index].className = "active";
}
slideImg();