html之制作banner按钮

制作banner左右切换按钮

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>banner</title><style>/* 设置初始 padding和margin*/* {margin: 0;padding: 0;}/* banner区域 */.banner {width: 100%;/* 溢出隐藏 */overflow: hidden;/* translateX中的百分数表示相对于它本身宽度的多少倍 *//* transform: translateX(-20%); */position: relative;}/* ul */.list {list-style: none;width: 500%;transition: transform .5s ease 0s;}.list li {float: left;width: 20%;}.list li img {width: 100%;/* height: 750px; */vertical-align: middle;}/* 按钮 */a {color: black;display: inline-block;text-decoration: none;width: 60px;height: 60px;line-height: 60px;top: 50%;margin-top: -30px;text-align: center;background-color: white;position: absolute;opacity: 0.4;border-radius: 30px;}.banner>.left_btn {left: 0px;}.banner>.right_btn {right: 0px;}/* 小圆点 */.banner .circles {width: 130px;height: 20px;position: absolute;bottom: 10px;left: 50%;margin-left: -65px;list-style: none;}.banner .circles li {float: left;width: 20px;height: 20px;background-color: rgb(0, 140, 255);margin-right: 10px;border-radius: 10px;transition: all .5s ease 0s;cursor: pointer;}.banner .circles .current {width: 40px;background-color: rgb(0, 113, 219);}.banner>.circles li:last-child {margin-right: 0px;}</style>
</head><body><div id="root" class="banner"><ul id="list" class="list"><!-- 轮播的banner --><li><img src="jz1.jpg" alt=""></li><li><img src="jz2.jpg" alt=""></li><li><img src="jz3.jpg" alt=""></li></ul><ol class="circles" id="circles_ol"><!-- 小圆点--><li data-n="0" class="current"></li><li data-n="1"></li><li data-n="2"></li></ol><a href="javascript:;" class="left_btn" id="left_btn">&lt;</a><a href="javascript:;" class="right_btn" id="right_btn">&gt;</a></div></body>
<script>const root = document.getElementById('root');const left_btn = document.getElementById('left_btn');const right_btn = document.getElementById('right_btn');const list = document.getElementById('list');const circles_ol = document.getElementById('circles_ol');const circles_li = circles_ol.getElementsByTagName('li');// 克隆第一个liconst clone_list = list.firstElementChild.cloneNode(true);list.appendChild(clone_list);var idx = 0;//设置函数节流var lock = true;// 右按钮right_btn.onclick = right_btn_handler;//有按钮的事件处理函数function right_btn_handler() {//点击右按钮判断节流锁状态if (!lock) return;// 关锁lock = false;// 加上过渡list.style.transition = 'transform .5s ease 0s';idx++;list.style.transform = 'translateX(' + -20 * idx + '%)';//判断当前图片是否时最后一张，是则就瞬间变为第一张if (idx > 2) {setTimeout(() => {//去掉过度list.style.transition = 'none'// 删除transform属性list.style.transform = 'none'idx = 0;}, 500);}//设置小圆点rds();//开锁setTimeout(() => {lock = true;}, 500);};// 左按钮left_btn.onclick = function() {//点击左按钮判断节流锁状态if (!lock) return;// 关锁lock = false;if (idx == 0) {//去掉过度list.style.transition = 'none'//当此时为第一张图时，瞬间变为最后一张图list.style.transform = 'translateX(' + -20 * 4 + '%)';idx = 3;// 让瞬间移动过后，再把过渡加上setTimeout(() => {// 加上过渡list.style.transition = 'transform .5s ease 0s';//动画list.style.transform = 'translateX(' + -20 * 3 + '%)';}, 0);} else {idx--;list.style.transform = 'translateX(' + -20 * idx + '%)';}//设置小圆点rds();//开锁setTimeout(() => {lock = true;}, 500);};//遍历小圆点，当li上的data-n属性的序号等于idx时，给这个li加上类名currentconst rds = () => {// 遍历ol里面的li，序号为idx的小圆点才会有类名for (var i = 0; i < 3; i++) {if (i == idx % 3) {circles_li[i].className = 'current';} else {circles_li[i].className = '';}}};// 监听小圆点，事件委托circles_ol.onclick = function(e) {// 得到li身上的data-n编号var n = Number(e.target.getAttribute('data-n'));//改变idx的值idx = n;// 点击小圆点进行拉动list.style.transform = 'translateX(' + -20 * idx + '%)';//点击小圆点调用函数rds();}//设置定时器，自动轮播bannervar timer = setInterval(() => {right_btn_handler();}, 2000);//鼠标进入轮播图，停止自动轮播root.onmouseenter = function() {// 清除定时器clearInterval(timer);};//鼠标离开轮播图，停止自动轮播root.onmouseleave = function() {// 设表先关clearInterval(timer);// 设置定时器，这里不需要加vartimer = setInterval(() => {right_btn_handler();}, 1500);}//给按钮添加事件//鼠标进入时，按钮透明度为0.8left_btn.onmouseenter = function() {left_btn.style.opacity = '0.8';};right_btn.onmouseenter = function() {right_btn.style.opacity = '0.8';};//鼠标离开时，按钮透明度变回0.2left_btn.onmouseleave = function() {left_btn.style.opacity = '0.2';};right_btn.onmouseleave = function() {right_btn.style.opacity = '0.2';}
</script></html>

