Html+CSS+JS 实现轮播切换

简介: 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>
相关文章
|
9天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
19 0
|
2天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
17 10
|
2天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
9 0
|
4天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
4天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
11天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
12天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
12 0
|
16天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
28天前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码
|
1月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
27 0