当前位置：首页 > 编程语言 > 根据js轮播图原理写出合理的结构与样式、并实现js交互效果

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

2021-04-18 02:26

阅读：560

标签：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>Documenttitle>
    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="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
                div class="sub-menu-row">
                    span class="title mr10">英国短毛猫：span>
                    a href="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
                div class="sub-menu-row">
                    span class="title mr10">英国短毛猫：span>
                    a href="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
                div class="sub-menu-row">
                    span class="title mr10">英国短毛猫：span>
                    a href="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
            div>
            div class="wrap">
                div class="sub-menu-row">
                    div class="sub-menu-item-title">暹罗猫div>
                    span class="title mr10">暹罗猫：span>
                    a href="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
                div class="sub-menu-row">
                    span class="title mr10">暹罗猫：span>
                    a href="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
                div class="sub-menu-row">
                    span class="title mr10">暹罗猫：span>
                    a href="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
                div class="sub-menu-row">
                    span class="title mr10">暹罗猫：span>
                    a href="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
            div>
            div class="wrap">
                div class="sub-menu-row">
                    div class="sub-menu-item-title">布偶猫div>
                    span class="title mr10">布偶猫：span>
                    a href="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
                div class="sub-menu-row">
                    span class="title mr10">布偶猫：span>
                    a href="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
                div class="sub-menu-row">
                    span class="title mr10">布偶猫：span>
                    a href="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
                div class="sub-menu-row">
                    span class="title mr10">布偶猫：span>
                    a href="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
            div>
            div class="wrap">
                div class="sub-menu-row">
                    div class="sub-menu-item-title">苏格兰折耳猫div>
                    span class="title mr10">苏格兰折耳猫：span>
                    a href="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
                div class="sub-menu-row">
                    span class="title mr10">苏格兰折耳猫：span>
                    a href="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
                div class="sub-menu-row">
                    span class="title mr10">苏格兰折耳猫：span>
                    a href="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
                div class="sub-menu-row">
                    span class="title mr10">苏格兰折耳猫：span>
                    a href="">喵1a>
                    span class="ml10 mr10">/span>
                    a href="">喵2a>
                    span class="ml10 mr10">/span>
                    a href="">喵3a>
                div>
            div>
        div>
        
        div class="main-menu" id="main-menu">
            div class="menu-item">
                a href="javascript:void(0)">
                    英国短毛猫i class="icon">i>
                a>
            div>
            div class="menu-item">
                a href="javascript:void(0)">
                    暹罗猫i class="icon">i>
                a>
            div>
            div class="menu-item">
                a href="javascript:void(0)">
                    布偶猫i class="icon">i>
                a>
            div>
            div class="menu-item">
                a href="javascript:void(0)">
                    苏格兰折耳猫i class="icon">i>
                a>
            div>
        div>
        
        div class="banner" id="banner">
            
            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){
        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;
    changeImg();
})

//点击圆点切换图片
for(var d=0;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){
    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){
            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

上一篇：Html介绍,认识html标签

下一篇：js/jquery加入的select value显示不正确问题

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：根据js轮播图原理写出合理的结构与样式、并实现js交互效果
文章链接：http://soscw.com/index.php/essay/76159.html

评论

亲，登录后才可以留言！

热门文章

推荐文章

最新文章

置顶文章

关于我们 | 版权声明 | 常见问题 | 素材投稿 | 联系我们 | 网站地图 |
搜素材网素材除本站原创外均由用户分享，若发现权利被侵害，请联系及时联系我们，我们会在第一时间进行处理。
特别说明：本站所有资源除本站原创外仅供学习与参考，请勿用于商业用途,如有侵犯您的版权请联系客服服务QQ：点击这里给我发消息
Copyright © 2024 soscw.com 搜素材网素材网版权所有 蜀ICP备18015633号-1