js轮播图

keithzone

于 2018-03-31 21:37:39 发布

阅读量111

点赞数

文章标签： js

本文链接：https://blog.csdn.net/keithzone/article/details/79773497

版权

本文介绍了如何使用JavaScript从头开始实现一个简单的轮播图功能。通过定义元素变量、定位、图片数组、动画开关和轮播方向，创建了图片容器、左右按钮、小圆点并设置了相关事件监听。同时，通过定时器实现自动轮播，点击小圆点或按钮可以手动切换图片。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
    * 1、定义部分显示元素变量
    * 2、定义定位变量
    * 3、定义轮播图图库数组
    * 4、定义动画开关
    * 5、定义轮播方向
    *
    *
    * */
//    图片容器
    var imgCon;
//    左按钮
    var leftBn;
//    右按钮
    var rightBn;
//    小圆点外容器
    var ul;
//    定位变量
    var position=0;
//    图库地址数组
    var arr=["img/a.jpeg","img/b.jpeg","img/c.jpeg","img/d.jpeg","img/e.jpeg"];
//    动画开关
    var bool=false;
//    轮播方向
    var dic="";

//    初始化显示
    initView();
//    初始设置圆点显示
    setLiBgColor(position);
//    设置时间间隔函数,16毫秒执行一次animation函数
    setInterval(animation,16);

    /*
    *初始化轮播图显示内容
    * 1、创建外容器，设置样式
    * 2、创建图片外容器，设置样式
    * 3、创建第一张图片，放在图片容器中，设置样式
    * 4、创建左右按钮，设置样式、设置位置，侦听点击事件
    * 5、创建小圆点容器及小圆点，设置样式及位置
    *
    *
    *
    * */
    function initView() {
//        外容器
        var rollDiv=createDiv({
 width:"960px",height:"320px",position:"relative",margin:"auto",overflow:"hidden"},document.body);
//     图片容器
        imgCon=createDiv({
 width:"1920px",height:"320px",position: