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

Html+CSS+JS 实现轮播切换

2022-10-16 170
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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 js
HTML CSS JavaScript
CSS js
HTML js
HTML CSS
六月暴雪飞梨花
目录
相关文章
二二*一一
|
12天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
36 1
进步`于辰
|
15天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
38 1
[HTML、CSS]细节与使用经验
进步`于辰
|
16天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
29 1
[HTML、CSS]知识点
游客g5tp3lgf24cqc
|
11天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
游客g5tp3lgf24cqc
43 12
温轻舟
|
7天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
48 1
蓝易云
|
12天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
25 3
疯狂的猿
|
15天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果，可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素，向下拖拽可实现删除效果，简单实用，欢迎下载
疯狂的猿
28 4
疯狂的猿
|
14天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码，在公路上开车网页小游戏源代码。
疯狂的猿
40 0
html5+three.js公路开车小游戏源码
游客44yag4ft7nckq
|
22天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式，通过&lt;head&gt;部分的&lt;style&gt;标签定义；外部样式表适用于多个页面，通过&lt;link&gt;标签引用外部CSS文件；&lt;style&gt;定义样式，&lt;link&gt;引用资源；已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;，属性有color和bgcolor。
游客44yag4ft7nckq
23 0
游客44yag4ft7nckq
|
22天前
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式，以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
游客44yag4ft7nckq
14 0

热门文章

最新文章

  • 1
    CSS 居中方法总结
  • 2
    纯CSS3实现宽屏二级下拉菜单
  • 3
    CSS3实现多样的边框效果
  • 4
    CSS3-实现单选框radio的小动画
  • 5
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 6
    CSS3实现时间轴效果
  • 7
    如何用纯 CSS 创作一个赛车 loader
  • 8
    CSS伪元素实现的3D按钮
  • 9
    CSS3中的选择器
  • 10
    Css:背景色透明，内容不透明之终极方法！兼容所有浏览器
  • 1
    2024较火的软件宣传单页HTML源码
    100
  • 2
    Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强。
    131
  • 3
    Sphinx是一个Python文档生成工具，它可以解析reStructuredText或Markdown格式的源代码注释，并生成多种输出格式，如HTML、LaTeX、PDF、ePub等。
    82
  • 4
    【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
    575
  • 5
    提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
    162
  • 6
    动态粒子发射404网站HTML源码
    61
  • 7
    【Python】已解决：bs4.FeatureNotFound: Couldn’t find a tree builder with the features you requested: html5
    339
  • 8
    HTML 【实用教程】（2024最新版）
    48
  • 9
    HTML【详解】表格 table 标签（table的属性，语义化表格，简易表格，合并单元格）
    254
  • 10
    HTML【详解】超链接 a 标签的四大功能（页面跳转、页内滚动【锚点】、页面刷新、文件下载）
    164

    • 相关课程

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

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • HTML及前端框架
    • 下一篇
    阿里云OSS设置跨域访问