AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Html+CSS+JS 实现轮播切换

2022-10-16 169
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Html+CSS+JS 实现轮播切换

一 创建一个Html网页文档

  1. 在IDE编辑器中，单击 图标，创建index.html文件。


  1. 在 index.html中，添加如下代码，创建HTML网页结构。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><h1>看Aion如何使用JavaScript实现轮播图展示</h1></body></html>


二 安装Http-server模块


  1. 在IDE编辑器中，单击下方的终端。


2.在终端区域，执行如下命令，安装http-server模块。

说明：Windows操作系统在终端区域中您可以使用右键粘贴命令，macOS系统在终端区域中您可以使用command+shift+v快捷键粘贴命令。

npm install http-server -g



3.在终端区域，执行如下命令，开启http-server服务。

http-server



4.在IDE编辑器中，单击下方的预览，输入对应的端口号8080，按回车（Enter）键。

返回如下页面，您可看到您创建的index.html的页面。


三 Html标签轮播布局

  1. 在index.html中，在<body>标签中，添加如下代码，编写整体的页面布局。

说明：代码中的布局分为相框展示部分，相框下册选择框，和左右两侧的切换三个部分。

<divid="box"class="all"><divclass="inner"><!-- 相框--><ul><li><ahref="#"><imgsrc="https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"width="550"height="320"alt=""></a></li><li><ahref="#"><imgsrc="https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"width="550"height="320"alt=""></a></li><li><ahref="#"><imgsrc="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80"width="550"height="320"alt=""></a></li><li><ahref="#"><imgsrc="https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"width="550"height="320"alt=""></a></li></ul><ol><!--里面存放小圆点--></ol></div><divclass="focusD"id="arr"><spanid="left">&lt</span><spanid="right">&gt</span></div></div>

 


四 使用css+js实现轮播效果

布局写完了，我们现在要为轮播图编写样式，调整所有元素的层级与定位。

  1. 在index.html中，在<head>标签中，添加如下代码，采用内部样式表来编写样式。<style>标签通常使用在<head>标签中的最后。
<style>  * {
margin: 0;
padding: 0;
  }
/*<--清除底部三像素距离-->*/img {
vertical-align: top;
  }
.all {
width: 550px;
height: 320px;
margin: 100pxauto;
padding: 5px;
border: 1pxsolid#ccc;
position: relative;
  }
.inner {
position: relative;
width: 550px;
height: 320px;
background-color: pink;
overflow: hidden;
  }
.innerul {
width: 1000%;
list-style: none;
position: absolute;
top: 0;
left: 0;
  }
.innerulli {
float: left;
  }
.focusD {
position: absolute;
left: 0;
top: 50%;
width: 550px;
padding: 010px;
height: 30px;
box-sizing: border-box;
display: none;
  }
.innerol {
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%);
  }
.innerolli {
justify-content: center;
width: 15px;
display: inline-block;
height: 15px;
margin: 03px;
cursor: pointer;
line-height: 15px;
text-align: center;
background-color: rgb(248, 247, 247);
border-radius: 50%;
  }
/*当前的高亮的小圆点*/.innerol.current {
background-color: orange;
color: #fff;
  }
.focusDspan {
display: inline-block;
width: 25px;
font-size: 24px;
height: 30px;
color: #ccc;
line-height: 30px;
text-align: center;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
  }
#left {
float: left;
  }
#right {
float: right;
  }
</style>


2、在index.html中，在<body>标签之后，添加<script>标签和js代码。<script>标签通常使用在<body>标签中的最后。

2.1添加如下<script>标签和js代码，首先我们先获取我们需要的所有元素。

 

<script>varindex=0;
//获取最外面的divvarbox=my$("box");
//获取相框varinner=box.children[0];
//获取去相框的宽度varimgWidth=inner.offsetWidth;
// 获取ulvarulObj=inner.children[0];
//获取ul中所有的livarlist=ulObj.children;
//获取olvarolObj=inner.children[1];
//获取焦点vararr=my$("arr");
</script>


1.2在<script>标签中添加如下js代码，我们需要给它创建小按钮即小圆点并注册鼠标进入事件，再此之前 我们要明白，小圆点 1 2 3 并不是写死的，它是根据ul li中的图片张数来决定的 ，所以 我们要先在js中给div中的ol中的添加li(即小圆点)，并且给ul中的图片几li添加索引值以便下一步的操作。

 

