不用jQuery做一个简单手动暂停的JavaScript幻灯片2

在你的页面上使用幻灯片之前应该仔细想清楚是否该使用它，使用不当的话会破坏你的网站的用户体验。

幻灯片会隐藏重要的内容

如果你的网站里有些内容是非常重要的，它就不应该隐藏在幻灯片中，你不能指望在理想环境下用户能够通过自动幻灯片看到他们想要的内容。

用户可能会弄不清楚该网站的主要意图是什么

特别是在主页中使用幻灯片。如果你不能决定显示什么给用户，你怎么能指望用户决定做什么？你的网站有个清晰和显而易见的路径来指导用户去做什么，如果幻灯片能够做到这点，那么你就要考虑你的网站布局策略了。

移动用户可能不喜欢使用

基于此，这里提出几点适合使用幻灯片的时候的一些建议：

给个总体的印象

你不在意用户只能看到任何一张幻灯片，你只是想让用户有个一般的视觉印象，就可以用单张幻灯片，这种情况下，用户只能看到一张幻灯片，也不会让用户错过重要的内容

当要显示的内容在幻灯片以外的地方可以访问到时

例如，你想展示度假胜地、博物馆、事件或者产品线的幻灯片，但是你可以在图库或者其他地方能够看到完整的内容的时候，幻灯片是很好用的

在渐进增强的情况下

一般来讲，如果你想使用幻灯片达到整齐的视觉效果并且不是完整的重要组成部分，就不会有太大的问题。

增加控制按钮来控制幻灯片，按钮包括： “Pause/Play” button, a “Next” button, and a “Previous” button。

先看看添加Pause/Play button的效果：

HTML代码：

<button class="controls" id="pause">Pause</button>

JavaScript代码：

var playing = true;
var pauseButton = document.getElementById('pause');

function pauseSlideshow() {
pauseButton.innerHTML = 'Play';
playing = false;
clearInterval(slideInterval);
}

function playSlideshow() {
pauseButton.innerHTML = 'Pause';
playing = true;
slideInterval = setInterval(nextSlide,2000);
}

pauseButton.onclick = function() {
if(playing) {
pauseSlideshow();
} else {
playSlideshow();
}
};

展示效果：



再看看Next and Previous buttons的效果：

增加HTML代码：

<button class="controls" id="previous">Previous</button>
<button class="controls" id="next">Next</button>

把JavaScript的下列代码：

function nextSlide() {
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'slide showing';
}

改成：

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';
}

再添加新的JavaScript代码：

var next = document.getElementById('next');
var previous = document.getElementById('previous');

next.onclick = function() {
pauseSlideshow();
nextSlide();
};
previous.onclick = function() {
pauseSlideshow();
previousSlide();
};

完整代码如下：

<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>

css：

#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;
}

.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;
}

JavaScript：

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();
};

效果：



代码：

.controls {
display: none;
}

是当JavaScript不可用的时候，隐藏按钮，这是默认形式。

var controls = document.querySelectorAll('.controls');
for(var i=0; i<controls.length; i++){
controls[i].style.display = 'inline-block';
}

使用JavaScript显示按钮，通过这种方式判断JavaScript是否可用