JQuery轮播图
2023-07-18 06:24
这次的作业是写一个选项卡，一个轮播图，我把两者结合起来写了一个网站常见的导航栏和选项卡
效果图如下：
接下来是页面的布局从上往下写
设置公共样式：
布局一个大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，或者留言私发。