简单轮播
思路
可以用marginLeft,可以用绝对定位相对定位,也可以用css3transform.css3transform性能最好,所以用css3transform.css3transform
简易版轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易版轮播</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style>
.window{
width: 300px;
overflow: hidden;
}
.images{
display: flex;
align-items: flex-start;
transition: transform 0.5s;
}
button{
margin-right: 10px;
}
</style>
<script src="../28-jQuery/jQuery3.3.1min.js"></script>
</head>
<body>
<div class="window">
<div class="images" id="images">
<img src="http://cms.neotv.com.cn/uploadfile/2014/0814/20140814040012806.jpg" alt="" width="300px" height="200px">
<img src="http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg" alt="" width="300px" height="200px">
<img src="http://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/f11f3a292df5e0fe17afb8855a6034a85fdf72fa.jpg" alt="" width="300px" height="200px">
</div>
</div>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
</body>
<script>
$('#btn1').on('click',function () {
$('#images').css({
transform:'translateX(0)'
})
})
$('#btn2').on('click',function () {
$('#images').css({
transform:'translateX(-300px)'
})
})
$('#btn3').on('click',function () {
$('#images').css({
transform:'translateX(-600px)'
})
})
</script>
</html>
升级版轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>升级版轮播</title>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<style>
.images {
display: flex;
align-items: flex-start;
transition: all 0.5s;
}
.window {
width: 300px;
overflow: hidden;
margin: auto;
}
.buttons {
width: 300px;
margin: 40px auto;
text-align: center;
}
.red {
color: red;
}
</style>
<body>
<div class="window">
<div id="images" class="images">
<img src="images/1.jpg" height="300" width="300" />
<img src="images/2.png" height="300" width="300" />
<img src="images/3.png" height="300" width="300" />
<img src="images/4.jpg" height="300" width="300" />
</div>
</div>
<div class="buttons">
<span>按钮1</span>
<span>按钮2</span>
<span>按钮3</span>
<span>按钮4</span>
</div>
</body>
<script>
var allButtons = $(".buttons > span");
for (let i = 0; i < allButtons.length; i++) {
$(allButtons[i]).on("click", function(x) {
//注意,allButtons[i]是dom对象,不是jquery对象,所以要用jquery的方法,就要在前面加上$,把他转化一下,里面就有方法了.
var index = $(x.currentTarget).index(); //x.currentTarget就是当前点的对象.想要获取他在自己把把中的次序,用jquery中的index()比较简单
var p = index * -300;
$("#images").css({
transform: "translate(" + p + "px)"
});
n = index; //这一步很关键,吧index赋给n,然后n就变成了当前点击的按钮的标号,其余的n都变了,也会从这里继续往下自动滚动,所以要用全局的.
activeButton(allButtons.eq(n));
});
}
var n = 0;
var size = allButtons.length;
allButtons
.eq(n % size) // eq找出对应第几个的dom,并把dom封装成jquery对象
.trigger("click") //trigger('xxx')触发一次xxxx事件
.addClass("red")
.siblings(".red")
.removeClass("red");
var timerId = setTimer();
function setTimer() {
return setInterval(() => {
n += 1;
allButtons
.eq(n % size)
.trigger("click")
.addClass("red")
.siblings()
.removeClass("red");
}, 1000);
}
function activeButton($button) {
$button
.addClass("red")
.siblings(".red")
.removeClass("red");
//siblings()接受的是选择器,返回所有符合选择器的兄弟
//jquery的链式操作.每次找到一个对象,下面的函数都是操作的这个新找到的对象
//整个链式操作翻译:首先找到对应的第几个dom,然后用eq把他封装成jquery对象,,再用trigger('xxx')触发他的点击事件,在给他加上red的class,然后找到他符合 .red 的兄弟姐妹,然后在操作这些个兄弟姐妹
}
$(".window").on("mouseenter", function() {
window.clearInterval(timerId);
});
$(".window").on("mouseleave", function() {
timerId = setTimer(); //这里不能重新写var timer,不然就相当于重新在这4里声明了新变量,上面的clean没办法清除这里了
});
</script>
</html>
无缝轮播
什么是无缝轮播,总的来说就好像是跳绳一样.在一端排队等候的有1、2、3、4、5个小朋友，在跳绳的时候就是一个窗口，1 进入到绳子里面，就是展示当前的小朋友，1准备离开后，2开始进入，此时，1就要排在5的后面。当2离开的时候，3进入，此时2排在1的后面。循坏，轮播的效果就是这样。
预览链接
html
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>无缝的轮播</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="window">
<div class="images">
<!--img[src="./images/$.png"][alt="图片$"][width=400][height=300]*5-->
<img src="./images/1.png" alt="图片1" width="400" height="300">
<img src="./images/2.png" alt="图片2" width="400" height="300">
<img src="./images/3.png" alt="图片3" width="400" height="300">
<img src="./images/4.png" alt="图片4" width="400" height="300">
<img src="./images/5.png" alt="图片5" width="400" height="300">
</div>
</div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
css
* {margin: 0;padding: 0;box-sizing: border-box;}
.window {
width: 400px;
height: 300px;
margin: 20px auto;
overflow: hidden;
}
.images {
position: relative;
}
.images > img {
width: 100%;
transition: all 0.3s;
position: absolute;
top: 0;
}
.images > img.current {
left: 0;
transform: translateX(0);
z-index: 1;
}
.images > img.leave {
transform: translateX(-100%);
z-index: 1;
}
.images > img.enter {
transform: translateX(100%);
}
js
let n = 1;
init();
setInterval(() => {
makeLeave(getImage(n)).one('transitionend', (e) => {
//动画结束后的事件
makeEnter($(e.currentTarget))
});
makeCurrent(getImage(n + 1));
n += 1;
}, 3000)
function getImage(n) {
return $(`.images > img:nth-child(${x(n)})`)
}
function x(n) {
len = $(`.images > img`).length;
if (n > len) {
n = n % len;
if (n === 0) {
n = len
}
} //1,2,3
return n
}
function init() {
n = 1;
$(`.images > img:nth-child(${n})`).addClass('current')
.siblings().addClass('enter')
}
function makeCurrent($node) {
return $node.removeClass('leave enter').addClass('current')
}
function makeLeave($node) {
return $node.removeClass('current enter').addClass('leave');
}
function makeEnter($node) {
return $node.removeClass('leave current').addClass('enter')
}
在这里面还是有个bug就是切换浏览器标签的时候，在切回去就会容易发生间歇性工作的情况。解决方法查看下一篇博文。
