效果圖PC端：
- 支援點選浏覽
- 支援方向鍵浏覽
- 支援圖檔延遲加載
- 支援自動定時加載
效果圖手機端：
- 支援自動定時加載
- 支援圖檔延遲加載
- 支援點選浏覽
- 支援觸屏滑動浏覽
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，取第一個touch
startPos = { // 取第一個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); 更多相關： |
線上預覽: http://each.sinaapp.com/pictures/pure-js-gallery.htmlAngular線上教程: http://each.sinaapp.com/angularReact線上教程: http://each.sinaapp.com/react |
永久連結: http://qiaolevip.iteye.com/blog/2260615預覽文章: PhpStorm10最新版破解注冊激活碼（圖文版） |
永久連結: http://qiaolevip.iteye.com/blog/2260617預覽文章: IntelliJ IDEA15最新版破解注冊激活碼（圖文版 |
永久連結: http://qiaolevip.iteye.com/blog/2260620預覽文章: CLion1.2最新版破解注冊激活碼（圖文版） |
永久連結: http://qiaolevip.iteye.com/blog/2260627預覽文章: RubyMine8最新版破解注冊激活碼（圖文版 |
永久連結: http://qiaolevip.iteye.com/blog/2260628預覽文章: PyCharm5最新版破解注冊激活碼（圖文版） |
永久連結: http://qiaolevip.iteye.com/blog/2264038預覽文章: PyCharm5.0.2最新版破解注冊激活碼（圖文版） |