导航条与轮播图

其他 2020-02-10 13:31:01 阅读次数: 0

导航条与轮播图

导航条实现（1）

@import "init.scss";
@import "constants.scss";
body{
    background: pink;
}

.header{
    width: 100%;
    height: 64px;
    background: #3a3a3a;


    .container{
         width: $pageWidth;
         height: 100%;
         margin: 0 auto;
      .logo-box{
        width: 140px;
        height: 54px;
        background: url("https://img-blog.csdnimg.cn/20200129135759828.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc1MzE4,size_16,color_FFFFFF,t_70");
      }


    }
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    list-style: none;
    text-decoration: none;
}

$pageWidth:1170px;


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AI</title>
    <link rel="stylesheet" href="../../dist/css/index.min.css">
</head>
<body>
   <header class="header">
      <div class="container">
          <div class="logo-box">
              <a href="./"></a>

          </div>


      </div>

   </header>

</body>
</html>

导航条实现（2）

@import "init.scss";
@import "constants.scss";
$navHeight:64px;
body{
    background: pink;
}

.header{
    width: 100%;
    height: $navHeight;
    background: #3a3a3a;


    .container{
         width: $pageWidth;
         height: 100%;
         margin: 0 auto;

      .logo-box{
        width: 140px;
        height: 63px;
        background: url("https://img-blog.csdnimg.cn/20200129135759828.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc1MzE4,size_16,color_FFFFFF,t_70") no-repeat;
        float: left;
        a{
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .nav{
        margin-left:128px;
        float: left;
        li{
          float: left;
          margin-right: 40px;
          line-height: $navHeight;
          height: 64px;
          box-sizing: border-box;

          a{
            color: #ffffff;
          }
          &.active{
            border-bottom: 5px solid bisque;

          }
        }
      }
      .auth-box{

        float: right;


        .iconfont{
          line-height:  64px ;
          height: 64px;
          color: #ffffff;
          font-size: 30px;

        }

       a{
         color: #ffffff;
       }

      }

    }
}


<header class="header">
      <div class="container">
         <div class="logo-box">
              <a href="/"></a>

         </div>


         <ul class="nav">
             <li class="active"><a href="/">创业资讯</a></li>
             <li class="active"><a href="#">创业课堂</a></li>
             <li class="active"><a href="/">付费资讯</a></li>
             <li class="active"><a href="/">搜索</a></li>
         </ul>

         <div class="auth-box">

         <i class="icon-person iconfont"></i>
             <a href="#">登录</a>
             <a href="#">注册</a>
         </div>

      </div>

   </header>

导航条实现（3）

固定导航条

    position: fixed;
    left: 0;
    right: 0;
    top:0;

主题盒子布局和吸顶效果

.header{
    width: 100%;
    height: $navHeight;
    background: #3a3a3a;
    position: fixed;
    left: 0;
    right: 0;
    top:0;




    .container{
         width: $pageWidth;
         height: 100%;
         margin: 0 auto;

      .logo-box{
        width: 140px;
        height: 63px;
        background: url("https://img-blog.csdnimg.cn/20200129135759828.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc1MzE4,size_16,color_FFFFFF,t_70") no-repeat;
        float: left;
        a{
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .nav{
        margin-left:128px;
        float: left;
        li{
          float: left;
          margin-right: 40px;
          line-height: $navHeight;
          height: 64px;
          box-sizing: border-box;

          a{
            color: #ffffff;
          }
          &.active{
            border-bottom: 5px solid bisque;

          }
        }
      }
      .auth-box{

        float: right;


        .iconfont{
          line-height:  64px ;
          height: 64px;
          color: #ffffff;
          font-size: 20px;

        }

       a{
         color: #ffffff;
       }

      }

    }
}

.main{
  width: 100%;
  margin-top:$navHeight +20px;

  .wrapper{
    width: $pageWidth;
    margin: 0 auto;
    background: green;
    height: 1000px;
    overflow: hidden;

    .news-wrapper{
      float: left;
      width: 798px;
      height: 500px;
      background: yellowgreen;
    }
    .sidebar-wrapper{
      float: right;
      width: 356px;
      height: 500px;
      background: lightcyan;
    }

  }

}

轮播图布局和样式

.main{
  width: 100%;
  margin-top:$navHeight +20px;

  .wrapper{
    width: $pageWidth;
    margin: 0 auto;
    background: green;
    height: 1000px;
    overflow: hidden;

    .news-wrapper{
      $bannerWidth:$mainBoxWidth;
      $bannerHeight:202px;
      float: left;
      width: 798px;
      height: 500px;
      background: yellowgreen;

      .banner-group{

        width: 100%;
        height: 202px;
        background: palegoldenrod;
        
        .banner-ul{
          overflow: hidden;
          width: $bannerWidth*4;

          li{
            float: left;
            width: $bannerWidth;
            height: $bannerHeight;
            img{
              width: $bannerWidth;
              height: $bannerHeight;
            }
          }
        }

      }


    }
    .sidebar-wrapper{
      float: right;
      width: 356px;
      height: 500px;
      background: lightcyan;
    }

  }

}

  <div class="main">
       <div class="wrapper">
           <div class="news-wrapper">
               <div class="banner-group"></div>
                  <ul class="banner-ul">
                      <li>
                          <a href="">
                            <img src="https://img-blog.csdnimg.cn/20191103093542502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc1MzE4,size_16,color_FFFFFF,t_70"></img>
                          </a>
                      </li>
                      <li>
                          <a href="">
                            <img src="https://img-blog.csdnimg.cn/20191103093542502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc1MzE4,size_16,color_FFFFFF,t_70"></img>
                          </a>
                      </li>
                      <li>
                          <a href="">
                            <img src="https://img-blog.csdnimg.cn/20191103093542502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc1MzE4,size_16,color_FFFFFF,t_70"></img>
                          </a>
                      </li>
                      <li>
                          <a href="">
                            <img src="https://img-blog.csdnimg.cn/20191103093542502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc1MzE4,size_16,color_FFFFFF,t_70"></img>
                          </a>
                      </li>
                  </ul>

           </div>
           <div class="sidebar-wrapper"></div>

       </div>

   </div>

JS面向对象和实现一次轮播

JS面向对象

// 面向对象
//通过this关键字绑定属性，并指定他的值
//原型链
function Banner() {
    console.log("smj")
    this.person="smj smj"
}
Banner.prototype.greet=function () {
    console.log("hello world!");

}
var banner=new Banner();
console.log(banner.person);
banner.greet();

实现一次轮播

function Banner(){
}
Banner.prototype.run=function(){
     var bannerUl=$("#banner-ul");  //查询index.html 中 banner-ul的id
     bannerUl.animate({"left":-798},500) //缓慢过度，过度时间：500ms
};
$(function(){                 //$()确保所有的代码编译完后运行
   var banner =new Banner();
   banner.run();
});

实现自动轮播

function Banner(){
}
Banner.prototype.run=function(){
     var bannerUl=$("#banner-ul");  // 查询index.html 中 banner-ul的id
     var index=0;
     setInterval(function(){  // 2秒中执行一次
     
     if(index>=3){
     index=0;
     }else{
       index++;
     }
     
    //    index++;
    //  index=index%4;
        bannerUl.animate({"left":-798*index},500) // 缓慢过度，过度时间：500ms
},2000);
     
};
$(function(){                 // $() 确保所有的代码编译完后运行
   var banner =new Banner();
   banner.run();
});

鼠标hover事件控制轮播图暂停和继续

<div class="banner-group" id="banner-group"></div>

function Banner(){
   this.bannerGroup=$("#banner-group");
   this.index=0;
   this.listenBannerHover();
}

Banner.prototype.listenBannerHover=function(){
             //第一个函数是把鼠标移动到banner上会执行的函数
             
             var self=this;
             this.bannerGroup.hover(function(){
             clearInterval(self.timer);
             },function(){
             // 第二个函数是，把鼠标从banner上移走会执行的函数
              self.loop();
             
             });
          
};

Banner.prototype.loop=function(){
     var self=this;
     var bannerUl=$("#banner-ul");  // 查询index.html 中 banner-ul的id
   
     this.timer= setInterval(function(){  // 定时器 ：2秒中执行一次     
     if(self.index>=3){
     self.index=0;
     }else{
       self.index++;
     }
    //    index++;
    //  index=index%4;
        bannerUl.animate({"left":-798*self.index},500) // 缓慢过度，过度时间：500ms
    },2000);
};
Banner.prototype.run=function(){
   this.loop();   
};
$(function(){                 // $() 确保所有的代码编译完后运行
   var banner =new Banner();
   banner.run();
});

切换轮播图的箭头样式及其显示和隐藏事件

                    <span class="arrow left-arrow">‹</span>
                    <span class="arrow right-arrow">›</span>

                .arrow{
                    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
                    font-size: 70px;
                    color: #fff;
                    position: absolute;
                    top: 50%;
                    margin-top: -45px;
                    cursor: pointer;    //变成小手
                    display: none;     //默认情况是隐藏的
                }

                .left-arrow{
                    left: 20px;
                }

                .right-arrow{
                    right: 20px;
               

    this.leftArrow = $(".left-arrow");
    this.rightArrow = $(".right-arrow");


Banner.prototype.toggleArrow = function (isShow) {
    var self = this;
    if(isShow){
        self.leftArrow.show();
        self.rightArrow.show();
    }else{
        self.leftArrow.hide();
        self.rightArrow.hide();
    }
};


Banner.prototype.listenBannerHover = function () {
    var self = this;
    this.bannerGroup.hover(function () {
        // 第一个函数是，把鼠标移动到banner上会执行的函数
        clearInterval(self.timer);
        self.toggleArrow(true);
    },function () {
        // 第二个函数是，把鼠标从banner上移走会执行的函数
        self.loop();
        self.toggleArrow(false);
    });
};

轮播图上下切换

function Banner() {
    this.bannerWidth = 798;
    this.bannerGroup = $("#banner-group");
    this.index = 1;
    this.leftArrow = $(".left-arrow");
    this.rightArrow = $(".right-arrow");
    this.bannerUl = $("#banner-ul");
    this.liList = this.bannerUl.children("li");  // 获取子标签
    this.bannerCount = this.liList.length;    //子标签个数
    this.pageControl = $(".page-control");
}

Banner.prototype.listenArrowClick = function () {
    var self = this;
    self.leftArrow.click(function () {
        if(self.index === 0){
            // ==：1 == '1'：true   双=和三=的区别,双=字符串和数字也会相等
            // === 1 != '1'
            self.bannerUl.css({"left":-self.bannerCount*self.bannerWidth});
            self.index = self.bannerCount - 1;
        }else{
            self.index--;
        }
        self.animate();
    });
    
    self.rightArrow.click(function () {
        if(self.index === self.bannerCount + 1){
            self.bannerUl.css({"left":-self.bannerWidth});
            self.index = 2;
        }else{
            self.index++;
        }
        self.animate();
    });
};

Banner.prototype.animate = function () {
    var self = this;
    self.bannerUl.animate({"left":-798*self.index},500);
    var index = self.index;
    if(index === 0){
        index = self.bannerCount-1;
    }else if(index === self.bannerCount+1){
        index = 0;
    }else{
        index = self.index - 1;
    }
    self.pageControl.children('li').eq(index).addClass("active").siblings().removeClass('active');
};

小圆点结构和样式

                    <div class="page-control-group">
                        <ul class="page-control">
                  //         <li></li>
                  //      <li></li>
                    //    <li></li>
                     //   <li></li>
                        </ul>
                    </div>

                .page-control-group{
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 20px;

                    .page-control{
                        margin: 0 auto;   //放中间
                        overflow: hidden;
               //         width:12*4px +8*2px+16*3px
                        li{
                            width: 12px;
                            height: 12px;
                            border: 1px solid #fff;
                            border-radius: 50%;
                            float: left;
                            margin: 0 8px;
                            box-sizing: border-box;   //默认container-box:宽度：元素本身的宽度+边框的宽度*2
                                                      //Border-box:宽度：等于元素本身的宽度
                            cursor: pointer; //变成小手

                            &.active{     //选中状态
                                background: #fff;
                            }
                        }
                    }
                }

根据轮播图的个数动态修改小圆点结构和样式

Banner.prototype.initPageControl = function () {
    var self = this;
    for(var i=0; i<self.bannerCount; i++){
        var circle = $("<li></li>");
        self.pageControl.append(circle);
        if(i === 0){
            circle.addClass("active");
        }
    }
    self.pageControl.css({"width":self.bannerCount*12+8*2+16*(self.bannerCount-1)});
};

小圆点点击事件和自动更新当前选中的小圆点

                    <div class="page-control-group">
                        <ul class="page-control">

                        </ul>
                    </div>

Banner.prototype.listenPageControl = function () {
    var self = this;
    self.pageControl.children("li").each(function (index,obj) {  //obj是小圆点对象
        $(obj).click(function () {
            self.index = index;
            self.animate();
        });
    });
};


Banner.prototype.animate = function () {
    var self = this;
    self.bannerUl.animate({"left":-798*self.index},500);
    var index = self.index;
    if(index === 0){
        index = self.bannerCount-1;
    }else if(index === self.bannerCount+1){
        index = 0;
    }else{
        index = self.index - 1;
    }
    self.pageControl.children('li').eq(index).addClass("active").siblings().removeClass('active');
    //eq()第几个  siblings：其余
};


             //避免遮挡
            .banner-group{
                width: 100%;
                height: $bannerHeight;
                background: #0e275e;
                position: relative;
                overflow: hidden;
                z-index: 0;

实现自动无限循环轮播

Banner.prototype.initBanner = function () {
    var self = this;
    var firstBanner = self.liList.eq(0).clone();
    var lastBanner = self.liList.eq(self.bannerCount-1).clone();
    self.bannerUl.append(firstBanner);
    self.bannerUl.prepend(lastBanner);
    self.bannerUl.css({"width":self.bannerWidth*(self.bannerCount+2),'left':-self.bannerWidth});
    // 设置 宽度 和 left
    
};

Banner.prototype.loop = function () {
    var self = this;
    this.timer = setInterval(function () {
        if(self.index >= self.bannerCount+1){
            self.bannerUl.css({"left":-self.bannerWidth});  // 即刻跳转至1
            self.index = 2;  // 接着跳转至2
        }else{
            self.index++;
        }
        self.animate();
    },2000);
};

    this.index = 1;

Banner.prototype.animate = function () {
    var self = this;
    self.bannerUl.animate({"left":-798*self.index},500);
    var index = self.index;
    if(index === 0){
        index = self.bannerCount-1;
    }else if(index === self.bannerCount+1){
        index = 0;
    }else{
        index = self.index - 1;
    }
    self.pageControl.children('li').eq(index).addClass("active").siblings().removeClass('active');
};

左右箭头切换实现循环轮播

Banner.prototype.listenArrowClick = function () {
    var self = this;
    self.leftArrow.click(function () {
        if(self.index === 0){
            // ==：1 == '1'：true
            // ==== 1 != '1'
            self.bannerUl.css({"left":-self.bannerCount*self.bannerWidth});
            self.index = self.bannerCount - 1;
        }else{
            self.index--;
        }
        self.animate();
    });
    
    self.rightArrow.click(function () {
        if(self.index === self.bannerCount + 1){
            self.bannerUl.css({"left":-self.bannerWidth});
            self.index = 2;
        }else{
            self.index++;
        }
        self.animate();
    });
};
Major_s
发布了914 篇原创文章 · 获赞 17 · 访问量 1万+
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_41375318/article/details/104246896
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022