轮播图初实现
-----------------------------------html----------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.images{
display:flex;
align-items:flex-start;
/* border:1px solid red; */
transition:transform 0.5s;
}
.window{
width:275px;
overflow:hidden;
border:20px solid green;
}
</style>
</head>
<body>
<div class="window" >
<div class="images" id="images" >
<img src="https://encrypted-tbn0.gstatic.com/images? q=tbn:ANd9GcQMedPsIV4PonTB76qzsCQR_88jdD396RYQdt2DswhMEZ7zYqxfCA" alt="" width=275px >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUmAGUc1qzFlI2JyHdARbXSVM8oz8RwCAUgupCStPEr8zzadHn" alt="" width=275px>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwvodPLIQB8pALsUIJIq_CNLDc1MPwd6ibFvLLSGxRTIykTLr0" alt="" width=275px>
</div>
</div>
<button id="p1">第1张</button>
<button id="p2">第2张</button>
<button id="p3">第3张</button>
</body>
</html>
---------------------js---------------------------
$(p1).on('click',function(){
$(images).css({
transform:'translateX(0)'
})
})
$(p2).on('click',function(){
$(images).css({
transform:'translateX(-275px)'
})
--------------------------------------------------------------------------
下面代码为自动播放轮播图
------------------------------html--------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.images{
display:flex;
align-items:flex-start;
/* border:1px solid red; */
transition:transform 0.5s;
}
.images img{
vertical-align:top
}
.window{
width:275px;
overflow:hidden;
/* border:20px solid green; */
}
</style>
</head>
<body>
<div class="window" >
<div class="images" id="images" >
<img src="https://encrypted-tbn0.gstatic.com/images? q=tbn:ANd9GcQMedPsIV4PonTB76qzsCQR_88jdD396RYQdt2DswhMEZ7zYqxfCA" alt="" width=275px height=183px>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUmAGUc1qzFlI2JyHdARbXSVM8oz8RwCAUgupCStPEr8zzadHn" alt="" width=275px height=183px>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwvodPLIQB8pALsUIJIq_CNLDc1MPwd6ibFvLLSGxRTIykTLr0" alt="" width=275px height=183px>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMedPsIV4PonTB76qzsCQR_88jdD396RYQdt2DswhMEZ7zYqxfCA" alt="" width=275px height=183px>
</div >
</div>
<span id="button">
<span>第1张</span>
<span>第2张</span>
<span>第3张</span>
<span>第4张</span>
</span>
</body>
</html>
-------------------------------------------------css----------------------------
.red{
color:red;
}
------------------------------------js-------------------------------------------------
var allButtons = $('#button > span')
for(let i = 0; i < allButtons.length; i++){
$(allButtons[i]).on('click',function(x){
var index = $(x.currentTarget).index()
var p = index * -275
$('#images').css({
transform:'translateX(' + p + 'px)'
})
n =index
activeButton(allButtons.eq(n))
})
}
var n =0
var size = allButtons.length
playSlide(n%size)
var timerId = setTimer() //设置一个定时器
$('.window').on('mouseenter',function(){
window.clearInterval(timerId)
})
$('.window').on('mouseleave',function(){
timerId = setTimer()
})
/*定闹钟*/
function setTimer(){
return setInterval(()=>{
n += 1
playSlide(n%size)
},2000)
}
/*激活button*/
function activeButton($button){
$button
.addClass('red')
.siblings('.red').removeClass('red')
}
/*播放轮播图*/
function playSlide(index){
allButtons.eq(index).trigger('click')
}
轮播的原理
