贵州省建设网站,ppt素材网站建设流程图,兴义网站开发,wordpress前后登录文章目录 前言一、案例实现功能描述二、html代码讲解三、css代码讲解四、js实现功能及代码讲解五、效果图总结 前言 轮播图案例是一个比较重要的案例#xff0c;能够在实现功能的过程中掌握大部分js代码的知识点。也是一个比较复杂的案例。涉及到的功能是比较的多#xff0c;… 文章目录 前言一、案例实现功能描述二、html代码讲解三、css代码讲解四、js实现功能及代码讲解五、效果图总结 前言 轮播图案例是一个比较重要的案例能够在实现功能的过程中掌握大部分js代码的知识点。也是一个比较复杂的案例。涉及到的功能是比较的多大家要一步步看才能明白哦我也是学了好几个小时才搞明白的当然在实际开发中都会直接用模板套。但和你自己一个字母一个字母打出来的感觉和掌握程度是有很大差别的。我感觉自己打一遍源码才是最好的效果。不多说了直接开整。。。 一、案例实现功能描述 要实现淘宝轮播图首先要做的是分析它的结构和功能。这里我把淘宝轮播图拿来大家一起分析。 分析结构 分析结构主要是为了写htmlcss 这个比较好分析相信大家比较轻松。 1.一个大盒子放里面的内容。 2.左中和右中2个箭头。 3.把轮播的图放到ul li里。 4.ol li 实现小圆圈。 分析功能 大家看图能发现有什么功能吗我给大家列出来看看和你的想法一样不 1.鼠标放上去会出现左中和右中的2个箭头。 2.鼠标离开箭头也会随之消失。 3.鼠标点击箭头会出现图片轮播效果点左箭头图片向左移动一个图片。反之也是一样的。 4.鼠标点击箭头后下方小圆圈的实心圆就会变色展示的是对应的图片。 5.鼠标放上去后图片将不会再进行自动轮播效果。 6.鼠标离开后图片就会在间隔时间内实现自动的轮播图片。
二、html代码讲解 第一章已经把结构和功能都介绍了现在开始整代码先实现html布局。下述代码和分析的一样。 1.我们需要大盒子focus_f1。 2.2个箭头按钮用a标签。那个href写的是javascript:;这样点击域名栏不会跳转。 3.滚动图片区域用ul li。 4.ol 没有设置li 因为我们要用js动态生成。是不是很高级下面js再讲它的好处。 !-- 轮播图 --div classfocus_f1!-- 左按钮 --a hrefjavascript:; classarrow-l /a!-- 右按钮 --a hrefjavascript:; classarrow-r/a!-- 滚动图片区域 --ul lia href#img src./image/p6img/p6img1.png /a/lilia href#img src./image/p6img/p6img2.jpg /a/lilia href#img src./image/p6img/p6img3.webp /a/lilia href#img src./image/p6img/p6img4.jpg /a/lilia href#img src./image/p6img/p6img5.webp /a/lilia href#img src./image/p6img/p6img6.jpg /a/li/ulol classcircle !-- 用js添加li --/ol/div 三、css代码讲解 到了布局样式了html比较简单这里就开始慢慢变难了提醒仔细看代码哦。 下面代码就是css布局和样式的全部代码。要注意的是在没写js之前要把overflow注释掉哦。这样在写js条代码时才会很方便。还有就是大盒子一定要有相对定位。因为后边图片要轮播必须该ul的left属性值才能实现轮播效果。
/* 轮播图盒子修饰 */
.focus_f1 {position: relative;width: 520px;height: 280px;left: 0px;top: 0px;display: inline-block;/* border: 1px solid #ff557f; */overflow: hidden;
}/* 轮播图左按钮 */
.focus_f1 .arrow-l {position: absolute;left: 0px;top: 125px;color: #FF0000;z-index: 2;display: none;
}/* 轮播图右按钮 */
.focus_f1 .arrow-r {position: absolute;top: 125px;left: 506px;color: #FF0000;z-index: 2;display: none;
}/* 轮播图片列表 */.focus_f1 ul {position: absolute;top: 0px;left: 0px;list-style: none;width: 3640px;
}/* 每个图平铺 */.focus_f1 ul li {float: left;
}/* 小圆点 ol样式 */.focus_f1 .circle {position: absolute;left: 206px;top: 250px;width: 200px;list-style-type: circle;
}/* 每个li平铺 */.focus_f1 .circle li {width: 20px;float: left;color: #ffffff;
}/* 选中的li小圆圈变色 */
.focus_f1 .circle .current {color: #ff00ff;
}
四、js实现功能及代码讲解 htmlcss已经全部打出来了但是他还不会实现轮播等鼠标监听事件的功能。所以说该我们的大哥js出马了。 首先我们要实现一个图片缓动动画的实现。把这个功能封装起来。封装成animate文件。方便我们调用。animate移动对象移动距离执行的函数三个参数。 进函数先让上一次的停止再开始执行函数代码
clearInterval(obj.timer); 缓动的实现代码每隔15毫秒执行移动的距离就会减少
var step (target - obj.offsetLeft) / 10; 缓动可能出现小数这里我们把他取整如果为2.1就变为3.如果为-1.1就变为-2代码。
step step 0 ? Math.ceil(step) : Math.floor(step); 直到等于了传过来的target就会让它停止代码最后一个参数可以写也可以不写写的话就执行
if (obj.offsetLeft target) {clearInterval(obj.timer);// 回调函数if (callback) {callback();}} 最后把ul li 的left值变化代码
obj.style.left obj.offsetLeft step px; 分开每一步都讲完了完整的封装代码展示
function animate(obj, target, callback) {clearInterval(obj.timer);obj.timer setInterval(function() {// var stepMath.ceil((target-obj.offsetLeft)/10);var step (target - obj.offsetLeft) / 10;step step 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft target) {clearInterval(obj.timer);// 回调函数if (callback) {callback();}}obj.style.left obj.offsetLeft step px;}, 15);
} 下面我们就开始写js核心代码 创建一个lb.js文件然后获取元素代码,把要操作的元素都获取过来
window.addEventListener(load,function(){var arrow_ldocument.querySelector(.arrow-l);var arrow_rdocument.querySelector(.arrow-r);var focusdocument.querySelector(.focus_f1);var ulfocus.querySelector(ul);var olfocus.querySelector(.circle);
}) 实现第一个功能鼠标放上去和离开实现箭头的显示和消失代码加注释的下面会讲。先别着急看不懂也没关系 // 鼠标经过focus.addEventListener(mouseenter,function(){arrow_l.style.displayblock;arrow_r.style.displayblock;// 鼠标经过停止定时器clearInterval(timer);// 清除定时器变量timernull;})// 鼠标离开focus.addEventListener(mouseleave,function(){arrow_l.style.displaynone;arrow_r.style.displaynone;// 开启定时器timersetInterval(function(){// 每2秒自动调用点击事件arrow_r.click();},2000);}) 每次图片移动都移动一个盒子的宽度所以我们获取盒子宽度代码
var focusWidthfocus.offsetWidth; 下面我们要动态创建ol li并且点击小圆圈就会变色并且实现图片移动过去代码注释也都写在代码里了这里就简单描述了直接看代码
for(var i0;iul.children.length;i){// 创建livar lidocument.createElement(li);// 记录小圆圈的索引号 自定义属性li.setAttribute(index,i);// 把创建li添加到ol里ol.appendChild(li);// 绑定点击事件li.addEventListener(click,function(){// 把所有li清除for(var i0;iol.children.length;i){ol.children[i].className;}this.classNamecurrent;// 当前li的索引号var indexthis.getAttribute(index);// 当前小圆点的位置给num控制图片下一张播放numindex;// 当前小圆点的位置给小圆点下一个移动小圆点才会正常circleindex;// 点击小圆圈移动图片animate(ul,-focusWidth*index);})} 下面我们克隆一张图片放到ul最后面实现走到最后一张后跳到第一张。并且把第一个ol li的小圆圈设置为默认点击样式代码 // 把第一个小li设置类名currentol.children[0].classNamecurrent;// 克隆第一张图片 放到ul最后面var firstul.children[0].cloneNode(true);ul.appendChild(first); 这里需要用排他思想来让点击的小圆圈变样式其余的小圆圈都要变为默认样式代码 function circleChange(){// 重置小圆圈样式 排它思想for(var i0;iol.children.length;i){ol.children[i].className;}ol.children[circle].classNamecurrent;} 下面实现点击左右箭头后移动图片实现轮播效果代码 // 右侧按钮var num0;// 控制小圆圈的变化var circle0;// 控制函数执行 防止点击过快var flagtrue;arrow_r.addEventListener(click,function(){if(flag){// 有函数执行关闭 函数执行完后打开flagfalse;// 走到了最后复制的图片 left改为0if(numul.children.length-1){ul.style.left0px;num0;}num;animate(ul,-num*focusWidth,function(){flagtrue;});circle;if(circleol.children.length){circle0;}// 调用函数circleChange();}})arrow_l.addEventListener(click,function(){if(flag){flagfalse;// 走到了最后复制的图片 left改为0if(num0){numul.children.length-1;ul.style.left-num*focusWidthpx;}num--;animate(ul,-num*focusWidth,function(){flagtrue;});circle--;// if(circle0){// circleol.children.length-1;// }circlecircle0 ? ol.children.length-1 :circle;// 调用函数circleChange();}}) 最后就是自动2秒实现一次轮播效果的代码了 // 自动播放定时器var timersetInterval(function(){// 每2秒自动调用点击事件arrow_r.click();},2000); lb.js全部代码展示 分块讲述完了代码现在组合起来看看吧
window.addEventListener(load,function(){var arrow_ldocument.querySelector(.arrow-l);var arrow_rdocument.querySelector(.arrow-r);var focusdocument.querySelector(.focus_f1);// 鼠标经过focus.addEventListener(mouseenter,function(){arrow_l.style.displayblock;arrow_r.style.displayblock;// 鼠标经过停止定时器clearInterval(timer);// 清除定时器变量timernull;})// 鼠标离开focus.addEventListener(mouseleave,function(){arrow_l.style.displaynone;arrow_r.style.displaynone;// 开启定时器timersetInterval(function(){// 每2秒自动调用点击事件arrow_r.click();},2000);})var ulfocus.querySelector(ul);var olfocus.querySelector(.circle);var focusWidthfocus.offsetWidth;for(var i0;iul.children.length;i){// 创建livar lidocument.createElement(li);// 记录小圆圈的索引号 自定义属性li.setAttribute(index,i);// 把创建li添加到ol里ol.appendChild(li);// 绑定点击事件li.addEventListener(click,function(){// 把所有li清除for(var i0;iol.children.length;i){ol.children[i].className;}this.classNamecurrent;// 当前li的索引号var indexthis.getAttribute(index);// 当前小圆点的位置给num控制图片下一张播放numindex;// 当前小圆点的位置给小圆点下一个移动小圆点才会正常circleindex;// 点击小圆圈移动图片animate(ul,-focusWidth*index);})}// 把第一个小li设置类名currentol.children[0].classNamecurrent;// 克隆第一张图片 放到ul最后面var firstul.children[0].cloneNode(true);ul.appendChild(first);// 右侧按钮var num0;// 控制小圆圈的变化var circle0;// 控制函数执行 防止点击过快var flagtrue;arrow_r.addEventListener(click,function(){if(flag){// 有函数执行关闭 函数执行完后打开flagfalse;// 走到了最后复制的图片 left改为0if(numul.children.length-1){ul.style.left0px;num0;}num;animate(ul,-num*focusWidth,function(){flagtrue;});circle;if(circleol.children.length){circle0;}// 调用函数circleChange();}})arrow_l.addEventListener(click,function(){if(flag){flagfalse;// 走到了最后复制的图片 left改为0if(num0){numul.children.length-1;ul.style.left-num*focusWidthpx;}num--;animate(ul,-num*focusWidth,function(){flagtrue;});circle--;// if(circle0){// circleol.children.length-1;// }circlecircle0 ? ol.children.length-1 :circle;// 调用函数circleChange();}})function circleChange(){// 重置小圆圈样式 排它思想for(var i0;iol.children.length;i){ol.children[i].className;}ol.children[circle].classNamecurrent;}// 自动播放定时器var timersetInterval(function(){// 每2秒自动调用点击事件arrow_r.click();},2000);
}) 五、效果图 总结 这里也是讲完了不知道你们能不能看的懂。我的语言描述能力比较差看不懂的下去自己思考思考何尝不是一种学习呢轮播图是BOM中做的案例里计较麻烦的一个我也就写这一遍啊下次我直接打开我的博客看我的笔记了。希望大家也能自己动手实现一遍。对知识的掌握更牢固。这篇内容写了好久看到这里的动动你们可爱的小手指点个赞呗。这也是我创作最大的动力哦
