欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Jquery轮播图

程序员文章站 2022-03-25 12:46:38
这次的作业是写一个选项卡,一个轮播图,我把两者结合起来写了一个网站常见的导航栏和选项卡 效果图如下: 我用的jquery方式写的所以在页面导入jquery的框架 接下来是页面的布局从上往下写 设置公共样式: 布局一个大div用列表来布局 1.导航栏列表: 2.轮播图列表 3.选项卡列表 (选项卡列表 ......

这次的作业是写一个选项卡,一个轮播图,我把两者结合起来写了一个网站常见的导航栏和选项卡

效果图如下:

Jquery轮播图

 我用的jquery方式写的所以在页面导入jquery的框架 

Jquery轮播图

 接下来是页面的布局从上往下写

设置公共样式:

Jquery轮播图

布局一个大div用列表来布局

1.导航栏列表:

Jquery轮播图

2.轮播图列表

Jquery轮播图

 3.选项卡列表 (选项卡列表比较长但是结构一样定义四层li和导航栏四个标题对应)

Jquery轮播图

 5.弹出发图片框(使用div对div进行定位隐藏)

Jquery轮播图

 下面写是css样式(样式打了注释就不分层了):

        *{
                margin: 0px;
                padding: 0px;
                font-size: 18px;
                font-family:"comic sans ms";
            }
            html{cursor: url('img/指针01.png'),auto;position: relative;}
            a{color: #000; text-decoration: none;}
            ul{list-style: none;}
            img{cursor: pointer; border-radius: 7px;}
            .f_div{
                width: 100%;
                height: auto;
           }
           /* 导航栏样式 */
           .f_ul{
               width: 100%;
               height: 30px;
               background-color: black;
           }
           .f_ul li{
               float: left;
               padding: 2px 40px;
               border-left: 1px solid #737373;
               cursor: pointer;
           }
           .f_ul li a{color: white;}
           .f_ul li:hover,.f_ul li a:hover{
               background-color: #505050;
               color: aqua;
           }
           /* 选项卡样式 */
           .s_ul{
               position: relative;
               width: 100%;
               height: auto;
               position: relative;
           }
           .s_ul li{
               background-color: #505050;
               position: absolute;
               display: none;
               opacity: 0.9;
           }
           .s_ul li img {
               width: 15%;
               height: 7.375rem;
               margin:10px 5px;
               border: 3px solid white;
           }
        /*   .s_ul li img:hover{
               transform: scale(1.05);
               transition: .5s;
           } */
           .s_ul li img:hover{
               transform:rotate(15deg);
               transition: .5s;
           }
               /* 轮播图样式 */
          /* 图片宽搞,绝对定位,指针小抓手 */
          .t_ul img{
              width: 1100px;
              height: 400px;
              position: absolute;
              cursor: pointer;
             }
             
          /* 用span标签来装上一下一张的按钮 */
         .t_ul>span{
              width: 15px;
              height: 30px;
              background: url(img/arrow.png);
              background-color: #cccccc;
              cursor: pointer;
          }
          /* 按钮悬浮样式 颜色变换,放大1.15倍*/
         .t_ul>span:hover{
               background-color: #848484;
               /* transform: scale(1.15);
               transition: .5s; */
            }
           /* 上一页按钮,绝对定位 旋转180度 */
          #span1{
              position: absolute;
              top: 180px;
              left: -30px;
              transform: rotate(180deg) scale(1.55);
          }
          #span2{
              position: absolute;
            transform:scale(1.55);
              top: 180px;
              right: -30px;
          }
          .t_ul{
              list-style: none; /* 去掉滚动图片的小黑点样式 */
              width: 1100px;   /* 定义宽 */
              margin: auto;     /* 让图片居中显示 */
              position: relative;  /* 设置想对定位 */
              top: 40px;           /* 距离上边框40px; */
          }
          /* 重新定义一个ul写四个li来实现小黑点样式 */
          .dot{
              font-size: 20px;          /* 设置大小 */
              transform: rotate(-90deg); /* 旋转-90度让小黑点水平 */
              position: absolute;        /* 绝对定位 */
              left:550px;
              top: 300px;
              color: #464646;
            list-style-type: disc;
          }
          /* 设置第一个小黑点为白色 */
          .banner_btn{
              color: #fff;
          }
         /* 设置大图片的div位置大小*/
          #bigimg{
              position: absolute;
              width: 687px;
              height: 378px;
              top: 80px;
              left:360px;
              background-color: azure;
              border-radius:7px ;
              display: none;
          }
          /*右上角的x可要可不要*/
          #spanbing{
              position: absolute;
              right: 7px;
              top: 0px;
              font-size: 24px;
              opacity: 0.8;
              z-index: 1;
              cursor: pointer;
          }
          #spanbing:hover{
              background-color: #00ffff;
              color: white;
          }
         /* 弹出的大图片样式*/
          #bigimg img{
              position: relative;
              border: 2px solid white;
            width: 685px;
              height: 376px;
              opacity: 0.9;
          }

