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

Html+CSS+JS 实现轮播切换

2022-10-16 157
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
关键词：
CSS html
HTML CSS
HTML css js
HTML js
CSS js
六月暴雪飞梨花
目录
相关文章
郑小健
|
7天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中，表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格，以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构，样式美化以及如何实现响应式布局，使得表格内容在小屏设备上也能清晰阅读
郑小健
48 0
爱你三千遍斯塔克
|
11天前
|
前端开发 JavaScript
文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl + U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法
文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl + U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法
爱你三千遍斯塔克
20 4
朝阳39
|
13天前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器（2种方法：纯CSS实现 + JS实现）
vue组件封装——固定宽高比的容器（2种方法：纯CSS实现 + JS实现）
朝阳39
15 2
朝阳39
|
13天前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】（含css实现闪烁光标，js动态改变setInterval定时器的时间间隔）
vue 模拟随机变速的动态打字特效【支持多行文本】（含css实现闪烁光标，js动态改变setInterval定时器的时间间隔）
朝阳39
12 1
zrblue
|
13天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】Animated Navigation
【HTML+CSS+JavaScript】Animated Navigation
zrblue
8 0
zrblue
|
13天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】animated-countdown
【HTML+CSS+JavaScript】animated-countdown
zrblue
9 0
zrblue
|
13天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】3d-boxes-background
【HTML+CSS+JavaScript】3d-boxes-background
zrblue
7 0
朝阳39
|
13天前
|
前端开发 JavaScript
js 进入浏览器全屏（F11效果）、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式（全屏伪类）
js 进入浏览器全屏（F11效果）、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式（全屏伪类）
朝阳39
12 0
一颗小谷粒
|
14天前
|
JavaScript 前端开发 Java
前端网页开发学习（HTML+CSS+JS）有这一篇就够！（二）
前端网页开发学习（HTML+CSS+JS）有这一篇就够！（二）
一颗小谷粒
22 0
尘尘尘尘
|
2月前
|
前端开发 JavaScript UED
前端开发的魔法：CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合，为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果，并讨论它们的优缺点和适用场景。
尘尘尘尘
48 0