女和男做的视频网站,零件加工网上接订单,wap免费网站,做电子商城网站图片幻灯片是在网页开发中常见的一种效果#xff0c;几乎是谁处可见。我今天想要实现的幻灯片的效果图如下#xff1a; 它的html的代码非常的简单#xff1a;
div classimg-wrapulliimg src./image/aa.webp/几乎是谁处可见。我今天想要实现的幻灯片的效果图如下 它的html的代码非常的简单
div classimg-wrapulliimg src./image/aa.webp//liliimg src./image/bb.jpg//liliimg src./image/cc.jpg//liliimg src./image/ee.webp//li/uldiv classnav-dotspan classon/spanspan/spanspan/spanspan/span/div
/div
我们实现幻灯片效果的原理很简单就是通过适当地改变图片容器ul的left值来达到图片切换的效果。 这是它的css代码
.img-wrap {width: 520px;height: 280px;position: relative;margin: 100px auto 0;border: 1px solid #F00;overflow: hidden; /* 浏览器底部就不会有滚动条了 */
}.img-wrap ul {position: absolute;left: 0;top: 0;margin: 0;padding: 0;
}.img-wrap ul li {list-style: none;float: left;
}.img-wrap ul li img {display: block; /* 消除img的魔鬼间距 */
}.nav-dot {font-size: 0; /* 消除inline-block自带的间距 */position: absolute;left: 50%;bottom: 10px;margin-left: -26px;
}.nav-dot span {display: inline-block;padding-top: 8px; /* 利用padding-top的值代替高度 */width: 8px;height: 0;background: #fff;border-radius: 50%;margin-right: 5px;cursor: pointer;
}.nav-dot span.on {background: #FF5000;
}
因为我们是要用js来改变ul的left值的所以我们要给ul元素设置一个定位position absolute。 它的js代码如下
window.onload function () {var oUl document.querySelector(ul);var aLi oUl.getElementsByTagName(li);var aWidth aLi[0].offsetWidth;var liLen aLi.length;oUl.style.width liLen * aWidth px;var oNavDot document.querySelector(.nav-dot);var aSpan oNavDot.querySelectorAll(span);for (var i 0; i aSpan.length; i) {aSpan[i].index i;}// 事件委托 - 利用事件冒泡机制oNavDot.addEventListener(click, function (e) {var target e.target || e.srcElement;if (target.tagName SPAN) {oUl.style.left -aWidth * target.index px;for (var i 0; i aSpan.length; i) {aSpan[i].className ;}target.className on;}})}
在js代码中我们运用了一个js的开发技巧——事件委托。事件委托利用了事件冒泡的原理因为子元素触发的事件会传递冒泡到父元素上所以我们直接把事件处理函数绑定到父元素上从而不用在每一个子元素上都绑定事件减少了浏览器的dom操作提升了页面的性能。 以上的js代码不是模块化的开发方法现在的web应用越来越复杂了我们都应该用模块化的思想来写代码了。这里我打算用匿名闭包IIFE模式来改造上面的代码。 IIFE(Immediately-Invoked Function Expression)即立即执行的函数表达式就是用一个大括号把一个匿名函数包着然后在这个大括号里放入一个小括号在匿名函数旁边以调用这个匿名函数最后将这一整块赋值给一个变量。IIFE可以创造一个块级的作用域最重要的是它是js中模块化开发的一种模式。 模块化的代码如下
var slide (function () {var module {};var attr {oUl: document.querySelector(ul),oNavDot: document.querySelector(.nav-dot)};// 设置包裹图片的ul的宽度方法module.setUlWidth function () {var aLi attr[oUl].getElementsByTagName(li);var aWidth aLi[0].offsetWidth;var liLen aLi.length;attr[oUl].style.width liLen * aWidth px;};// 设置span的索引值(index)方法module.setIdx function () {var aSpan attr[oNavDot].querySelectorAll(span);for (var i 0; i aSpan.length; i) {aSpan[i].index i;}};// 滑动方法module.slider function () {// 事件委托 - 利用事件冒泡机制attr[oNavDot].addEventListener(click, function (e) {var target e.target || e.srcElement;if (target.tagName SPAN) {attr[oUl].style.left -attr[oUl].getElementsByTagName(li)[0].offsetWidth * target.index px;for (var i 0; i attr[oNavDot].querySelectorAll(span).length; i) {attr[oNavDot].querySelectorAll(span)[i].className ;}target.className on;}})};return module;
}());window.onload function () {slide.setUlWidth();slide.setIdx();slide.slider();
}
我们会发现通过模块化的开发js实现幻灯片的逻辑更加的清晰了。
