<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./swiper.css">
</head>
<body>
<div id="swiper-wrapper"></div>
<script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
<script src="./swiper.js"></script>
<script>
// type轮播类型
// data数据
// swiperWrapper页面放在哪个元素中
// duration自动轮播间隔
// isAuto是否自动轮播
//spotsColor小圆点颜色
//spotsPosition小圆点位置
//spotsSize小圆点大小
// btnStatus, 左右按钮一直展示always, 隐藏hide, 鼠标移入现实hover
// spotsStatus, 小圆点是否展示，
swiper("fade",[1,2,3,4,5], $('#swiper-wrapper'), 2000, true, '#f20', 'start', 10, 'hover', false)
</script>
</body>
</html>
*{
margin:0px;
padding:0px;
list-style-type:none;
}
#swiper-wrapper{
width:600px;
height:400px;
overflow:hidden;
border:1px solid #fac;
margin:40px auto;
position:relative;
}
/* fade状态下 */
#swiper-wrapper .swiper-fade{
position:absolute;
left:0px;
}
#swiper-wrapper .swiper-fade .swiper-item{
position:absolute;
width:600px;
height:400px;
background-color:#caf;
line-height:400px;
text-align:center;
font-size:64px;
color:#fff;
display:none;
}
/* scroll状态下 */
#swiper-wrapper .swiper-scroll .swiper-item{
float: Left;
width:600px;
height:400px;
background-color:#caf;
text-align:center;
font-size:64px;
color:#fff;
line-height:400px;
}
#swiper-wrapper .swiper-btn{
position:absolute;
width:60px;
height:60px;
top:50%;
margin-top:-30px;
background-color:#cfa;
}
#swiper-wrapper .swiper-rbtn{
right:0px;
}
#swiper-wrapper .swiper-circle{
position:absolute;
bottom:20px;
width:100%;
font-size:0px;
text-align:center;
}
#swiper-wrapper .swiper-circle .swiper-dot{
display:inline-block;
margin:0 5px;
width:10px;
height:10px;
/* background-color:#fff; */
border-radius:50%;
}
// type轮播类型
// data数据
// swiperWrapper页面放在哪个元素中
// duration自动轮播间隔
// isAuto是否自动轮播
//spotsColor小圆点颜色
//spotsPosition小圆点位置
//spotsSize小圆点大小
// btnStatus, 左右按钮一直展示always, 隐藏hide, 鼠标移入现实hover
// spotsStatus, 小圆点是否展示，
function swiper(type,data,swiperWrapper,duration,isAuto,spotsColor,spotsPosition,spotsSize,btnStatus,spotsStatus){
// 当前激活的下标
let nowIndex = 0;
// 创建ul,同时有swiper-fade，还有swiper-scroll,兼容两种样式
const swiperFade = $("<ul/>").addClass("swiper-fade").addClass('swiper-' + type);
// 创建轮播左右按钮，两种type状态一致
const swiperLbtn = $("<div/>").addClass("swiper-btn swiper-lbtn");
const swiperRbtn = $("<div/>").addClass("swiper-btn swiper-rbtn");
// 创建小圆点父级
const swiperCircle = $("<div/>").addClass("swiper-circle")
// 计时器
let timer = null
// 动态生成轮播卡片li，校园点span
data.forEach(ele => {
$("<li/>").addClass("swiper-item").html(ele).appendTo(swiperFade);
$("<span/>").addClass("swiper-dot").appendTo(swiperCircle);
})
// 当类型为scroll时li的数量比span多一个，并且内容与数据数组中第一个保持相同
if(type === "scroll"){
// 选中第一个li复制一份插入到swiperFade中的最后位置
swiperFade.find("li").eq(0).clone().appendTo(swiperFade)
}
// 生成最终结构
swiperWrapper.append(swiperFade)
.append(swiperLbtn)
.append(swiperRbtn)
.append(swiperCircle)
// 左右按钮初始化样式
if(btnStatus == "hide"){
// 一直隐藏
swiperLbtn.hide();
swiperRbtn.hide();
}
// 小圆点初始化样式
if(!spotsStatus){
// 不展示
swiperCircle.hide();
}
// 小圆点初始样式 1.span的位置 2.背景颜色 3.宽高
// 选中的小圆点初始样式 1.背景颜色
swiperCircle.css({
textAlign: spotsPosition})
.find('span').css({
backgroundColor: '#fff', width: spotsSize, height: spotsSize})
.eq(nowIndex).css({
backgroundColor: spotsColor});
// 渐入渐出轮播选中的卡片样式
if (type === 'fade') {
// 选中展示
swiperFade.find(".swiper-item").eq(nowIndex).show();
}
// 滚动轮播ul的样式
if (type === 'scroll') {
// 父级加宽度 === li数量 * 显示区的宽度
swiperFade.css({
width: (data.length+1)*swiperWrapper.width()});
}
// 左按钮点击事件 -》1.改变nowIndex 2.nowIndex对应的小圆点和轮播卡片
swiperLbtn.click(_.throttle(function(){
if(nowIndex === 0){
nowIndex = data.length - 1;
if(type === 'scroll') {
swiperFade.css({
left: -(data.length)*swiperWrapper.width()});
}
}else{
nowIndex --
}
change(nowIndex);
}, 1000))
// 右按钮点击事件 -》1.改变nowIndex 2.nowIndex对应的小圆点和轮播卡片
swiperRbtn.click(_.throttle(function () {
if(type === 'scroll' && nowIndex === 5){
swiperFade.css({
left:0})
}
nowIndex = (nowIndex + 1) % data.length;
change(nowIndex);
}, 1000));
// 小圆点点击函数 1.点击的小圆点变色 2.展示对应的轮播卡片
swiperCircle.on("click", "span", function(){
// 获取span数组
// var arrs = this.parentElement.children
// arrs.indexOf(span)
// nowIndex = [].indexOf.call(arrs,this);
nowIndex = $(this).index();
change(nowIndex)
})
// 鼠标引入最外层父级，停止轮播
swiperWrapper.mouseenter(function(){
// btnStatus === 'hover'时引入显示
if (btnStatus === 'hover') {
swiperLbtn.show();
swiperRbtn.show();
}
clearInterval(timer);
})
// 鼠标移出最外层父级，开启定时器
swiperWrapper.mouseleave(function(){
if (btnStatus === 'hover') {
swiperLbtn.hide();
swiperRbtn.hide();
}
// 是否自动轮播
if(isAuto){
autoMove();
}
})
function change(index) {
// 小白点切换
swiperCircle.find('.swiper-dot')
.css({
backgroundColor: '#fff'})
//用户选择小圆点选中的颜色
.eq(index).css({
backgroundColor: spotsColor});
// 图片切换
if(type === "fade"){
swiperFade.find('.swiper-item').fadeOut()
.eq(index).fadeIn();
}
if(type === "scroll"){
// 展示的图片，是ul的left的-对应index*swiperWrapper.width()
swiperFade.animate({
left: -index*swiperWrapper.width()});
}
}
// 自动轮播
function autoMove(){
// 清楚上一次计时器，防止多次点击，多个计时器同时进行，可以接受参数为undefined和null
clearInterval(timer)
// 开启定时器
timer = setInterval(function(){
swiperLbtn.trigger('click');
},duration)
}
if(isAuto){
autoMove();
}
}
昨天直播消化
猜你喜欢
转载自blog.csdn.net/weixin_48727085/article/details/116700780
今日推荐
周排行