网页轮播图：

轮播图也称为焦点图，是网页中比较常见的网页特效。

功能需求：

1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。

2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。

3.图片播放的同时，下面小圆圈模块跟随一起变化。

4.点击小圆圈，可以播放相应图片。

5.鼠标不经过轮播图，轮播图也会自动播放图片。

6.鼠标经过，轮播图模块，自动播放停止。

动图展示：

代码分析：

主题结构部分：

<div class="focus"><!-- 左侧按钮 --><a href="javascript:;" class="arrow-l">《</a><!-- 右侧按钮 --><a href="javascript:;" class="arrow-r">》</a><!-- 滚动区域 --><ul><li><a href=""><img src="data:images/1.jpg" alt=""></a></li><li><a href=""><img src="data:images/2.jpg" alt=""></a></li><li><a href=""><img src="data:images/3.jpg" alt=""></a></li><li><a href=""><img src="data:images/4.jpg" alt=""></a></li></ul><!-- 小圆圈 --><ol class="circle"></ol></div>

样式设置：

<style>* {margin: 0;padding: 0;}li {list-style: none;}.focus {position: relative;width: 520px;height: 280px;background-color: pink;margin: 100px auto;overflow: hidden;}.focus ul {position: absolute;top: 0px;left: 0px;width: 3000px;}.focus ul li {float: left;}.focus img {width: 520px;height: 280px;}.arrow-l,.arrow-r {position: absolute;top: 50%;margin-top: -15px;width: 20px;height: 30px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 30px;color: #fff;text-decoration: none;display: none;z-index: 999;}.arrow-l {left: 0;border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.arrow-r {right: 0;border-top-left-radius: 15px;border-bottom-left-radius: 15px;}.circle {position: absolute;bottom: 15px;left: 50%;margin-left: -90px;width: 180px;height: 13px;}.circle li {background: #FFF;width: 15px;height: 15px;border-radius: 50%;display: inline-block;overflow: hidden;margin-left: 5px;cursor: pointer;}.circle .current {background-color: brown;}</style>

交互效果：

 <script>window.addEventListener('load', function() {// 1. 获取元素var arrow_l = document.querySelector('.arrow-l');var arrow_r = document.querySelector('.arrow-r');var focus = document.querySelector('.focus');var focusWidth = focus.offsetWidth;// 2. 鼠标经过focus 就显示隐藏左右按钮focus.addEventListener('mouseenter', function() {arrow_l.style.display = 'block';arrow_r.style.display = 'block';timer = null; // 清除定时器变量});focus.addEventListener('mouseleave', function() {arrow_l.style.display = 'none';arrow_r.style.display = 'none';timer = setInterval(function() {//手动调用点击事件arrow_r.click();}, 2000);});// 3. 动态生成小圆圈  有几张图片，我就生成几个小圆圈var ul = focus.querySelector('ul');var ol = focus.querySelector('.circle');console.log(ul.children.length);for (var i = 0; i < ul.children.length; i++) {// 创建一个小li var li = document.createElement('li');// 记录当前小圆圈的索引号 通过自定义属性来做 li.setAttribute('index', i);// 把小li插入到ol 里面ol.appendChild(li);// 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件li.addEventListener('click', function() {// 干掉所有人 把所有的小li 清除 current 类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}// 留下我自己  当前的小li 设置current 类名this.className = 'current';// 5. 点击小圆圈，移动图片 当然移动的是 ul // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值// 当我们点击了某个小li 就拿到当前小li 的索引号var index = this.getAttribute('index');// 当我们点击了某个小li 就要把这个li 的索引号给 num  num = index;// 当我们点击了某个小li 就要把这个li 的索引号给 circle  circle = index;// num = circle = index;console.log(focusWidth);console.log(index);animate(ul, -index * focusWidth);})}// 把ol里面的第一个小li设置类名为 currentol.children[0].className = 'current';// 6. 克隆第一张图片(li)放到ul 最后面var first = ul.children[0].cloneNode(true);ul.appendChild(first);// 7. 点击右侧按钮， 图片滚动一张var num = 0;// circle 控制小圆圈的播放var circle = 0;// flag 节流阀   防止轮播图按钮连续点击造成播放过快。// 节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。// 核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。//  开始设置一个变量var flag= true;// If(flag){flag = false; do something}       关闭水龙头// 利用回调函数动画执行完毕， flag = true     打开水龙头var flag = true;arrow_r.addEventListener('click', function() {if (flag) {flag = false; // 关闭节流阀// 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * focusWidth, function() {flag = true; // 打开节流阀});// 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放circle++;// 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原if (circle == ol.children.length) {circle = 0;}// 调用函数circleChange();}});// 9. 左侧按钮做法arrow_l.addEventListener('click', function() {if (flag) {flag = false;if (num == 0) {num = ul.children.length - 1;ul.style.left = -num * focusWidth + 'px';}num--;animate(ul, -num * focusWidth, function() {flag = true;});// 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放circle--;// 如果circle < 0  说明第一张图片，则小圆圈要改为第4个小圆圈（3）circle = circle < 0 ? ol.children.length - 1 : circle;// 调用函数circleChange();}});function circleChange() {// 先清除其余小圆圈的current类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}// 留下当前的小圆圈的current类名ol.children[circle].className = 'current';}// 10. 自动播放轮播图var timer = setInterval(function() {//手动调用点击事件arrow_r.click();}, 2000);})</script>

引用缓动动画（图片滚动的效果）

具体代码如下：

function animate(obj, target, callback) {// console.log(callback);  callback = function() {}  调用的时候 callback()// 先清除以前的定时器，只保留当前的一个定时器执行clearInterval(obj.timer);obj.timer = setInterval(function() {// 步长值写到定时器的里面// 把我们步长值改为整数 不要出现小数的问题// var step = Math.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();// }callback && callback();}// 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10obj.style.left = obj.offsetLeft + step + 'px';}, 15);
}

用javascript做网页轮播图相关推荐

【JavaScript】网页轮播图
目录 HTML搭建功能实现小圆圈事件左右按钮事件自动播放轮播图也叫焦点图,是网页中比较常见的网页特效. 功能: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往 ...
JavaScript实现网页轮播图
轮播图也成为焦点图,是网页中比较常见的网页特效一.功能: 1.鼠标经过轮播图模块,左右两边的按钮显示,鼠标离开轮播图模块,就隐藏左右按钮. 2.点击右(左)侧按钮一次,图片往左(右)播放一张,一以此 ...
用HTML5和JavaScript做一个轮播图
说明: (1)代码中四个div内的图片 " images/14.jpg " , " images/15.jpg " , " images/16.jpg ...
【JavaScript】缓动动画、网页轮播图
缓动动画动画函数封装 1.1 动画实现原理缓动动画 1.1 缓动效果原理 1.2 动画函数多个目标值之间移动 1.3 动画函数添加回调函数 1.4 动画函数封装到单独JS文件里面案例:京东侧边栏 ...
web前端html图片轮播,如何使用LayUI实现网页轮播图_WEB前端开发,layui,轮播图
关于html5中自定义属性的介绍_WEB前端开发 html5为我们提供了以[data-]为前缀定义需要的属性即可设置自定义属性,如[ ].本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参 ...
Javascript-API-BOM、动画函数、网页轮播图、节流阀、筋斗云、固定侧边栏返回顶部案例
动画实现原理核心原理:通过定时器 setInterval() 不断移动盒子位置. 实现步骤: 获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件 ...
网页轮播图+缓动效果
实现某宝上面的网页轮播图+缓动效果代码和注释: <!DOCTYPE html> <html lang="en"><head><meta ...
layui的轮播图片自适应大小_如何使用LayUI实现网页轮播图
详细内容本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参考价值,希望对学习Layui的朋友有帮助!想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保 ...
使用js做简易轮播图，可自动
[作者注]:第一次使用js做简易轮播图首先在body里div个容器 div class="box"> <p id="p" ></p&g ...

用javascript做网页轮播图

文章目录

网页轮播图：

功能需求：

动图展示：

代码分析：

主题结构部分：

样式设置：

交互效果：

引用缓动动画（图片滚动的效果）

用javascript做网页轮播图相关推荐

最新文章

热门文章