JavaScript实现轮播图方法二，提升

最新推荐文章于 2024-06-23 23:55:57 发布

yjhqukq

最新推荐文章于 2024-06-23 23:55:57 发布

阅读量431

点赞数

分类专栏： JavaScript 文章标签： HTML JavaScript CSS 前端开发语言

本文链接：https://blog.csdn.net/yjhqukq/article/details/127165933

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本次的轮播图较之前的轮播图而言，有了些许提升，主要提升有：导航点(由JavaScript生成)、轮播图开始/暂停功能。

一、运行效果

1.1轮播图的正常运行，图片和导航点同时变化

1.2当鼠标停留在图片之上时，轮播图暂停运行；当鼠标离开图片时，轮播图继续运行

二、文件结构

轮播图项目中一共有四个文件夹，css文件夹、html文件夹、js文件夹、image文件夹，其中css文件夹用来存放样式文件，html文件夹用来存放网页文件，js文件夹用来存放JavaScript编程语言所写的代码文件，image文件夹用来存放图片文件。网页文件会引入.css文件、.js文件、图片文件，这样独立的文件，就被关联在一直起了。

三、实现代码

大部分代码都已经添加注释，各位看官可放心食用，亦可粘贴到本地运行，看看效果。

为了保持简洁，去掉了html的一些标签，请勿见怪。

3.1 html

<html>
<head>
    <meta charset="UTF-8">
    <title>turnPhoto</title>
    <!-- 将turnPhoto.css文件引入 -->
    <link rel="stylesheet" href="../css/turnPhoto.css">
</head>
<body>
    <img src="../image/1.jpg" id="photo">
    <div id="navigationBar">

    </div>
    <!-- 把turnPhoto.js文件引入 -->
<script src="../js/turnPhoto.js"></script>
</body>
</html>

3.2 css

*
{
    /* 外边距 */
    margin: 0;
    /* 内边距 */
    padding: 0;
}
/* 通过标签名选择元素 */
img
{
    /* 宽 */
    width: 100%;
    /* 高 */
    height: 100%;
}
/* 通过id值选择元素 */
#navigationBar
{
    width: 100%;
    height: 60px;
    /* 定位：绝对定位 */
    position:absolute;
    /* 绝对定位 距离顶端80%的距离 */
    top:80%;
    /* background-color: royalblue; */
    /* 行内元素对齐方式 居中 */
    text-align: center;
}
/* 通过class值选择元素 */
.navigator
{
    /* 元素显示方式：行内块 */
    display: inline-block;
    width: 30px;
    height: 30px;
    /* 边框 */
    border:1px solid white;
    /* 边框半径 */
    border-radius: 15px;
    /* 字体大小 */
    font-size: 25px;
    /* 字体颜色 */
    color:white;
    /* 行内元素对齐方式 居中 */
    text-align: center;
    /* 行高 */
    line-height: 30px;
    /* 右外边距 */
    margin-right: 10px;
}
/* class值为navigator的元素的父级元素的最后一个子元素 */
.navigator:last-child 
{
    margin-right: 0;
}

3.3 JavaScript

var maximum = 5;//一共有多少张照片
var currentIndex = 1;//记录当前要点亮的导航点,也记录当前图片的名字
var lastIndex = -1;//记录上一次点亮的导航点,也记录上一次图片的名字，默认为-1,表示头一次进入轮播图
var imgElement = window.document.getElementById("photo");//通过id值获取img标签对象
var millisecond=600;//定时任务函数的间隔毫秒数
function turnPhoto()//定义轮播图函数
{
    imgElement.src = "../image/" + currentIndex + ".jpg";//切换img标签对象的图片源
    shine(lastIndex, currentIndex);//调用点亮/熄灭导航点函数
    lastIndex = currentIndex;//记录上一张图片的名字，也是上一个被点亮的导航点
    currentIndex++;//图片名字自加,转到下一张图片名字
    if (currentIndex > maximum) 
    {
        currentIndex = 1;
    }
}

function shine(lastIndex, currentIndex)//点亮/熄灭导航点函数
{
    var navigator;
    // if(lastIndex!=-1)
    // {
    //     navigator=window.document.getElementById(lastIndex);
    //     navigator.style.backgroundColor="";
    //     navigator=window.document.getElementById(currentIndex);
    //     navigator.style.backgroundColor="royalblue";
    // }else
    // {
    //     navigator=window.document.getElementById(currentIndex);
    //     navigator.style.backgroundColor="royalblue";
    // }

    //换种写法
    if (lastIndex == -1) //如果lastIndex为-1，则说明是头一次开始轮播图
    {
        navigator = window.document.getElementById(currentIndex);//获取第一个导航点
        navigator.style.backgroundColor = "royalblue";//点亮第一个导航点
        return;//后续代码不再执行
    }
    navigator = window.document.getElementById(lastIndex);//获取上一次被点亮的导航点，也是要被熄灭的导航点
    navigator.style.backgroundColor = "";//熄灭导航点
    navigator = window.document.getElementById(currentIndex);//获取本次要被点亮的导航点
    navigator.style.backgroundColor = "royalblue";//点亮导航点

}


function generateNavigator()//定义生成导航点函数
{
    var navigationBarDiv = window.document.getElementById("navigationBar");
    var navigatorDiv;
    for (var i = 0; i < maximum; i++)//一共有多少张图片，就会多少个导航点
     {
        navigatorDiv = window.document.createElement("div");//生成导航点div
        navigatorDiv.setAttribute("class", "navigator");//给导航点div的class值设为navigator
        navigatorDiv.setAttribute("id", i + 1);//给导航点div的id值设为i+1
        navigatorDiv.innerText = i + 1;
        navigationBarDiv.appendChild(navigatorDiv);//将导航点div添加到导航条div中
    }
}


var interval;//用来记录定时任务
function start()// 定义开启轮播图定时任务函数
{
    if(interval!=null)//若已经存在定时任务，
    {
        return;//则不执行后续代码
    }
    //开启定时任务，每隔1秒执行一次轮播图函数，并用变量interval记录下定时任务
    interval=window.setInterval(turnPhoto, millisecond);
}

function stop()//定义清除轮播图定时任务函数
{
    if(interval!=null)//若存在轮播图定时任务
    {
        window.clearInterval(interval);//则清除轮播图定时任务
        interval=null;//将变量interval置为null
    }
}


imgElement.onmouseover=stop;//给img标签对象注册事件，当鼠标停留于图片时，轮播图定时任务结束
imgElement.onmouseout=start;//给img标签对象注册事件，当鼠标离开图片时，轮播图定时任务继续
generateNavigator();//调用generateNavigator函数，生成导航点div
start();//调用start方法,开启轮播图定时任务

纸上得来终觉浅，绝知此事要躬行。

与身较量，觉心者，胜！