JS特效之广告轮播图（带定时器）

最新推荐文章于 2024-09-02 15:27:31 发布

溜溜的阿溜

最新推荐文章于 2024-09-02 15:27:31 发布

阅读量2.1k

点赞数

分类专栏：【前端】js原生动画及特效文章标签：轮播图 JS特效网页广告栏

本文链接：https://blog.csdn.net/cindy647/article/details/81018251

版权

轮播图是网页中常见的JS特效，最近学习实现了一个基础的轮播图（基于HTML+CSS+Javascript）,目前感觉功能已经比较全面了，示例的效果图如下：

基本的功能如下：

1、每隔一段时间（可自由设置）图片自动轮换，循环播放

2、右下角小图标根据显示的图片序号依次点亮（变黄色）

3、鼠标移入图片内，显示左右两侧的<>图标，停止自动轮换，点击图片实现移动到上一张/下一张；鼠标移出图片，隐藏两侧图标，继续自动轮换

4、鼠标点击右下角的数字，可以切换指定图片。

以下是完整的代码：

<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        *{ padding:0; margin:0; list-style:none; border:0;}
        .all{
            width:500px;
            height:200px;
            padding:7px;
            border:1px solid #ccc;
            margin:100px auto;
            position:relative;
        }
        .screen{
            width:500px;
            height:200px;
            overflow:hidden;
            position:relative;
        }
        .screen li{ width:500px; height:200px; overflow:hidden; float:left;}
        .screen ul{ position:absolute; left:0; top:0px; width:3000px;}
        .all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}
        .all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;}
        .all ol li.current{ background:yellow;}

        #arr {display: none;}
        #arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;}
        #arr #right{right:5px; left:auto;}
    </style>

    <script>
        window.onload = function () {
            //需求：无缝滚动。
            //思路：赋值第一张图片放到ul的最后，然后当图片切换到第五张的时候，直接切换第六章，再次从第一张切换到第二张的时候先瞬间切换到
                   第一张图片，然后滑动到第二张        
            //1.获取事件源及相关元素。
            var all = document.getElementById("all");