码迷,mamicode.com
首页 > Web开发 > 详细

根据js轮播图原理写出合理的结构与样式、并实现js交互效果

时间:2020-02-09 16:30:00      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:osi   cli   技术   dex   script   原理   英国   rev   size   

在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";
});

效果图

技术图片

 

根据js轮播图原理写出合理的结构与样式、并实现js交互效果

标签:osi   cli   技术   dex   script   原理   英国   rev   size   

原文地址:https://www.cnblogs.com/chenyingying0/p/12287248.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!