在布局的时候可以按照自己的想法布局,个人布局有缺陷 learning......

下面的js代码代码也有注释,用的都是一些常见的事件和属性

            $(function(){
                /*定三个全局变量 */
               var set = 0;
               var time;
               var len = 4 /* 轮播图图片数量     这里也可以获取轮播图数量如 $(".t_ul img").length*/
               
               /* 将图片切换以及小黑点切换封装成changeimg方法并赋值一个变量a */
               function changeimg(a){
               $(".t_ul>li").eq(a).fadein(1000).siblings("li").fadeout('slow');/* 淡入淡出 */
               $(".dot>li").eq(a).addclass('banner_btn').siblings().removeclass('banner_btn');/* 改变小黑点样式 */
               }
               
               /* 将定时器封装成autoplay方法以便调用 */
               function autoplay(){
                  time = setinterval(function(){    /* 将定时器传给time变量 */
                  set++ ;
                  if(set > len -1 )
                  {
                   set = 0 ;
                  }
                  changeimg(set);  /* 初始化变量a 将set值传给changeimg方法 */
                 },5000);
               }
               autoplay(); /* 调用定时器方法*/
               
                /* 点击上一张图片按钮停止定时器 */
                $("#span1").click(function(){
                 clearinterval(time) ;   /* 清除定时器 */
                 set-- ;
                 if(set < 0 )    /* 当图片为第一张时重新给set赋值为len-1 显示最后一张 */
                 {
                  set = len-1 ;
                 }
                 changeimg(set) ;
                 autoplay() ;
                });
                
                /* 点击下一张图片按钮停止定时器 */
                 $("#span2").click(function(){
                  clearinterval(time) ;
                  set++ ;
                  if(set === len )     /* 当图片为最后一张时重新给set赋值为0, 显示第一张张 */
                  {
                   set = 0 ;
                  }
                  changeimg(set);  
                  autoplay() ;
                 });
                 
                /* 点击小黑点,显示想对应的图片 */
                 $(".dot>li").click(function(){
                   clearinterval(time) ;   
                   set = $(this).index() ;  /* 获取小黑点索引 并赋值给set*/
                   changeimg(set) ;
                   autoplay() ;
                  });
                /*  当鼠标进入轮播图时清除定时器,移出时启动定时器 */
                  $(".t_ul>li").hover(function(){clearinterval(time)} , function(){autoplay()});
                  
                //选项卡悬浮出现对应的卡片
                $(".f_ul>li").hover(function(){
                    $(this).addclass(" .s_ul li").siblings("li").removeclass(" .s_ul li");
                    $(".s_ul li").eq($(this).index()).show().siblings("li").hide();
                },function(){
                    $(".s_ul li").eq($(this).index()).hide();
                    /* $(this).removeclass(" .s_ul li"); */
                });
                //防止移出选项卡时对应的大选项卡消失
                $(".s_ul li").hover(function(){
                    var tab1 = $(this); /* 获取鼠标悬浮的那个选项卡*/
                    $(".s_ul>li>img").click(function(){   /*点击事件 ,点击选项卡里的图片*/
                          var tabl1_img = $(this).attr("src");   /*获取改图片的src*/
                          $("#newimg").attr("src",tabl1_img);   /*将tabl1_img替换弹框发里img的src值*/
                          $("#bigimg").slidedown();             /*显示弹出框*/
                      $("#bigimg").hover(function(){            /*当鼠标悬浮在弹出框时避免选项卡消失让选项卡显现*/
                          tab1.show();
                      });
                      $("#bigimg,#spanbing").click(function(){  /* 点击图片或者弹出框,关闭弹框*/
                         $("#bigimg").slideup();
                      });
                 });
                    tab1.show();
                },function(){
                    $(this).hide();
                });
             });

注释清晰emmmm可能有些话写的不太明白qaq努力改进这里有一个链接可以参考  https://www.html5tricks.com/demo/pure-js-image-player-menu/index.html

我是参考这个写的,源码也可以下载但是解压的话需要密码,有需要可以联系qq2979100039,或者留言私发。