for (var i = 0; i <list.length;i++){varliObjs = document.createElement("li");olObj.appendChild(liObjs);liObjs.innerHTML = (i+1);//在ol中每个li中增加自定义属性，添加索引值liObjs.setAttribute("index",i);//注册鼠标进入事件liObjs.onmouseover = function(){//先干掉所有背景颜色for(varj = 0;j< olObj.children.length; j++) {                olObj.children[j].removeAttribute("class");
            }
            //设置当前鼠标进来的类样式
            this.className = "current";
            //获取ol中li的索引值
             index = this.getAttribute("index");
            //移动ul
            animate(ulObj, -index * imgWidth);  //移动动画函数
        };
    }
    //设置第一个ol中li的背景颜色
    olObj.children[0].className = "current";

   



2.3 在<script>标签中添加如下js代码，实现无缝滚动 就需要多一张图片才行 ，即克隆第一张图片，放到最后面。

//克隆ol中第一个li放到最后一个

ulObj.appendChild(ulObj.children[0].cloneNode(true));


2.4在<script>标签中添加如下js代码，实现点击左右的按钮实现轮播。

 

var timeId=setInterval(clickHandle,3000);
    my$("box").onmouseover=function(){
      arr.style.display="block";
      clearInterval(timeId);
    };
        //点击右边按钮
        my$("right").onclick=clickHandle;
        function clickHandle() {
            if (index==ulObj.children.length-1){
                ulObj.style.left=0+"px";
                index=0;
            }
            index++;
            animate(ulObj,-index*imgWidth);
            if (index==list.length-1){
                olObj.children[0].className="current";
                olObj.children[olObj.children.length-1].className="";
            }else {
                for (var i=0;i<olObj.children.length;i++){olObj.children[i].className="";}olObj.children[index].className="current";}};//点击左边按钮my$("left").onclick=function(){if(index==0){index=list.length-1;ulObj.style.left=-index*imgWidth+"px";}index--;animate(ulObj,-index*imgWidth);for(vari=0;i<olObj.children.length;i++){                olObj.children[i].className="";
            }
            olObj.children[index].className="current";
        };


2.5 在<script>标签中添加如下js代码，实现自动轮播，即可以创建一个定时器，每隔一段时间就调用左右按钮的点击事件，相当于点按钮，但是要注意的是当鼠标放进相框的时候要清除定时器，不然在你点击的时候它还是会自动轮播。

 

my$("box").onmouseout=function(){
        arr.style.display="none";
        timeId=setInterval(clickHandle,3000);
    };
    // 设置一个元素，移动到指定位置
    function animate(element, target) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            var current = element.offsetLeft;
            var step = 9;
            step = current > target ? -step : step;
            current += step;
            if (Math.abs(target - current) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                clearInterval(element.timeId);
                element.style.left = target + "px";
            }
        }, 10);
    }  function my$(id) {      return document.getElementById(id);    }



2.6 以下代码为上面五个子步骤的完整js代码。

<script>varindex=0;
//获取最外面的divvarbox=my$("box");
//获取相框varinner=box.children[0];
//获取去相框的宽度varimgWidth=inner.offsetWidth;
// 获取ulvarulObj=inner.children[0];
//获取ul中所有的livarlist=ulObj.children;
//获取olvarolObj=inner.children[1];
//获取焦点vararr=my$("arr");
//创建小按钮-----根据ul中li的个数for (vari=0; i<list.length; i++) {
varliObjs=document.createElement("li");
olObj.appendChild(liObjs);
liObjs.innerHTML= (i+1);
//在ol中每个li中增加自定义属性，添加索引值liObjs.setAttribute("index", i);
//注册鼠标进入事件liObjs.onmouseover=function () {
//先干掉所有背景颜色for (varj=0; j<olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
            }
//设置当前鼠标进来的类样式this.className="current";
//获取ol中li的索引值index=this.getAttribute("index");
//移动ulanimate(ulObj, -index*imgWidth);  //移动动画函数        };
    }
//设置第一个ol中li的背景颜色olObj.children[0].className="current";
//克隆ol中第一个li放到最后一个ulObj.appendChild(ulObj.children[0].cloneNode(true));
vartimeId=setInterval(clickHandle,3000);
my$("box").onmouseover=function(){
arr.style.display="block";
clearInterval(timeId);
    };
//点击右边按钮my$("right").onclick=clickHandle;
functionclickHandle() {
if (index==ulObj.children.length-1){
ulObj.style.left=0+"px";
index=0;
            }
index++;
animate(ulObj,-index*imgWidth);
if (index==list.length-1){
olObj.children[0].className="current";
olObj.children[olObj.children.length-1].className="";
            }else {
for (vari=0;i<olObj.children.length;i++){
olObj.children[i].className="";
                }
olObj.children[index].className="current";
            }
        };
