web网页常见特效3—

HTML结构分析

首先要有一个大的fouce盒子，里面存放图片，小圆点，左右按钮
在focus中里面有一个ul，在这个ul中有li，装着一个个图片
在focus中有一个ol，在li中是一个个底部小圆点
在focus中有两个按钮，btnlet,btnright

<!-- 轮播图的大盒子 --><div class="focus"><!-- 装图片的盒子 --><ul><li><a href="#"><img src="upload/focus.jpg" alt=""></a></li><li><a href="#"><img src="upload/focus1.jpg" alt=""></a></li><li><a href="#"><img src="upload/focus2.jpg" alt=""></a></li><li><a href="#"><img src="upload/focus3.jpg" alt=""></a></li></ul><!-- 轮播图底部的小圆点 --><ol></ol><!-- 左右按钮 --><div class="btnleft"></div><div class="btnright"></div></div>

CSS代码展示

 <style>* {margin: 0;padding: 0;list-style: none;}.focus {position: relative;width: 721px;height: 455px;margin: auto;overflow: hidden;}.focus ul {position: absolute;left: 0;width: 500%;height: 100%;border: 1px solid #ccc;}.focus ul li {float: left;width: 721px;}.focus ol {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);width: 100px;height: 8px;}.focus ol li {float: left;margin: 5px;width: 8px;height: 8px;border: 1px solid #fff;border-radius: 50%;}/* 底部小圆点高亮 */.active {background-color: #fff;}.focus .btnleft {position: absolute;left: 0;width: 20px;height: 50px;top: 50%;background-color: #fff;}.focus .btnright {position: absolute;right: 0;width: 20px;height: 50px;top: 50%;background-color: #fff;}</style>

JavaScript代码分析

轮播大的模块无非就四点：

鼠标移入移除事件，元素显示或者隐藏
对底部小圆点的点击事件，点那个小圆点，让当前小圆点高亮，并且让对应的图片展示
对左右按钮点击事件，通过点击让图片所在的元素移动一定的距离，实现切换下一张
自动轮播，其实就是使用代码模拟手点击右侧按钮的事件

 <script>// 1.获取元素var focus = document.querySelector('.focus');var ul = document.querySelector('ul');var ol = document.querySelector('ol');var btnleft = document.querySelector('.btnleft');var btnright = document.querySelector('.btnright');var focusWidth = focus.offsetWidth;//2.鼠标移入事件，让左右按钮显示还是隐藏focus.onmouseover = function () {btnleft.style.display = 'block';btnright.style.display = 'block';//7.1,鼠标移入停止自动轮播clearInterval(timer)}focus.onmouseout = function () {btnleft.style.display = 'none';btnright.style.display = 'none';//7.2鼠标移开，继续开始轮播timer = setInterval(() => {btnright.click()}, 2000)}//3.动态生成底部lifor (var i = 0; i < ul.children.length; i++) {var li = document.createElement('li');//3.1顺便给每个li绑定点击事件，点谁谁高亮（排他思想）li.setAttribute('data-index', i)li.onclick = function () {for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = ''}this.className = 'active'//3.3点击第几个小圆点就切换到第几张图片(比如现在点击第二个小圆点，图片展示第二张，也就是ol向左边移动focus*2的距离)//移动的距离 = focus宽度*点击小圆点的索引var index = this.getAttribute('data-index');// 9.如果点击小圆点，会滚动到相应 的位置，但再次点击右侧按钮或者左侧，就会出现num从0+1，而不是从小圆点的索引开始下一张num = indexvar move = -focusWidth * indexconsole.log(move);animate(ul, move)}ol.appendChild(li);}//3.2默认让第一个小圆点展示高亮ol.children[0].className = 'active';//5.为了实现无缝滚动，就在最后一张添加第一张图片var cloneLi = ul.children[0].cloneNode(true);ul.appendChild(cloneLi)//8.左右按钮疯狂点击，轮播的速度就很快，可以使用节流阀，当点击第一张后，只有动画结束才能点击第二张，否则点击时无效的var flag = true;//4.实现点击右侧按钮的点击事件var num = 0btnright.onclick = function () {if (flag) {flag = false;//4.1点击一次就走focus宽度，点击两次就走focus*点击次数的距离,同时让点击次数+1;// 4.2到最后一张图片的时候就需要切换的第一张图片,并且不需要滚动，直接让left值变为0if (num == ul.children.length - 1) {num = 0;ul.style.left = 0}num++//4.3图片变化，底部的小圆点也应该变化，当点击一次，小圆点+1，当小圆点到最后一个的时候，应该让小圆点从0开始for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = ''}if (num == ol.children.length) {ol.children[0].className = 'active'} else {ol.children[num].className = 'active'}var move = -focusWidth * numanimate(ul, move, function () {//轮播动画走完了flag = true})}}//6.左侧按钮实现和右侧一样，只不过判断边界条件不同btnleft.onclick = function () {if (flag) {flag = false;//4.1点击一次就走focus宽度，点击两次就走focus*点击次数的距离,同时让点击次数+1;// 4.2如果是第一张图片，就让图片变为最后一张图片if (num == 0) {num = ul.children.length - 1;ul.style.left = -num * focusWidth + 'px'}num--//4.3图片变化，底部的小圆点也应该变化，当点击一次，小圆点+1，当小圆点到最后一个的时候，应该让小圆点从0开始for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = ''}if (num == ol.children.length) {ol.children[0].className = 'active'} else {ol.children[num].className = 'active'}var move = -focusWidth * numanimate(ul, move, function () {flag = true})}}//7.实现自动轮播var timer = setInterval(() => {btnright.click()}, 2000)//0：实现一个动画函数function animate(obj, target, callback) {clearInterval(obj.timer);obj.timer = setInterval(function () {var temp = (target - obj.offsetLeft) / 10;temp = temp > 0 ? Math.ceil(temp) : Math.floor(temp);if (obj.offsetLeft == target) {clearInterval(obj.timer);callback && callback()}obj.style.left = obj.offsetLeft + temp + 'px'}, 30)}</script>

效果图片展示

web网页常见特效3——轮播图相关推荐

WebAPI第五天学习总结—— 移动端常见特效（轮播图）
移动端常见特效案例: 移动轮播图需求:移动端轮播图功能和基本PC端一致可以自动播放图片手指可以拖动播放轮播图案例分析: 自动播放功能开启定时器移动端移动,可以使用translate 移动 ...
Web APIs：PC 端网页特效--常见网页特效案例--轮播图及节流阀思想
轮播图也称为焦点图,是网页中比较常见的网页特效. 功能需求: 1. 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2. 点击右侧按钮一次,图片往左播放一张,以此类推, 左侧按钮同理. 3. 图 ...
大学生动漫网页设计模板机动战士高达静态网页制作成品下载 HTML漫画网页作业带JS轮播图
机动战士高达静态网页制作应用知识点作品介绍首页部分代码页面最终效果网页源地址应用知识点 DIV CSS布局.网页背景图.JS图片轮播.在线视频作品介绍机动战士高达动漫网页使用DIV C ...
web网页常见特效1（原生JavaScript）
全选和不全选 // An highlighted block<script>// 1.获取元素 j_cbAll(全选按钮)// 全选按钮var j_cbAll = document.get ...
jQuery实现常见的轮播图效果
1.在网页中常见的一类轮播图如下图所示, 此处以小米官网(www.mi.com)为例进行说明说明:红色箭头标注的是左.右箭头:右下角蓝色箭头标注的是可以控制图片播放顺序的小圆点: 2.轮播图的特点 ...
电商项目实战第四节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【轮播图特效】
上一节:电商项目实战第三节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[分类导航栏] 文章目录 [考拉海购网站]之[轮播图特效] 第一步,根据页面布局写相应的html标签 index.h ...
php实现轮播图代码,微信小程序实例：轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
Vuetify Carouse轮播图图片切换导致页面总是自动跳转到轮播图位置
文章目录 begin !!! Solution1 Solution2 end begin vuetify carouse轮播图的图片自动切换的时候, 会自动聚焦跳转到轮播图自身的位置. 这导致了一个 ...
微信小程序五（创建轮播图）
应用中最常见的就是轮播图了,今儿个就讲讲微信小程序中轮播图的使用轮播图,不外乎俩个要素,跳转链接和图片地址 1. 设置数据我在 pages/test/test.js中添加如下数据 //test ...
使用原生JS和使用插件实现轮播图
网页上的大致轮播图的滚动就是上面的演示轮播图的制作在制作轮播图的过程中我分成3步:框架的搭建--样式的装扮--动画效果. 1.框架的搭建如下代码展示,就是先在HTML里搭建出一个框架来: < ...

web网页常见特效3——轮播图

HTML结构分析

CSS代码展示

JavaScript代码分析

web网页常见特效3——轮播图相关推荐

最新文章

热门文章