[情人节特辑]如何用简单好看html代码制作H5轮播图
2024-05-10 00:48:32
文章目录
- Valentine 特辑
- 需求分析
- 准备清单
- xampp新建项目文件夹
- 文案
- 月色真美的iframe代码
- 主框架代码，利用iSlider的QQ音乐demo修改而成
- html部分
- css部分
- javascript部分
本项目demo地址：Only For Liz
缺陷：目前只能手机滑动浏览或电脑浏览器响应式调试滑动
Valentine 特辑
今天是一个特殊的日子
因为没有办法自己做的choko失败了
本来还蛮难过的，后来有人提醒我不要去朋友圈
我就去了，没想到之前从学校借书封面找代码加好友的那位大佬发了个程序员的瓦伦丁节庆祝指南
里面第一条就是写代码送给其他人
一拍脑袋，哎呀就是嘛！
说干就干！
需求分析
- 最简单的轮播图（因为要循序渐进）
- 214的来历文案
- 加一个iframe的网易云音乐
- 最后祝各位节日快乐
准备清单
- 本地调试xampp客户端
- 轮播图组件iSlider
- 百度词条的214文案
- 网易云《月色真美》ED
——————————
xampp新建项目文件夹
这个嘛贼简单大家都懂
文案
约在公元三世纪的罗马，那时恺撒已经死去快三百年了，暴君克劳多斯(Claudius)当政。当时，罗马内外战争频仍，民不聊生。为了补足兵员，将战争进行到底，Claudius下令，凡是一定年龄范围内的男子，都必须进入罗马军队，以生命为国家效劳。自此，丈夫离开妻子，少年离开恋人。于是整个罗马便被笼罩在绵长的相思中。对此，暴君大为恼火。为了达到自己的目的，他竟然下令禁止国民举行结婚典礼，甚至要求已经结婚的毁掉婚约。然而，暴政禁止不了爱情。就在暴君的国都里，居住着一位德高望重的修士，他就是瓦沦丁(Valentine)，他不忍看到一对对伴侣就这样生离死别，于是为前来请求帮助的情侣秘密地主持上帝的结婚典礼。一时间，这一令人振奋的消息在整个国度传开，更多的情侣秘密地赶来请求修士的帮助。但是，事情很快还是被暴君知晓了，于是他再一次显示了残暴面目--将修士打进大牢，最终折磨致死。修士死的那一天是2月14日，公元270年的2月14日。 人们为了纪念这个敢于与暴君斗争的人，渐渐地使得2月14日成为一个节日。很多世纪过去了，人们再也记不得Claudius的大名，再也记不得他的权杖与宝剑，但依然会纪念Valentine修士，因为那个日子是Valentine's Day，是情人节。
月色真美的iframe代码
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=480097178&auto=1&height=66"></iframe>
主框架代码，利用iSlider的QQ音乐demo修改而成
html部分
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Only for Liz</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<link rel="stylesheet" href="css.css"></head>
<body>
<script>window.debug = true;</script><div class="wrap" id="wrap"><div class="item item-1"><div class="box"><div class="mod_container"><h1 class="sprite text_1">Liz，你知道圣瓦伦丁节从何而来吗？</h1></div><div class="slider"><span>⬇</span></div></div></div><div class="item item-2"><div class="box"><div class="mod_container"><div class="sprite text_1">一切都发生于约在公元三世纪的罗马，那时恺撒已经死去快三百年了，这时是暴君克劳多斯(Claudius)当政。当时，罗马内外战争频仍，民不聊生。为了补足兵员，将战争进行到底，Claudius下令，凡是一定年龄范围内的男子，都必须进入罗马军队，以生命为国家效劳。</div><div class="sprite text_2">自此，丈夫离开妻子，少年离开恋人。于是整个罗马便被笼罩在绵长的相思中。对此，暴君大为恼火。为了达到自己的目的，他竟然下令禁止国民举行结婚典礼，甚至要求已经结婚的毁掉婚约。</div></div><div class="slider"><span>⬇</span></div></div></div><div class="item item-3"><div class="box"><div class="mod_container"><div class="sprite text_1">然而，暴政禁止不了爱情。就在暴君的国都里，居住着一位德高望重的修士，他就是瓦沦丁(Valentine)，他不忍看到一对对伴侣就这样生离死别，于是为前来请求帮助的情侣秘密地主持上帝的结婚典礼。</div><div class="sprite text_2">一时间，这一令人振奋的消息在整个国度传开，更多的情侣秘密地赶来请求修士的帮助。</div><div class="back"></div><div class="heart"></div></div><div class="slider"><span>⬇</span></div></div></div><div class="item item-4"><div class="box"><div class="mod_container"><div class="sprite text_1">但是，事情很快还是被暴君知晓了，于是他再一次显示了残暴面目--将修士打进大牢，最终折磨致死。修士死的那一天是2月14日，公元270年的2月14日。 人们为了纪念这个敢于与暴君斗争的人，渐渐地使得2月14日成为一个节日。</div><div class="sprite text_2">很多世纪过去了，人们再也记不得Claudius的大名，再也记不得他的权杖与宝剑，但依然会纪念Valentine修士，因为那个日子是Valentine's Day，是情人节。</div></div><div class="slider"><span>⬇</span></div></div></div><div class="item item-5"><div class="box"><div class="mod_container"><h2 class="sprite text_1">所以呢祝您情人节快乐！</h2><h3 class="sprite text_2">祝天下所有幸福的人都能被幸福环绕</h3><img class="superise" src="my.png" alt="maidragon"></div></div><div class="footer"><span>Designed Only For My Liz</span><br><span>仅此纪念2019年2月14日</span></div></div>
</div>
<divstyle="position: fiexed;">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=480097178&auto=1&height=32"></iframe>
</div>
<script type="text/javascript" src="iSlider.js"></script> <script>//demo
//用法
var myslider=new iSlider({wrap:'#wrap',item:'.item',onslide:function (index) {if (index == 4) {document.getElementById('J_joinNum').innerHTML=parseInt(Math.random()*10000);}}
});
console.info(myslider)</script>
</body>
</html>
css部分
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
fieldset,img{border:0}
table{border-collapse:collapse;border-spacing:0}
li{list-style:none}
a,a:hover{text-decoration:none;color:#ffe400;}
html,body{ height: 100%;}
body{line-height:1.5;font-size:14px;font-family:"hiragino sans gb",Arial;color:#fff;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.wrap{position:relative;color:#fff; height: 100%; overflow: hidden;}
.hide {display: none;}/*滑å—*/
.slider {position: absolute;width: 36px;height: 36px;margin-left: -18px;left: 50%;bottom: 10px;z-index: 9999;}
.slider span {position: absolute;width: 24px;height: 35px;left: 50%;top: 50%;margin: -17px 0 0 -12px;background-position: -158px -46px;-webkit-animation: slide_up 2s infinite ease-out;}
.item, .item .box {width: 100%;height: 100%;overflow: hidden;}
.mod_container {position: absolute;left: 50%;top: 50%;margin-top: -36px;-webkit-transform: translate3d(-50%, -50%, 0);-webkit-backface-visibility:hidden;z-index: 2;}
.item .sprite {background-repeat: no-repeat;-webkit-transform: translate3d(0, 200px, 0);opacity: 0;}
.item .text_2 {margin: 10px 0;}
.item .scene {margin: 10px auto;}
.item.play .sprite {opacity: 1;-webkit-transform: translate3d(0, 0, 0);}
.item.play .text_1 {-webkit-transition: all 1s ease-out; text-shadow: 0px 4px 10px rgba(0,0,0,.36);}
.item.play .text_2 {-webkit-transition: all 1s .3s ease-out; text-shadow: 0px 4px 10px rgba(0,0,0,.36);}
.item.play .scene {-webkit-transition: all 1s .6s ease-out;}
.item-2 .scene {background-image: url(new.png);width: 253px;height: 264px;background-position: 0 -74px;}.footer {position: absolute;width: auto;height: 36px;left: 50%;bottom: 10px;z-index: 9999;}
.footer span {-webkit-animation: micro_fade_down 2s;text-shadow: 0px 4px 10px rgba(0,0,0,.36);}
.superise {width: 100%;-webkit-animation:micro_fade_down 2s ;
}@-webkit-keyframes micro_fade_down {0%{opacity:0;-webkit-transform:translate3d(0,0,0);}100%{opacity:1;-webkit-transform:translate3d(0,0,0);}
}@-webkit-keyframes slide_up {0%,30%{opacity: 0;-webkit-transform: translate3d(0,10px,0);}60% {opacity: 1;-webkit-transform: translate3d(0,0,0);}100% {opacity: 0;-webkit-transform: translate3d(0,-8px,0);}
}.item-1 {background: #009966;}
.item-2 {background: #FF9966;}
.item-3 {background: #0099CC;}
.item-4 {background: #996699;}
.item-5 {background: #FF6666;}.heart {position: relative;margin: auto;top: 40px;right: 0;bottom: 0;left: 0;background-color: #FF6666;height: 50px;width: 50px;transform: rotate(-45deg);animation-name: beat;animation-duration: 1s;animation-iteration-count:infinite;box-shadow: 0px 4px 10px rgba(0,0,0,.36);}.heart:after {background-color: #FF6666;content: "";border-radius: 50%;position: absolute;width: 50px;height: 50px;top: 0px;left: 25px;}.heart:before {background-color: #FF6666;content: "";border-radius: 50%;position: absolute;width: 50px;height: 50px;top: -25px;left: 0px;}@keyframes beat {0% {transform: scale(1) rotate(-45deg);}50% {transform: scale(0.6) rotate(-45deg);}}@media (min-width:1200px){h1{font-size: 100px;}javascript部分
/*** iSlider 高性能全屏滑动组件 * @class iSlider* @param {object} opts* @param {string} opts.wrap='.wrap' 容器 * @param {string} opts.item='.item' 滚动单元的元素* @param {string} opts.playClass='play' 触发播放动画的class* @param {number} [opts.index=0] 设置初始显示的页码* @param {array} [opts.noslide=[]] 设置禁止滑动的页面序号(0开始), 禁止后 需要开发者手动绑定页面中的某个按钮事件进行滑动 * @param {number} [opts.speed=400] 动画速度 单位:ms* @param {number} [opts.triggerDist=30] 触发滑动的手指移动最小位移 单位:像素* @param {boolean} [opts.isVertical=true] 是否是垂直滑动 默认是. 设成false为水平滑动.* @param {boolean} [opts.useACC=true] 是否启用硬件加速 默认启用* @param {boolean} [opts.fullScr=true] 是否是全屏的 默认是. 如果是局部滑动,请设为false* @param {boolean} [opts.preventMove=false] 是否阻止系统默认的touchmove移动事件, 默认不阻止, 该参数仅在局部滚动时有效, 如果是局部滚动 如果为true 那么在这个区域滑动的时候 将不会滚动页面. 如果是全屏情况 则会阻止* @param {boolean} [opts.lastLocate=true] 后退后定位到上次浏览的位置 默认true* @param {function} [opts.onslide] 滑动后回调函数 会回传index参数* @param {array} [opts.loadingImgs] loading需要加载的图片地址列表* @param {function} [opts.onloading] loading时每加载完成一个图片都会触发这个回调 回调时参数值为 (已加载个数,总数)* @param {number} [opts.loadingOverTime=15] 预加载超时时间 单位:秒* @desc - 如丝般高性能全屏动画滑屏组件, 主要应用于微信H5宣传页,海报,推广介绍等场景. 基于iSlider,可以快速搭建效果炫丽的H5滑屏页面.
- 简洁,易用. 无css依赖.
- 专注于页面滑动, 没有冗余代码 , 保证性能.
- 组件没有任何依赖.
- imgcache 引用地址 : http://imgcache.gtimg.cn/music/h5/lib/js/module/iSlider-1.0.min.js?_bid=363&max_age=2592000
- github: https://github.com/kele527/iSlider* @example//极简用法new iSlider(); //容器默认是 .wrap 元素默认是 .item 动画播放class默认是 play//普通用法new iSlider({wrap:'.wrap',item:'.item',playClass:'play',onslide:function (index) {console.info(index)}});//带loading进度条用法new iSlider({wrap:'.wrap',item:'.item',playClass:'play',onslide:function (index) {console.info(index)},loadingImgs:['http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/open_cover.jpg?max_age=2592000','http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/im_cover.jpg?max_age=2592000','http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/bg1.jpg?max_age=2592000','http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/bg2.jpg?max_age=2592000'],onloading:function (loaded,total) {this.$('#loading div').style.width=loaded/total*100+'%';if (loaded==total) {this.$('#loading').style.display="none"}}});demo http://kele527.github.io/iSlider/demo1.html* @date 2014/11/3 星期一* @author rowanyang* */
function iSlider(opts) {this.opts={wrap:'.wrap',item:'.item',playClass:'play',index:0,noslide:[],noslideBack:false, //当noslide生效的时候 是否允许往回滑动 默认不允许, 如果有需要可以开启speed:400, //滑屏速度 单位:mstriggerDist:30,//触发滑动的手指移动最小位移 单位:像素isVertical:true,//垂直滑还是水平滑动useACC:true, //是否启用硬件加速 默认启用fullScr:true, //是否是全屏的 默认是. 如果是局部滑动,请设为falsepreventMove:false, //是否阻止系统默认的touchmove移动事件, 默认不阻止, 该参数仅在局部滚动时有效, 如果是局部滚动 如果为true 那么在这个区域滑动的时候 将不会滚动页面. 如果是全屏情况 则会阻止lastLocate:true, //后退后定位到上次浏览的位置 默认开启loadingImgs:[], //loading 预加载图片地址列表onslide:function (index) {},//滑动回调 参数是本对象onloading:function (loaded,total) {},loadingOverTime:15 //预加载超时时间 单位:秒}for (var i in opts) {this.opts[i]=opts[i];}this.SS=false;try {this.SS=sessionStorage;this.SS['spt']=1;//检测是否是ios私密浏览模式 如果是私密模式 这一行会报错 进入到catch}catch (e) {this.SS=0;}this.init();
}
/** @lends iSlider */
iSlider.prototype={wrap:null,index : 0,length:0,_tpl:[],_delayTime:150,_sessionKey : location.host+location.pathname,_prev:null,_current:null,_next:null,$:function (o,p) {return (p||document).querySelector(o);},addClass:function (o,cls) {if (o.classList) {o.classList.add(cls)}else {o.className+=' '+cls;}},removeClass:function (o,cls) {if (o.classList) {o.classList.remove(cls)}else {o.className=o.className.replace(new RegExp('\\s*\\b'+cls+'\\b','g'),'')}},init:function () {var self = this;this.wrap = typeof this.opts.wrap=='string' ? this.$(this.opts.wrap) : this.opts.wrap ;if (this.SS) {//使用sessionStorage来保存当前浏览到第几页了 后退回来的时候 定位到这一页this._sessionKey=btoa(encodeURIComponent(this._sessionKey+this.wrap.id+this.wrap.className));var lastLocateIndex=parseInt(this.SS[this._sessionKey]);this.index = (this.opts.lastLocate && lastLocateIndex>=0) ? lastLocateIndex : 0;}else {this.index = this.opts.index || 0;}if (!this.wrap) {throw Error('"wrap" param can not be empty!');return ;}this._tpl = this.wrap.cloneNode(true);this._tpl = this.opts.item ? this._tpl.querySelectorAll(this.opts.item) : this._tpl.children;for (var i=0; i<this._tpl.length; i++) {this._tpl[i].style.cssText+='display:block;position:absolute;left:0;top:0;width:100%;height:100%'};this.length=this._tpl.length; //总页数数据this.touchInitPos = 0;//手指初始位置this.startPos = 0;//移动开始的位置this.totalDist = 0,//移动的总距离this.deltaX1 = 0;//每次移动的正负this.deltaX2 = 0;//每次移动的正负//全屏滑动 设置样式if (this.opts.fullScr) {var s = document.createElement('style');s.innerHTML = 'html,body{width:100%;height:100%;overflow:hidden}';document.head.appendChild(s);s = null;}this.wrap.style.cssText+="display:block;position:relative;"+(this.opts.fullScr ? 'width:100%;height:100%':'');//必须要在前面的布局都设置好后 再来获取尺寸this.displayWidth = this.wrap.clientWidth; //滑动区域最大宽度this.displayHeight = this.wrap.clientHeight; //滑动区域最大高度this.scrollDist=this.opts.isVertical ? this.displayHeight : this.displayWidth;//滚动的区域尺寸this._setHTML();// 填充初始DOMif (this.opts.loadingImgs && this.opts.loadingImgs.length) {this._loading();}else {this._pageInit();}if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {this._delayTime=50;}this._bindEvt();},_bindEvt:function () {var self = this;var handlrElm= this.opts.fullScr ? this.$('body') : this.wrap;handlrElm.addEventListener('touchstart',function (e) {self._touchstart(e);},false);handlrElm.addEventListener('touchmove',function (e) {self._touchmove(e);if (!self.opts.fullScr) { //修复手Q中局部使用时的一个buge.stopPropagation();e.preventDefault();}},false);handlrElm.addEventListener('touchend',function (e) {self._touchend(e);},false);handlrElm.addEventListener('touchcancel',function (e) {self._touchend(e);},false);if (this.opts.fullScr || this.opts.preventMove) {handlrElm.addEventListener('touchmove', function (e) {e.target.getAttribute('data-stop') !== "true" && e.preventDefault(); }, false);}},_setHTML:function (index) {if (index>=0) {this.index=parseInt(index);}this.wrap.innerHTML='';var initDom = document.createDocumentFragment();if (this.index>0) {this._prev=this._tpl[this.index-1].cloneNode(true);this._prev.style.cssText+=this._getTransform('-'+this.scrollDist+'px');initDom.appendChild(this._prev)}else {this._prev=null;}this._current =this._tpl[this.index].cloneNode(true);this._current.style.cssText+=this._getTransform(0);initDom.appendChild(this._current);if (this.index<this.length-1) {this._next=this._tpl[this.index+1].cloneNode(true);this._next.style.cssText+=this._getTransform(this.scrollDist+'px');initDom.appendChild(this._next)}else {this._next=null;}this.wrap.appendChild(initDom);},_pageInit:function () {var self = this;setTimeout(function () {self.addClass(self._current,self.opts.playClass);try {self.opts.onslide.call(self,self.index);} catch (e) {
// console.info(e)}},this._delayTime);},_touchstart : function (e) {var self=this;if(e.target.getAttribute("data-stop") === "true")return;if(e.touches.length !== 1){return;}//如果大于1个手指，则不处理this.lockSlide=false;this._touchstartX=e.touches[0].pageX;this._touchstartY=e.touches[0].pageY;this.touchInitPos = this.opts.isVertical ? e.touches[0].pageY:e.touches[0].pageX; // 每次move的触点位置this.deltaX1 = this.touchInitPos;//touchstart的时候的原始位置this.startPos = 0;this.startPosPrev = -this.scrollDist;this.startPosNext = this.scrollDist;//手指滑动的时候禁用掉动画if (this._next) {self._next.style.cssText+='-webkit-transition-duration:0;'}self._current.style.cssText+='-webkit-transition-duration:0;'if (this._prev) {self._prev.style.cssText+='-webkit-transition-duration:0;'}},_touchmove : function (e) {var parent=e.target;if(parent.getAttribute("stop") === "true")return;do {parent=parent.parentNode;} while (parent && parent!=this.wrap);if (!parent && e.target!=this.wrap ) {return ;}var self = this;if(e.touches.length !== 1 || this.lockSlide){return;}var gx=Math.abs(e.touches[0].pageX - this._touchstartX);var gy=Math.abs(e.touches[0].pageY - this._touchstartY);//如果手指初始滑动的方向跟页面设置的方向不一致 就不会触发滑动 这个主要是避免误操作, 比如页面是垂直滑动, 在某一页加了横向滑动的局部动画, 那么左右滑动的时候要保证页面不能上下移动. 这里就是做这个的.if (gx>gy && this.opts.isVertical) { //水平滑动this.lockSlide=true;return ;}else if(gx<gy && !this.opts.isVertical){ //垂直滑动this.lockSlide=true;return ;}if (this.opts.noslide && this.opts.noslide.indexOf(this.index)>=0) {//noslideBack 默认值是false 默认是禁用滑动后 前后都不能再滑动,//但是当noslideBack为true时, 禁用了这一页的滑动, 那么往下是划不动了 但是可以往上滑if ( !this.opts.noslideBack || (this.opts.isVertical ? (e.touches[0].pageY - this._touchstartY < 0) : (e.touches[0].pageX - this._touchstartX < 0)) ) {return ;}}var currentX = this.opts.isVertical ? e.touches[0].pageY:e.touches[0].pageX;this.deltaX2 = currentX - this.deltaX1;//记录当次移动的偏移量this.totalDist = this.startPos + currentX - this.touchInitPos;self._current.style.cssText+=this._getTransform(this.totalDist+'px');this.startPos = this.totalDist;//处理上一张和下一张if (this.totalDist<0) {//露出下一张if (this._next) {this.totalDist2 = this.startPosNext + currentX - this.touchInitPos;self._next.style.cssText += this._getTransform(this.totalDist2+'px');this.startPosNext = this.totalDist2;}}else {//露出上一张if (this._prev) {this.totalDist2 = this.startPosPrev + currentX - this.touchInitPos;self._prev.style.cssText += this._getTransform(this.totalDist2+'px');this.startPosPrev = this.totalDist2;}}this.touchInitPos = currentX;},_touchend : function (e) {if(e.target.getAttribute("stop") === "true")return;if(this.deltaX2 < -this.opts.triggerDist){this.next();}else if(this.deltaX2 > this.opts.triggerDist){this.prev();}else{this._itemReset();}this.deltaX2 = 0;},_getTransform:function (dist) {var pos= this.opts.isVertical? '0,'+dist : dist+',0';return ';-webkit-transform:' + (this.opts.useACC ? 'translate3d('+pos+',0)' : 'translate('+pos+')');},_itemReset:function () {var self = this;self._current.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform(0);if (self._prev) {self._prev.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform('-'+this.scrollDist+'px');}if (self._next) {self._next.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform(this.scrollDist+'px');}this.deltaX2 = 0;},_loading:function () {var self = this;var imgurls=this.opts.loadingImgs;var fallback=setTimeout(function () {try {self.opts.onloading.call(self,total,total);} catch (e) { }self._pageInit();},this.opts.loadingOverTime*1000);//loading超时时间 万一进度条卡那了 15秒后直接显示var imgs=[], loaded=1;var total=imgurls.length+1;for (var i=0; i<imgurls.length; i++) {imgs[i]=new Image();imgs[i].src=imgurls[i];imgs[i].onload=imgs[i].onerror=imgs[i].onabort=function (e) {loaded++;if (this.src === imgurls[0] && e.type === 'load') {clearTimeout(fallback)}checkloaded();this.onload=this.onerror=this.onabort=null;}}try {self.opts.onloading.call(self,1,total);} catch (e) { }function checkloaded() {try {self.opts.onloading.call(self,loaded,total);} catch (e) { }if (loaded==total) {if (fallback) {clearTimeout(fallback)}self._pageInit();imgs=null;if (self.opts.preLoadingImgs && self.opts.preLoadingImgs.length) {self.preloading();}}}},/** * 滑动到上一页* @examples1.prev();*/prev:function () {var self = this;if (!this._current || !this._prev) {this._itemReset();return ;}if (this.index > 0) {this.index--;}else {this._itemReset();return false;}// var nextIndex = this.index+1 > this.length-1 ? 0 : this.index+1;if (this._next) {this.wrap.removeChild(this._next);}this._next=this._current;this._current=this._prev;this._prev=null;this._next.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform(this.scrollDist+'px');this._current.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform(0);if (this.SS) {this.SS[this._sessionKey]=this.index;}setTimeout(function () {if (self.$('.'+self.opts.playClass,self.wrap)) {self.removeClass(self.$('.'+self.opts.playClass,self.wrap),self.opts.playClass)}self.addClass(self._current,self.opts.playClass)try {self.opts.onslide.call(self,self.index);} catch (e) {
// console.info(e)}var prevIndex = self.index-1;if (prevIndex < 0) {prevIndex = self.length-1;return false;}self._prev = self._tpl[prevIndex].cloneNode(true);self._prev.style.cssText+='-webkit-transition-duration:0ms;'+self._getTransform('-'+self.scrollDist+'px');self.wrap.insertBefore(self._prev,self._current);},this._delayTime)},/** * 滑动到下一页* @examples1.next();*/next:function () {var self = this;if (!this._current || !this._next) {this._itemReset();return ;}if (this.index < this.length-1) {this.index++;}else {this._itemReset();return false;}// var prevIndex = this.index===0 ? this.length-1 : this.index-1;if (this._prev) {this.wrap.removeChild(this._prev);}this._prev=this._current;this._current=this._next;this._next=null;this._prev.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform('-'+this.scrollDist+'px');this._current.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform(0);if (this.SS) {this.SS[this._sessionKey]=this.index;}setTimeout(function () {if (self.$('.'+self.opts.playClass,self.wrap)) {self.removeClass(self.$('.'+self.opts.playClass,self.wrap),self.opts.playClass)}self.addClass(self._current,self.opts.playClass)try {self.opts.onslide.call(self,self.index);} catch (e) {
// console.info(e)}var nextIndex = self.index+1;if (nextIndex >= self.length) {return false;}self._next = self._tpl[nextIndex].cloneNode(true);self._next.style.cssText+='-webkit-transition-duration:0ms;'+self._getTransform(self.scrollDist+'px');self.wrap.appendChild(self._next);},this._delayTime)},/** * 跳转到指定页码* @param {number} index 页码 从0开始的* @examples1.slideTo(3);*/slideTo:function (index) {this._setHTML(index);this._pageInit();}}if (typeof module == 'object') {module.exports=iSlider;
}else {window.iSlider=iSlider;
}
然后就完成了
祝大家都能幸福！
祝我也能有爱别人和被爱的能力
本项目已经挂载在Github Andrew8102/ValentineForLiz上
[情人节特辑]如何用简单好看html代码制作H5轮播图相关推荐
- html5移动轮播图,简单的支持移动设备的轮播图jQuery插件
这是一款简单的支持移动设备的轮播图jQuery插件.该jQuery轮播图插件采用响应式设计,支持自动轮播,圆点导航和箭头导航,以及CSS3过渡动画效果等. 使用方法 在页面引入jquery,slide ...
- 记录下如何用vue实现PC端网易云轮播图效果
记录下自己写仿网易云音乐手写的轮播图,效果如图 简单来说,这个轮播图原理是用css定位把所有图片叠再一起,显示前3张图片,第2张图片层里设置层级为最高,1,3俩张图片层级比2层级低,比其他图片高就行. ...
- php轮播效果代码,CSS实现轮播图效果（附代码）
CSS实现轮播图效果(附代码) 理论基础 CSS3 animation 属性和 @keyframes 规则 主体思想 1.准备相同大小的多个图片 2.将要展示图片横排放在一个图片容器里面 3.在图片容 ...
- 网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图 （4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播 设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
- 简单的跑马灯效果（轮播图）
逻辑简介:想要图片或者是文字向左移动,那肯定得用到定时器,那么移动那就必然是距离左边的left值在改变:核心问题就是通过定时器来改变ul距离left的值:本姑娘就是简简单单直直接接,上代码吧.如有什么 ...
- ios 扑克牌效果轮播_iOS一行代码实现立体轮播图
示例图片 bannergif.gif 使用方法 1. 初始化 (instancetype)initWithFrame:(CGRect)frame WithBannerSource:(NinaBanne ...
- html文字图片一起轮播卡片,简单的堆叠卡片样式jQuery轮播图插件
MxSlider.js是一款堆叠卡片样式的jQuery响应式轮播图插件.该轮播图插件兼容IE8浏览器,采用响应式设计,它在图片切换时,就像一叠扑克牌将最上面一张挪开的效果. 使用方法 在页面中引入Mx ...
- 制作一个简单的轮播图（详解新手教学）
制作一个简单的轮播图(详解新手教学) 相信很多初学者,无论是前端还是后端,对于制作页面时,都想自己亲手制作一个轮播图. 如何制作一个轮播图: 基础知识:有HTML,Css,js基础 本文使用技术: H ...
- 制作一个简单的轮播图
记录一下轮播图制作(这里用的是原生js制作的) 前期准备工作 1.自己用的顺手的开发工具,我这里用的时HBuilder来写的 2.创建项目 3.在项目中创建images.css.js文件夹,把需要制作 ...
最新文章
- 20189317 《网络攻防技术》 第二周作业
- Codevs 1005 生日礼物
- linux配置caffe环境,最全caffe安装踩坑记录（Anaconda,nvidia-docker,linux编译）
- mysql workbench ssh_通过MySQL Workbench进行SSH隧道
- 有参转录组常用数据库
- 如何使用计算机模拟函数图像,模拟图像
- latex 下划线_备战美赛！论文写作必备Latex排版教程之单词间隔、标题及交叉引用...
- 选择结构_标准if-else语句
- 《销售从被拒绝开始》叶冠1
- Eclipse在ubuntu平台不显示顶部菜单栏
- 微信小程序实战，用vue3实现每日浪漫情话推荐~
- Linux故障之grub
- 数据分析师就是个 SQL boy？
- 免费网课python_Python网课推荐——免费学习Python编程
- 给仍在「 选品 」的跨境卖家提个醒！
- MQTT网关是什么？
- 中国标准时间和时间戳互转
- 微软远程桌面mac/ios/android客户端
- jquery 录屏_Fundebug录屏插件更新至0.6.0
- AutoCAD2014一些遇到的问题