JQuery实现滚动广告（转）

首页 > 代码库 > JQuery实现滚动广告（转）

JQuery实现滚动广告（转）

2024-07-14 01:04:02 223人阅读

用JQuery实现简单的滚动广告:

实现的思想是,定义一个div,div大小跟每张图片的大小一致。在div里面定义两个ul列表,一个用于显示图片,一个用于控制图片.定义div的 overflow值为hidden,使div内只能显示一张图片,然后利用JQuery的animate()实现整个ul的上下移动,使之显示指定的图片。

HTML代码

按 Ctrl+C 复制代码

CSS代码

按 Ctrl+C 复制代码

* {                margin: 0px;                padding: 0px;            }            #d1 {                border: 2px solid #E98C36;                width: 548px;                height: 177px;                margin-left: 30%;                margin-top: 10%;                position: relative;                overflow: hidden;            }            #adv, #num {                position: absolute;            }            ul li {                list-style: none;                display: inline;            }            ul img {                width: 548px;                height: 177px;                display: block;            }            #num {                right: 5px;                bottom: 5px;            }            #num li {                float: left;                color: #FF7300;                text-align: center;                line-height: 16px;                width: 16px;                height: 16px;                font-family: Arial;                font-size: 12px;                cursor: pointer;                overflow: hidden;                margin: 3px 1px;                border: 1px solid #FF7300;            }            .on {                line-height: 21px;                width: 21px;                height: 21px;                font-size: 16px;                margin: 0 1px;                border: 0;                background-color: red;                font-weight: bold;            }

按 Ctrl+C 复制代码

JS代码

按 Ctrl+C 复制代码

按 Ctrl+C 复制代码

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > JQuery实现滚动广告（转）

JQuery实现滚动广告（转）

看完仍有疑问？有类似问题直接问程序猿