根据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"></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">
            <!-- 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.cnblogs.com/chenyingying0/p/12287248.html

时间： 2024-10-08 00:31:28

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

原生js实现轮播图原理

轮播图的原理1.图片移动实现原理:利用浮动将所有所有照片依次排成一行,给这一长串图片添加一个父级的遮罩,每次只显示一张图,其余的都隐藏起来.对图片添加绝对定位,通过控制left属性,实现照片的移动. 2.图片移动动画原理:从a位置移动到b位置,需要先计算两点之间的差值,通过差值和时间间隔,计算出每次移动的步长,通过添加定时器,每次移动相同的步长,实现动画效果. 3.图片定位停止原理:每一张照片都有相同的宽度,每张照片都有一个绝对的定位数值,通过检测定每次移动后,照片当前位置和需要到达位置之间的距

JS 轮播图（无缝连接的轮播图实现，含代码供参考）

需求:实现轮播图,图片无缝切换,自动播放. 实现效果: 思考一下:在图片列表后面多加一张图片,这张图片是第一张图片(为了确保无缝衔接).图片就是平铺放在一个pic里面的,每次移动就是改变的pic的left值. 来撸代码~~.所有的代码放在最后面,这里只讲一些重要的方法: 为防止懵逼:先贴出封装函数move()的代码供参考 function move(ele, attr, speed, target, callback){ //获取当前的位置 //从左往右进行移动 --- current<targ

第六十八天 js轮播图

1.浮动与定位结合使用 浮动与相对定位 //1.两者均参与布局 //2.主浮动布局,相对布局辅助完成布局微调 //3.相对定位布局微调不同于盒模型布局微调,相对定位布局不影响盒子原有位置,就会影响兄弟盒子布局 浮动与绝对定位 // 1.只保留绝对定位布局 // 2.脱离文档流的盒子宽可以交于内部撑开 2.小米更新数据案例 默认活跃状态 1.将初始的li设置一个active类名(拥有该类名就拥有活跃状态表现的属性)] 更改活跃状态 let active_index = 0; // 活跃状态的索引

HTML+CSS +JS 轮播图

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style> 7 #container{ 8 width: 450px; 9 height: 270px; 10 margin: 0 auto; 11 margin-top: 100px; 12 position: relative;

原生JS轮播图

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 </head> 7 <style> 8 *{ 9 margin:0px; 10 padding:0px; 11 } 12 13 li{ 14 list-style: none; /*取消li默认的前缀*/ 15 } 16 17

自写：js轮播图 鼠标划过下方按钮，继续下一个

定时器关闭后再开启一般都会按照原来的路线继续走,不会因为你点了3而下个就会是4 $(".focus-rad>ul>li").hover( function(){ $(this).css({"background-color":"red","opacity": "0.5"}).siblings("li").css({"background-color":&q

焦点图轮播图原理与机制

技能点:DOM操作.定时器.事件运用.JS动画.函数递归.无限滚动大法 焦点图排序(无限滚动大法):image5image1image2image3image4image5image1 原理:1. 假设共有5张图,5张图左浮动排列,2. 并且都被一个list容器包裹,这个list是很长的,然后list被一个div包裹,3. div的长度只有一张图的大小那么大,并且设置div的属性为 overflow:hidden4. div设置为relative,list设置为absolute5. 改变list

islider.js轮播图

本篇文章地址:https://www.cnblogs.com/Thehorse/p/11601032.html css #iSlider-effect-wrapper { height: 220px; width: 100%; margin: 0 auto; margin-top: 0.2rem; overflow: hidden; position: relative; } .iSlider-effect ul{ list-style: none; padding: 0; margin: 0;

JS轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;list-style:none;} a{text-decoration: none;color: #fff