效果图PC端：

1. 支持点击浏览
2. 支持方向键浏览
3. 支持图片延迟加载
4. 支持自动定时加载

效果图手机端：

1. 支持自动定时加载
2. 支持图片延迟加载
3. 支持点击浏览
4. 支持触屏滑动浏览

HTML代码片段：

<div class="slide"><ul></ul><div class="dot"></div>
</div>

CSS代码片段：

.slide {position: relative; max-width: 440px;min-height: 480px; overflow: hidden; margin: 0px auto; }
.slide:after {content: ''; display: block; width: 100%; padding-top: 50%; }
.slide ul {position: absolute;left: 0; top: 0;width: 100%;height: 100%;padding: 0;margin: 0;}
.slide li {list-style: none;position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.slide li:first-child {z-index: 1;}
.slide li.cur {z-index: 1;transition:left .2s linear;}
.slide li img {position: absolute;left: 0; top: 0;width: 100%;height: 100%;border: none;}
.slide .dot {position: absolute; left: 50%; bottom: 10px;margin-left: -40px; font-size: 0;z-index: 2;}
.slide .dot span {display:inline-block;padding: 6px;margin-left:4px;-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;background:#fff;cursor: pointer}
.slide .dot .cur {background:#34c751}

JS代码片段：

// 设置图片源
var imgData = ['http://ww1.sinaimg.cn/bmiddle/9e5389bbjw1ez7jiqwwi9j20dw0dw76i.jpg','http://ww3.sinaimg.cn/bmiddle/9e5389bbjw1ez7jirk5urj20dw0dwgnp.jpg','http://ww3.sinaimg.cn/bmiddle/9e5389bbjw1ez7jis72jcj20dw0dwmz9.jpg','http://ww4.sinaimg.cn/bmiddle/9e5389bbjw1ez7jist323j20dw0dwq4i.jpg','http://ww1.sinaimg.cn/bmiddle/9e5389bbjw1ez7jithb2gj20dw0dwjss.jpg','http://ww3.sinaimg.cn/bmiddle/9e5389bbjw1ez7jiu53trj20dw0dwdhq.jpg','http://ww2.sinaimg.cn/bmiddle/9e5389bbjw1ez7jixx545j20dw0dwn04.jpg','http://ww3.sinaimg.cn/bmiddle/9e5389bbjw1ez7jiymhv8j20dw0dw0vh.jpg','http://ww1.sinaimg.cn/bmiddle/9e5389bbjw1ez7jiza47wj20dw0dw40q.jpg'
];
var imgSize = imgData.length;
var slideObj = document.querySelector('.slide');
var slideUlObj = document.querySelector('.slide ul');
var dotObj = slideObj.querySelector('.dot');
dotObj.style.marginLeft = -8 * imgSize + 'px';for (var i = 0; i < imgSize; i++) {var liObj = document.createElement('li');var imgObj = document.createElement('img');var imgSrc = imgData[i];// 添加延迟加载图片机制if (i == 0) imgObj.src = imgSrc;else imgObj.dataset.src = imgSrc;liObj.appendChild(imgObj);slideUlObj.appendChild(liObj);var spanObj = document.createElement('span');if (i == 0) spanObj.className = 'cur';// 绑定圆圈点击事件spanObj.onclick = function() {var index = Array.prototype.indexOf.call(dotObj, this);swipeImg(index);};dotObj.appendChild(spanObj);
}var curIndex = 1;
var imgObj = slideObj.querySelectorAll('ul li');
var dotObj = slideObj.querySelectorAll('.dot span');var swipeImg = function(index) {index = index >= imgSize ? 0 : index < 0 ? imgSize - 1 : index;for (var i = 0; i < imgSize; i++) {dotObj[i].className = '';imgObj[i].className = '';}var curImgObj = imgObj[index];dotObj[index].className = 'cur';curImgObj.className = 'cur';var imgSubObj = curImgObj.querySelector('img');if (imgSubObj.dataset.src) {imgSubObj.src = imgSubObj.dataset.src;delete imgSubObj.dataset.src;}curIndex = index;
};setInterval(function() {swipeImg(curIndex);curIndex++;
}, 3000);var touchEvent = {// 判断设备是否支持touch事件touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,events: {slider: slideUlObj,handleEvent: function(event) {if (event.type == 'touchstart') {this.start(event);} else if(event.type == 'touchmove') {this.move(event);} else if(event.type == 'touchend') {this.end(event);}},start: function(event) {event.preventDefault();                      // 阻止触摸事件的默认动作,即阻止滚屏var touch = event.touches[0];                // touches数组对象获得屏幕上所有的touch，取第一个touchstartPos = {                                 // 取第一个touch的坐标值x: touch.pageX,y: touch.pageY,time: +new Date};this.slider.addEventListener('touchmove', this, false);this.slider.addEventListener('touchend', this, false);},move: function(event) {event.preventDefault();                      // 阻止触摸事件的默认行为，即阻止滚屏// 当屏幕有多个touch或者页面被缩放过，就不执行move操作if (event.touches.length > 1 || event.scale && event.scale !== 1) return;var touch = event.touches[0];endPos = {x: touch.pageX - startPos.x,y: touch.pageY - startPos.y};},// 滑动释放end: function(event) {var duration = +new Date - startPos.time;    // 滑动的持续时间if (Number(duration) > 100) {// 判断是左移还是右移，当偏移量大于50时执行if (endPos.x > 50) {swipeImg(curIndex - 1);} else if(endPos.x < -50) {swipeImg(curIndex + 1);}}// 解绑事件this.slider.removeEventListener('touchmove', this, false);this.slider.removeEventListener('touchend', this, false);}}
};if(!!touchEvent.touch) touchEvent.events.slider.addEventListener('touchstart', touchEvent.events, false);document.addEventListener('keydown', function(event) {switch (event.keyCode) {case 33:case 37:case 38:swipeImg(curIndex - 1);break;case 9:case 32:case 34:case 39:case 40:swipeImg(curIndex + 1);break;}event.preventDefault();
}, false);