这次的作业是写一个选项卡，一个轮播图，我把两者结合起来写了一个网站常见的导航栏和选项卡
效果图如下：
我用的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，或者留言私发。
