兼容IE11,IE10
最近在维护公司一个比较老的项目,本来是不想写这个的,但是网上的插件真的是一言难尽,bug太多了,本来想躲个懒,结果花了更多时间
正题
传统的轮播图与MVVM的轮播图的实现思路是不一样的
类似于Vue,我们只关心数据的变化,在显示隐藏过程中添加过渡动画,达到完全不涉及dom,轻松完成轮播组件
但是传统的轮播图不是这样的,因为涉及到dom的操作,思路发生的了变化
本文的大致思路是这样的
- 获取图片数量
- 获取图片宽度
- 定义图片索引
- 动态渲染轮播图导航
- (核心)rotate方法进行索引的切换,同时使用animate()进行
索引
*图片宽度
的偏移 - 启动定时器
- 添加下标点击事件
- 添加左右点击事件
html 没什么好说的,就是图片列表
扫描二维码关注公众号,回复: 5589983 查看本文章
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./carousel_bate.css">
<title>Document</title>
</head>
<body>
<div class="carousel-conatiners">
<div class="carousel">
<img class="carousel_img" src="http://www.vkcyan.top/FgbA0ptti6uF-9Rf5X6zC1VWVrnN.png" alt="">
<img class="carousel_img" src="http://www.vkcyan.top/FgbA0ptti6uF-9Rf5X6zC1VWVrnN.png" alt="">
<img class="carousel_img" src="http://www.vkcyan.top/FgbA0ptti6uF-9Rf5X6zC1VWVrnN.png" alt="">
<img class="carousel_img" src="http://www.vkcyan.top/FgbA0ptti6uF-9Rf5X6zC1VWVrnN.png" alt="">
<img class="carousel_img" src="http://www.vkcyan.top/FgbA0ptti6uF-9Rf5X6zC1VWVrnN.png" alt="">
</div>
<!-- 底部小icon动态渲染 -->
<div class="iconbox"></div>
<!-- 左右图标 -->
<div class="carousel-left">
<img src="http://www.vkcyan.top/Frbiyli7a0QMCLhq40Kz7LjkOnOa.png" alt="">
</div>
<div class="carousel-right">
<img src="http://www.vkcyan.top/FqO53vcLOtTh-cj7kKIX3i0eaoLr.png" alt="">
</div>
</div>
<script src="jquery.1.7.2.js"></script>
<script src="./carousel_bate.js"></script>
</body>
</html>
复制代码
$(document).ready(function() {
isIE()
var imageBox = $('.carousel')[0] // 获取图片对象
var imageNum = $(imageBox).children().size() // 获取图片数量
var nextId = 0 // 下一张图片的索引
var delayTime = 3000 // 延迟时间
var speed = 500 // 执行速度
var intervalId // 定时器的控制器
// 根据数量动态渲染icon
var iconNum = 0 // 记录icon数量
while (imageNum > iconNum) {
// $('.iconbox').append(`<span class="carousel-icon" rel=${iconNum}></span>`)
//ei11以下不支持模板字符串
$('.iconbox').append("<span class='carousel-icon' rel=" + iconNum + '></span>')
iconNum++
}
var rotate = function(clickId) {
if (clickId != undefined) {
if (clickId + 1 > imageNum) {
nextId = 0
} else if (clickId < 0) {
nextId = imageNum - 1
} else {
nextId = clickId
}
} else {
if (nextId + 2 > imageNum) {
nextId = 0
} else {
nextId++
}
}
$('.iconbox').children().removeClass('active') // 参数当前存在的active下标
var activeChildren = $('.iconbox').children()[nextId]
$(activeChildren).addClass('active') // 给当前的下标加class
$(imageBox).animate({
// left: `-${nextId*$(imageBox).width() +2}px`
left: '-' + nextId * $('.carousel_img').width() + 'px'
},speed)
}
// 初始化 1. 运行一次rotate函数 让其初始化 2. 给 iconbox 这个class第一个子元素添加 active
rotate()
intervalId = setInterval(rotate, delayTime) // 开启轮播
// 下标点击事件
$('.iconbox').children().each(function(index) {
$(this).click(function(e) {
clearInterval(intervalId) // 清除定时器
rotate(index) // 手动指定跳转
intervalId = setInterval(rotate, delayTime) // 再次启动定时器
})
})
// 左右滑动事件
$('.carousel-left').click(function() {
clearInterval(intervalId) // 清除定时器
rotate(--nextId)
intervalId = setInterval(rotate, delayTime) // 再次启动定时器
})
$('.carousel-right').click(function() {
clearInterval(intervalId) // 清除定时器
rotate(++nextId)
intervalId = setInterval(rotate, delayTime) // 再次启动定时器
})
// 对ie浏览器进行特殊处理
function isIE() {
if (!!window.ActiveXObject || 'ActiveXObject' in window) {
$('.carousel_img').css('width', $(window).width())
$('.carousel').css('width', '1000%')
} else {
console.log('不是ie不作处理')
}
}
})
复制代码
css 部分除了固定的布局,就是需要保证图片是一行排列的,其他的例如 轮播导航 左右切换 很好调整
* {
margin: 0;
padding: 0;
}
.carousel-conatiners {
position: relative;
width: 100%;
height: 380px;
overflow: hidden;
margin-top: 10px;
}
.carousel {
position: relative;
display: flex;
top: 0px;
left: 0px;
height: 400px;
width: 100%;
}
.carousel_img {
float: left;
display: block;
height: 360px;
width: 100%;
cursor: pointer;
}
.iconbox {
position: absolute;
bottom: 0px;
height: 20px;
width: 100%;
color: black;
display: flex;
justify-content: center;
}
.carousel-icon {
display: block;
cursor: pointer;
margin: 10px 20px 0px 10px;
width: 30px;
height: 10px;
background: rgba(206, 206, 206, 1);
border-radius: 5px;
}
.active {
background-color: black;
}
.carousel-left {
cursor: pointer;
transform: translate(0, -50%);
margin-top: -25px;
margin-left: 23%;
position: absolute;
top: 50%;
left: 0;
width: 40px;
height: 120px;
background: rgba(255, 255, 255, 1);
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
}
.carousel-left img {
display: inline-block;
width: 14px;
height: 45px;
}
.carousel-right img {
width: 14px;
height: 45px;
}
.carousel-right {
cursor: pointer;
transform: translate(0, -50%);
margin-top: -25px;
margin-right: 23%;
position: absolute;
top: 50%;
right: 0;
width: 40px;
height: 120px;
background: rgba(255, 255, 255, 1);
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
}
.carousel-conatiners:hover .carousel-left,
.carousel-conatiners:hover .carousel-right {
opacity: 0.5;
}
.carousel-left:hover,
.carousel-right:hover {
opacity: 0.8;
}
复制代码
后话
面对不兼容ie的问题,因为IE会默认对flex布局内的100%宽度进行相对父元素的宽度平分,所以对ie需要进行特殊的处理,当然不能为了ie动已经完成的css,所以,我们判断当前浏览器时候是ie,进行轮播图父元素的宽度增加,这样ie就也显示正常了(ie10以下不支持flex布局)
jQuery写得比较渣渣,大佬们还请海涵