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
六月暴雪飞梨花
目录
相关文章
二二*一一
|
15天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
40 1
进步`于辰
|
18天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
40 1
[HTML、CSS]细节与使用经验
进步`于辰
|
20天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
30 1
[HTML、CSS]知识点
游客g5tp3lgf24cqc
|
14天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
游客g5tp3lgf24cqc
45 12
温轻舟
|
11天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
54 1
蓝易云
|
16天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
32 3
疯狂的猿
|
19天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果，可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素，向下拖拽可实现删除效果，简单实用，欢迎下载
疯狂的猿
32 4
疯狂的猿
|
18天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码，在公路上开车网页小游戏源代码。
疯狂的猿
44 0
html5+three.js公路开车小游戏源码
疯狂的猿
|
26天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
78 6
游客44yag4ft7nckq
|
25天前
|
前端开发
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
24 0