轮播广告效果实现

最新推荐文章于 2023-12-08 15:24:23 发布

星空下的嗳

最新推荐文章于 2023-12-08 15:24:23 发布

阅读量5.4k

点赞数 3

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_35718410/article/details/52131013

版权

本文介绍了如何在网页中创建轮播广告效果，通过HTML、CSS和JavaScript实现。广告图片每三秒自动切换，鼠标悬停则暂停切换，鼠标放置在图片序号上时会动画切换到对应图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于看到每个电商网站的首页基本上都有轮播广告，所以我也写了一个简单的轮播广告效果，记录一下，以后用到的话可以直接使用了。

本篇主要介绍如何在我们的网页中快速实现轮播效果，js的原理部分在续篇中详细讲解。

一、首先在HTML中想要放轮播的地方加入以下代码：

<div id="slider">
    <ul id="imgs"></ul>
    <ul id="indexs"></ul>
</div>

二、在样式文件中加入以下样式：

#slider {
    width: 670px;
    height:240px;
    margin-top:10px;
    position:relative;
    overflow:hidden;
}
#slider #imgs {
    position:absolute;
    top: 0;  left: 0;
    height:240px;
}
#slider #imgs li{
    float:left;
    z-index:0;
}
#slider #indexs {
    position:absolute;
    bottom:15px;
    right:30px;
}
#slider #indexs li {
    width: 22px;
    height: 22px;
    line-height: 22px;
    display: inline-block;
    background: #3e3e3e;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    margin-left:10px;
}
#slider #indexs li.hover {
    background:#b61b1f ;
}

三、在js文件中加入以下函数：

function luobo(imgs){
    /*封装$*/
    function $(selector){
        return document.querySelectorAll(selector);
    }
    var imgs=imgs;
    var slider={
        LIWIDTH:0,

最低0.47元/天解锁文章