html之制作banner按钮相关推荐

实践任务：项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
任务一: 任务1:建立站点并完成页面整体布局任务2:制作网页头部和导航任务3:制作banner和最新更新栏目任务4:制作苹果之家栏目任务5:制作Apple独家栏目任务6:制作底部版权区域与C ...
【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )
文章目录一.Banner 栏版心盒子测量 1.测量版心元素尺寸 2.课程表测量二.Banner 版心盒子模型左侧导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果一.Bann ...
如何制作提交按钮，实现多条件筛选
平时利用Tableau自带的筛选器进行筛选时,每一次操作筛选器,视图都会进行一次查询,如果有大量数据或复杂的计算,其性能会大幅降低.Ken Flerlage大神给我们提供了一个利用参数动作,制作提交按 ...
mongo 多条件筛选_如何制作提交按钮，实现多条件筛选
平时利用Tableau自带的筛选器进行筛选时,每一次操作筛选器,视图都会进行一次查询,如果有大量数据或复杂的计算,其性能会大幅降低.Ken Flerlage大神给我们提供了一个利用参数动作,制作提交按 ...
利用.NET绘图技术制作水晶按钮控件(转)
UI(User Interface)编程在整个项目开发过程中是个颇为重要的环节,任何好的解决方案若没有良好的用户界面呈现给最终用户,那么就算包含了最先进的技术也不能算是好程序.UI编程体现在两个方面 ...
利用Bootstrap制作汉堡按钮（header部分）
页面展示:本次网页header部分的页面效果. 技术要求:Bootstrap布局容器.Bootstrap导航栏制作汉堡按钮的固定写法: 同时需要安装Bootstrap下载安装,下载地址:https: ...
在线制作banner的网站
在线制作banner的网站纯字体 http://patorjk.com/software/taag/ https://www.bootschool.net/ascii http://www.netw ...
java怎么实现按键音_实例：使用Javascript制作声音按钮
文章简介: 一般而言,网页中按钮是没有声音触发事件的.如果要让按钮响应鼠标动作发出声音,我们可以写一段JavaScript脚本代码来实现. 能让按钮发出声音的脚本,这下不用制作Flash按钮也可以了, ...
使用Javascript制作声音按钮
使用Javascript制作声音按钮文章简介: 一般而言,网页中按钮是没有声音触发事件的.如果要让按钮响应鼠标动作发出声音,我们可以写一段JavaScript脚本代码来实现. 能让按钮发出声音的脚 ...

html之制作banner按钮

html之制作banner按钮相关推荐

最新文章

热门文章