效果图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/angular
React在线教程: 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最新版破解注册激活码(图文版)
|
相关推荐
swiper.js移动端banner图片轮播插件制作带索引的左右按钮控制图片轮播切换、触屏滑动图片切换、响应式的图片切换代码。
此Demo是jQuery移动端触屏滑动日期控件(mobiscroll时间控件,也支持PC端),引用起来十分简单,功能强大,使用便捷.
一个用于原生JS的移动端的可触摸滑动的轮播控件
jQuery移动端触屏滑动日期控件是一款基于Mobiscroll插件实现的移动端日期控件代码。
基于swiper.js手机触屏滑动全屏幻灯片左右切换代码,带缩略图和左右控制箭头的手机移动端图片轮播插件。
NULL 博文链接:https://onestopweb.iteye.com/blog/2380719
NULL 博文链接:https://onestopweb.iteye.com/blog/2380724
Swiper是开源、免费、强大的移动端触摸滑动插件,能够实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果,通过本课程可以快速掌握Swiper插件的使用,并通过综合案例讲解在实际工作中的应用。通过多个案例逐一...
jQuery手机触屏滑动切换幻灯片是一款基于swiper.js实现的移动端网站内容触摸滑动特效。
vue自定义移动端touch事件,点击、滑动、长按事件.将以上代码保存到一个js文件内,引入到页面vue库文件之后、用户js文件之前。这样就可以使用vue的触屏事件了。
javascript触屏滑动特效插件,移动端滑动特效,触屏焦点图,触屏Tab切换,触屏多图切换等
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指...
jQuery手机触屏滑动导航代码是一款实用的手机移动端左右滑动导航菜单特效。
HTML5手机端相册触屏滑动切换特效是一款手机移动端图片相册触屏滑动切换预览代码。
swiper.js手机图片滑动切换代码是一款适用手机移动端的宽屏幻灯片切换特效。
今天个小伙伴们分享一个好东西,webApp轮播效果,支持手机上用手左右滑动的效果,因为手机的触摸事件和PC端用鼠标操作的事件是不同的,所以我就需要针对移动端的设备触摸事件做相应的轮播特效。大家可以去看下易迅的...
公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了网上的资料,大多都是基于jquery的,虽然稍作修改就可以用于移动端,但不能实现触摸上下翻滚。所以就去了zepto的官网查看其API,...
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的...
jquery手机触屏滑动图片轮播效果代码_移动端图片拖拽切换插件touchslider.js