轮播资源站：Getting Started With Swiper
注意：
（内容HTML）/（样式CSS）/（行为JS） 分离
（CSS加到head里，JS加到html里）
面试问道：怎样看待（内容HTML）/（样式CSS）/（行为JS） 分离？
回答模式：从反面回答（如果不。。。。）
display:flex;（按一行排列）
align-items:flex-start;（按行排列后不拉伸变形）
overflow:hidden;（超出部分不显示）
一、简单的例子
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title></title>
<style>
.images{
display: flex;
align-items: flex-start;
transition: all 0.5s;
}
.images > img{
vertical-align: top;
}
.window{
width: 300px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="window">
<div class="images" id=images>
<img src="https://fthmb.tqn.com/0ui_Zw01Ht9NHJkSBlqOIC1IH44=/960x0/filters:no_upscale()/yorkshire-terrier-583788122-581630e85f9b581c0b018a00.jpg" width=300 alt="图片1" height=200>
<img src="https://canna-pet.com/wp-content/uploads/2017/06/20-longest-living-dog-breeds_canna-pet-e1498599846169.jpg" width=300 alt="" height=200>
<img src="https://fthmb.tqn.com/0ui_Zw01Ht9NHJkSBlqOIC1IH44=/960x0/filters:no_upscale()/yorkshire-terrier-583788122-581630e85f9b581c0b018a00.jpg" width=300 alt="" height=200>
<img src="https://canna-pet.com/wp-content/uploads/2017/06/20-longest-living-dog-breeds_canna-pet-e1498599846169.jpg" width=300 alt="" height=200>
</div>
</div>
<span id=buttons>
<span>第1张</span>
<span>第2张</span>
<span>第3张</span>
<span>第4张</span>
</span>
</body>
</html>
CSS
.red{
color: red;
}
- JS轮播代码
var allButtons = $('#buttons > span')
for (let i = 0; i < allButtons.length; i++) {
$(allButtons[i]).on('click', function(x) {
console.log('hi')
var index = $(x.currentTarget).index()
var p = index * -300
$('#images').css({
transform: 'translate(' + p + 'px)'
})
n = index
allButtons.eq(n)
.addClass('red')
.siblings('.red').removeClass('red')
})
}
var n = 0;
var size = allButtons.length
allButtons.eq(n % size).trigger('click')
.addClass('red')
.siblings('.red').removeClass('red')
var timerId = setInterval(() => {
n += 1
allButtons.eq(n % size).trigger('click')
.addClass('red')
.siblings('.red').removeClass('red')
}, 1000)
$('.window').on('mouseenter', function() {
window.clearInterval(timerId)
})
$('.window').on('mouseleave', function() {
timerId = setInterval(() => {
n += 1
allButtons.eq(n % size).trigger('click')
.addClass('red')
.siblings('.red').removeClass('red')
}, 3000)
})
- 优化后
JS
var allButtons = $('#buttons > span') //伪数组
for (let i = 0; i < allButtons.length; i++) {
$(allButtons[i]).on('click', function(x) {
var index = $(x.currentTarget).index() //取到点击按钮排行第几
var p = index * -300
$('#images').css({
transform: 'translate(' + p + 'px)'
})
n = index
activeButton(allButtons.eq(n))
})
}
var n = 0;
var size = allButtons.length
// eq()会找出对应的DOM，然后封装成jquery，使其能够使用jquery的方法，(n % size)表示一轮循环
allButtons.eq(n % size).trigger('click') // trigger帮你触发‘click’事件
var timerId = setTimer()
function setTimer() {
return setInterval(() => {
n += 1
allButtons.eq(n % size).trigger('click')
}, 3000)
}
function activeButton($button) {
$button
.addClass('red')
.siblings('.red').removeClass('red')
}
$('.window').on('mouseenter', function() {
window.clearInterval(timerId)
})
$('.window').on('mouseleave', function() {
timerId = setTimer()
})