//点击左边按钮my$("left").onclick=function () {
if (index==0){
index=list.length-1;
ulObj.style.left=-index*imgWidth+"px";
            }
index--;
animate(ulObj,-index*imgWidth);
for (vari=0;i<olObj.children.length;i++){
olObj.children[i].className="";
            }
olObj.children[index].className="current";
        };
my$("box").onmouseout=function(){
arr.style.display="none";
timeId=setInterval(clickHandle,3000);
    };
// 设置一个元素，移动到指定位置functionanimate(element, target) {
clearInterval(element.timeId);
element.timeId=setInterval(function () {
varcurrent=element.offsetLeft;
varstep=9;
step=current>target?-step : step;
current+=step;
if (Math.abs(target-current) >Math.abs(step)) {
element.style.left=current+"px";
            } else {
clearInterval(element.timeId);
element.style.left=target+"px";
            }
        }, 10);
    }  functionmy$(id) {      returndocument.getElementById(id);    }
</script>


五 完整的代码

最后完整的html代码：

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>      * {
margin: 0;
padding: 0;
      }
/*<--清除底部三像素距离-->*/img {
vertical-align: top;
      }
.all {
width: 550px;
height: 320px;
margin: 100pxauto;
padding: 5px;
border: 1pxsolid#ccc;
position: relative;
      }
.inner {
position: relative;
width: 550px;
height: 320px;
background-color: pink;
overflow: hidden;
      }
.innerul {
width: 1000%;
list-style: none;
position: absolute;
top: 0;
left: 0;
      }
.innerulli {
float: left;
      }
.focusD {
position: absolute;
left: 0;
top: 50%;
width: 550px;
padding: 010px;
height: 30px;
box-sizing: border-box;
display: none;
      }
.innerol {
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%);
      }
.innerolli {
justify-content: center;
width: 15px;
display: inline-block;
height: 15px;
margin: 03px;
cursor: pointer;
line-height: 15px;
text-align: center;
background-color: rgb(248, 247, 247);
border-radius: 50%;
      }
/*当前的高亮的小圆点*/.innerol.current {
background-color: orange;
color: #fff;
      }
.focusDspan {
display: inline-block;
width: 25px;
font-size: 24px;
height: 30px;
color: #ccc;
line-height: 30px;
text-align: center;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
      }
#left {
float: left;
      }
#right {
float: right;
      }
</style></head><body><h1>云起实验室</h1><divid="box"class="all"><divclass="inner"><!-- 相框--><ul><li><ahref="#"><imgsrc="https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"width="550"height="320"alt=""></a></li><li><ahref="#"><imgsrc="https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"width="550"height="320"alt=""></a></li><li><ahref="#"><imgsrc="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80"width="550"height="320"alt=""></a></li><li><ahref="#"><imgsrc="https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"width="550"height="320"alt=""></a></li></ul><ol><!--里面存放小圆点--></ol></div><divclass="focusD"id="arr"><spanid="left">&lt</span><spanid="right">&gt</span></div></div></body><script>varindex=0;
//获取最外面的divvarbox=my$("box");
//获取相框varinner=box.children[0];
//获取去相框的宽度varimgWidth=inner.offsetWidth;
// 获取ulvarulObj=inner.children[0];
//获取ul中所有的livarlist=ulObj.children;
//获取olvarolObj=inner.children[1];
//获取焦点vararr=my$("arr");
for (vari=0; i<list.length; i++) {
varliObjs=document.createElement("li");
olObj.appendChild(liObjs);
liObjs.innerHTML= (i+1);
//在ol中每个li中增加自定义属性，添加索引值liObjs.setAttribute("index", i);
//注册鼠标进入事件liObjs.onmouseover=function () {
//先干掉所有背景颜色for (varj=0; j<olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
  }
//设置当前鼠标进来的类样式this.className="current";
//获取ol中li的索引值index=this.getAttribute("index");
//移动ulanimate(ulObj, -index*imgWidth);  //移动动画函数  };
  }
//设置第一个ol中li的背景颜色olObj.children[0].className="current";
//克隆ol中第一个li放到最后一个ulObj.appendChild(ulObj.children[0].cloneNode(true));
vartimeId=setInterval(clickHandle,3000);
my$("box").onmouseover=function(){
arr.style.display="block";
clearInterval(timeId);
  };
