提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript轮播图(1+X Web前端开发初级 例题)

JavaScriptWeb 前端开发 轮播 初级 例题
2023-09-11 14:15:13 时间

什么是轮播图

轮播图是指在一个模块或者窗口，通过鼠标点击或手指滑动后，可以看到多张图片。这些图片统称为轮播图，这个模块叫做轮播模块。轮播图常见于电商类、资讯类应用、功能首页、功能模块主页面。下图截自京东的购物页面。

虽然现在轮播图的主流做法是用swiper来实现，但是轮播图是js学习里面很经典的案例之一，了解和学习轮播图的原理和实现，对于js的代码理解有很大的帮助。

题目要求

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>第三题-无缝轮播</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" type="text/css" href="css/lunbo.css">
</head>
<body>
<div class="banner" id="banner">
    <ul class="clear" style="left:-100%">
        <li><img src="img/index-banner3.jpg"></li>
        <li><img src="img/index-banner1.jpg"></li>
        <li><img src="img/index-banner2.jpg"></li>
        <li><img src="img/index-banner3.jpg"></li>
        <li><img src="img/index-banner1.jpg"></li>
    </ul>
    <div id="left"><div class="s1"></div></div>
    <div id="right"><div class="s2"></div></div>
    <div id="pageNav"></div>
</div>
<script src="js/index.js"></script>
</body>
</html>

css代码

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dd,dl{
    margin:0;
    padding:0;
}
ul,ol{
    list-style:none;
}
img{
    display:block;
}
.clear:after{
    content:"";
    display:block;
    clear:both;
}
.banner{
    position:relative;
    width:100%;
    overflow:hidden;
}
.banner ul{
    position:relative;
    width:500%;
}
.banner ul li{
    width:20%;
    float:left;
}
.banner ul li img{
    width:100%;
}
#left,#right{
    position:absolute;
    top:50%;
    margin-top:-25px;
    width: 50px;
    height:50px;
    cursor:pointer;
    background-color: rgba(0,0,0,0.4);
}
.s1 
{
    position: absolute;
	top:12px;
	right: 12px;
	display: block;
	width: 20px;
	height:20px;
	border-top:4px solid white;
	border-right:4px solid white;
	transform: rotate(-135deg);
}
.s2
{
    position: absolute;
	top:12px;
	right: 12px;
	display: block;
	width: 20px;
	height:20px;
	border-top:4px solid white;
	border-right:4px solid white;
	transform: rotate(45deg);
}
#left{
    left:0;
}
#right{
    right:0;
}
#left:hover,#right:hover{
    background-color: rgba(0,0,0,0.8);
}
#pageNav{
    position: absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
}
#pageNav a{
    display:inline-block;
    margin:0 5px;
    width:15px;
    height:15px;
    background-color: #fff;
    border-radius:50%;
}
#pageNav a.cur{
    background-color: orange;
}

js代码

// 获取元素
//（1）根据标签获取元素
var banner=document.getElementById("banner"),
    // ul=banner.____(1)______("ul")[0],
    ul=banner.getElementsByTagName("ul")[0],
    // li=ul.____(1)______("li"),
    li=ul.getElementsByTagName("li"),
    leftBtn=document.getElementById("left"),
    rightBtn=document.getElementById("right"),
    pageNav=document.getElementById("pageNav"),
    index=0,
    timer=null,
    animate=false;

