一直想实现一个slideshow,不用jquery。但是能力有限,效果都不是很好。直到看到这篇文章。
<style>
/*
essential styles:
these make the slideshow work
*/
#slides{
position: relative;
height: 300px;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.slide{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.showing{
opacity: 1;
z-index: 2;
}
.controls{
display: none;
}
/*
non-essential styles:
just for appearance; change whatever you want
*/
.slide{
font-size: 40px;
padding: 40px;
box-sizing: border-box;
background: #333;
color: #fff;
background-size: cover;
}
/* http://unrestrictedstock.com/wp-content/uploads/snowy-winter-vignette-bokeh-night-snow-falling-free-stock-photo.jpg */
.slide:nth-of-type(1){
background-color: red;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/snowy-winter-vignette-bokeh-night-snow-falling-free-stock-photo.jpg');
}
/* http://www.dawghousedesignstudio.com/wp-content/uploads/2010/01/25/free-stock-photos-1.jpg */
.slide:nth-of-type(2){
background-color: orange;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/free-stock-photos-1.jpg');
}
/* http://www.stockfreeimages.com/static/homepage/waterfall-free-stock-photo-244915.jpg */
.slide:nth-of-type(3){
background-color: green;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/waterfall-free-stock-photo-244915.jpg');
}
.controls{
background: #333;
color: #fff;
border: none;
padding: 20px 0px;
font-size: 20px;
cursor: pointer;
border: 2px solid #fff;
margin: 10px 0px 0px 10px;
width: 70px;
}
.controls:hover,
.controls:focus{
background: #eee;
color: #333;
}
.container{
position: relative;
}
.buttons{
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
font-size: 0px;
}
</style>
<div class="container">
<ul id="slides">
<li class="slide showing"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
<div class="buttons">
<button class="controls" id="previous"><</button>
<button class="controls" id="pause">❚❚</button>
<button class="controls" id="next">></button>
</div>
</div>
<script>
var controls = document.querySelectorAll('.controls');
for(var i=0; i<controls.length; i++){
controls[i].style.display = 'inline-block';
}
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);
function nextSlide(){
goToSlide(currentSlide+1);
}
function previousSlide(){
goToSlide(currentSlide-1);
}
function goToSlide(n){
slides[currentSlide].className = 'slide';
currentSlide = (n+slides.length)%slides.length;
slides[currentSlide].className = 'slide showing';
}
var playing = true;
var pauseButton = document.getElementById('pause');
function pauseSlideshow(){
pauseButton.innerHTML = '►'; // play character
playing = false;
clearInterval(slideInterval);
}
function playSlideshow(){
pauseButton.innerHTML = '❚❚'; // pause character
playing = true;
slideInterval = setInterval(nextSlide,2000);
}
pauseButton.onclick = function(){
if(playing){ pauseSlideshow(); }
else{ playSlideshow(); }
};
var next = document.getElementById('next');
var previous = document.getElementById('previous');
next.onclick = function(){
pauseSlideshow();
nextSlide();
};
previous.onclick = function(){
pauseSlideshow();
previousSlide();
};
</script>