Jquery轮播图
程序员文章站
2022-03-25 12:46:38
这次的作业是写一个选项卡,一个轮播图,我把两者结合起来写了一个网站常见的导航栏和选项卡 效果图如下: 我用的jquery方式写的所以在页面导入jquery的框架 接下来是页面的布局从上往下写 设置公共样式: 布局一个大div用列表来布局 1.导航栏列表: 2.轮播图列表 3.选项卡列表 (选项卡列表 ......
这次的作业是写一个选项卡,一个轮播图,我把两者结合起来写了一个网站常见的导航栏和选项卡
效果图如下:
我用的jquery方式写的所以在页面导入jquery的框架
接下来是页面的布局从上往下写
设置公共样式:
布局一个大div用列表来布局
1.导航栏列表:
2.轮播图列表
3.选项卡列表 (选项卡列表比较长但是结构一样定义四层li和导航栏四个标题对应)
5.弹出发图片框(使用div对div进行定位隐藏)
下面写是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,或者留言私发。
上一篇: vscode配置远程开发与免密登录的技巧
下一篇: Jquery键盘输入