// 追加小圆点
for(var i=0;i<li.length-2;i++){
//创建元素
    // var pageA=____(2)______("a");
    var pageA=document.createElement("a");
if(i==0){
//设置类名
        // pageA.___(3)____="cur";
        pageA.className="cur";
}
//追加节点
    // pageNav.____(4)___(pageA);
    //pageNav.append(pageA);
      pageNav.appendChild(pageA);
}
// 给小圆点绑定点击事件
// var aBtn=pageNav.____(1)______("a");
var aBtn=pageNav.getElementsByTagName("a");
for(var j=0;j<aBtn.length;j++){
//记录索引值
    // _____(5)_____;
   aBtn[j].index=j;
    aBtn[j].onclick=function(){
        if(animate){
            return
        }
//计算偏移量
        // var offset=___(6)_______;
        var offset=(this.index - index) * -100;
    //传参-当前点击对象的索引值
        // btnShow(___(7)____);
        btnShow(this.index);
        imgShow(offset);
        index=this.index;
    }
}
    //  小圆点点亮
function btnShow(num){
    for(var i=0;i<aBtn.length;i++){
        // aBtn[i].___(3)____="";
        aBtn[i].className="";
    }
    // aBtn[num].___(3)____="cur";
    aBtn[num].className="cur";
}
    //  切换图
function imgShow(offset){
    animate=true;
    var speed=offset/10;
    var newLeft=parseInt(ul.style.left)+offset;
    var go=function(){
        if(speed<0&&parseInt(ul.style.left)>newLeft || speed>0 && parseInt(ul.style.left)<newLeft){
            ul.style.left=parseInt(ul.style.left)+speed+"%";
            //延时计时器
// ___(8)____(go,50);
setTimeout(go,50);
        }else{
            ul.style.left=(index+1)*(-100)+"%";
            animate=false;
        }
    }
    go();
}
// 给左右箭头绑定点击事件
leftBtn.onclick=function(){
    if(animate){
        return
    }
    index--;
    if(index<0){
        index=aBtn.length-1;
    }
    btnShow(index);
    imgShow(100);
}
rightBtn.onclick=function(){
    if(animate){
        return
    }
    index++;
    if(index==aBtn.length){
        index=0;
    }
    btnShow(index);
    imgShow(-100);
}
// 自动轮播
function lunbo(){
    rightBtn.onclick();
}
timer=setInterval(lunbo,3000);
// 鼠标经过Banner区域清除计时器
banner.onmouseover=function(){
    // ____(9)_______;
    clearInterval(timer);
}
// 鼠标离开继续自动轮播
// banner.____(10)____=function(){
banner.onmouseout=function(){
    console.log(1);
    timer=setInterval(lunbo,3000);
}

题目解析 

第一题 根据标签获取元素可以知道使用getElementsByTagName() 方法

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

第二题 创建元素用createElement() 方法，不要漏了document

createElement() 方法通过指定名称创建一个元素

第三题 设置类名直接用className()

className 属性设置或返回元素的 class 属性。

第四题 追加节点用appendChild() 或append()都可以

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

append() 方法在被选元素的结尾（仍然在内部）插入指定内容。(多用于jQuery)

第五至七题

我觉得是这道题的一个难点，要充分理解代码的索引值和轮播图图片移动时的偏移量。

获取记录索引值先要给数组中每一个元素添加索引(.index),区分index和this.index的含义，通过阅读代码，求出offset偏移量的值。

第八题 、第九题定时器方法

设置setTimeout()方法

鼠标经过Banner区域清除计时器，直接使用clearInterval()方法

第十题 鼠标离开继续自动轮播

  • 上面代码出现了.onmouseover的事件，我们应该可以想到配套的onmouseout()事件
  • 需要注意的是区别onmouseover、onmouseout和onmouseenter、onmouseleave的不同之处
  • onmouseover、onmouseout和onmouseenter、onmouseleave的区别对比
  • onmouseover和onmouseout：在鼠标指针(移动到/移出)指定的对象时发生，支持冒泡，含子元素区域，鼠标经过时自身或子元素都触发事件，每经过一次都触发该事件。
  • onmouseenter和onmouseleave：在鼠标(移入/移出)元素时触发(只触发一次)，不支持冒泡，不包含子元素的区域(移动到其子元素身上不会触发事件)

运行效果 

今天是3月30日，最后祝艾伦生日快乐🎉

相关文章