//点击右边按钮my$("right").onclick=clickHandle;
functionclickHandle() {
if (index==ulObj.children.length-1){
ulObj.style.left=0+"px";
index=0;
  }
index++;
animate(ulObj,-index*imgWidth);
if (index==list.length-1){
olObj.children[0].className="current";
olObj.children[olObj.children.length-1].className="";
  }else {
for (vari=0;i<olObj.children.length;i++){
olObj.children[i].className="";
  }
olObj.children[index].className="current";
  }
  };
//点击左边按钮my$("left").onclick=function () {
if (index==0){
index=list.length-1;
ulObj.style.left=-index*imgWidth+"px";
  }
index--;
animate(ulObj,-index*imgWidth);
for (vari=0;i<olObj.children.length;i++){
olObj.children[i].className="";
  }
olObj.children[index].className="current";
  };
my$("box").onmouseout=function(){
arr.style.display="none";
timeId=setInterval(clickHandle,3000);
  };
// 设置一个元素，移动到指定位置functionanimate(element, target) {
clearInterval(element.timeId);
element.timeId=setInterval(function () {
varcurrent=element.offsetLeft;
varstep=9;
step=current>target?-step : step;
current+=step;
if (Math.abs(target-current) >Math.abs(step)) {
element.style.left=current+"px";
  } else {
clearInterval(element.timeId);
element.style.left=target+"px";
  }
  }, 10);
  }  functionmy$(id) {      returndocument.getElementById(id);    }
</script></html>
文章标签：
JavaScript
iOS开发
开发工具
索引
Windows
MacOS
IDE
关键词：
HTML CSS
HTML css js
HTML CSS JavaScript
CSS js
HTML js
六月暴雪飞梨花
目录
相关文章
光明顶阳顶天
|
12天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染，了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略，可以提高网页的性能和用户体验，确保页面能够快速、流畅地呈现给用户。在实际开发中，要根据具体情况进行权衡和调整，以达到最佳的效果。
光明顶阳顶天
22 1
疯狂的猿
|
6天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
42 6
代码bug生产队
|
20天前
|
XML 前端开发 JavaScript
前端开发进阶：从HTML到React.js
【10月更文挑战第9天】前端开发进阶：从HTML到React.js
代码bug生产队
32 1
Li370234940
|
27天前
|
JavaScript
js文字如何轮播？
js文字如何轮播？
Li370234940
13 1
Li370234940
|
27天前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
Li370234940
69 1
游客qeoynko2nmbgk
|
2月前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
游客qeoynko2nmbgk
66 2
神明木佑
|
21天前
|
JavaScript 前端开发
JavaScript 与 HTML 的结合
JavaScript 与 HTML 的结合
神明木佑
14 0
武子康
|
27天前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
武子康
22 0
bruce_xiaowei
|
28天前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
bruce_xiaowei
31 0
游客qeoynko2nmbgk
|
2月前
|
C++ Windows
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
游客qeoynko2nmbgk
17 0

热门文章

最新文章

  • 1
    JavaScript基本数据类型分析
  • 2
    JavaScript 实时监听input中值变化
  • 3
    javascript模拟实现继承，继承一次父类模板和原型对象
  • 4
    Rhino 是一个完全使用Java语言编写的开源JavaScript实现。Rhino通常用于在Java程序中，为最终用户提供脚本化能力。它被作为J2SE 6上的默认Java脚本化引擎。
  • 5
    Javascript之旅——第四站：parseInt中要注意的坑
  • 6
    JS语法作用域与词法作用域
  • 7
    纯JS控制textarea的maxLength
  • 8
    在JavaScript面向对象编程中使用继承(3)
  • 9
    web worker 是运行在后台的 JavaScript，不会影响页面的性能。
  • 10
    Javascript设计模式之匿名函数与闭包
  • 1
    React中渲染html结构---dangerouslySetInnerHTML
    50
  • 2
    WWW（URL，HTTP，HTML）
    120
  • 3
    生日快乐祝福HTML源码
    86
  • 4
    html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
    124
  • 5
    HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发
    63
  • 6
    好看的html网站维护源码
    198
  • 7
    html+echars图表加日期检索
    49
  • 8
    html+echars的统计报表
    55
  • 9
    【CSDN创作优化1】个人简介优化 html font属性
    53
  • 10
    一种pug与html相互转换的工具
    79

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • HTML及前端框架
  • CSS基础教程
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月