javascript - 滑动横幅 90% HTML+CSS3 10% JS

转载作者：行者123 更新时间：2023-11-28 18:46:30

24

4

我制作了一个脚本，使用 CSS3 在屏幕上滑动图像(进出)。当最后一个动画结束时，我找不到让 CSS 开始新动画的方法，而且 CSS 动画不允许更改背景图像(我试过了)。所以我不得不使用一点 javascript 来切换类名，这样图像就会改变。然而，这不是最好的解决方案，因为它有可能会不同步。除此之外，它违背了拥有纯 CSS3 动画的目的。

问:有没有一种方法可以减少 javascript(不混淆代码)或完全不用 javascript 来做到这一点？

来源

/  
/index.html  
/scripts/slider.css  
/scripts/slider.js  
/img/layout/banner1.png  
/img/layout/banner2.png  
/img/layout/banner3.png

slider .css

.main {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    width: 100%;
    height: 100%; /* if there is no content you need this to show something */
    background-repeat: no-repeat;
    background-position: center 50%;
    animation-name: slideInOut;
    animation-duration: 8s;
    animation-delay: 0s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-direction: normal;
    -moz-animation-name: slideInOut;
    -moz-animation-duration: 8s;
    -moz-animation-delay: 0s;
    -moz-animation-timing-function: ease-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -webkit-animation-name: slideInOut;
    -webkit-animation-duration: 8s;
    -webkit-animation-delay: 0s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -o-animation-name: slideInOut;
    -o-animation-duration: 8s;
    -o-animation-delay: 0s;
    -o-animation-timing-function: ease-out;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: normal;
}
.main.m1 {
    background-image: url("../img/layout/banner1.png");
}
.main.m2 {
    background-image: url("../img/layout/banner2.png");
}
.main.m3 {
    background-image: url("../img/layout/banner3.png");
}
@keyframes slideInOut {
      0% { background-position: 1600px 50%; }
     15% { background-position: center 50%; }
     80% { background-position: center 50%; }
    100% { background-position: -1600px 50%; }
}
@-moz-keyframes slideInOut {
      0% { background-position: 1600px 50%; }
     15% { background-position: center 50%; }
     80% { background-position: center 50%; }
    100% { background-position: -1600px 50%; }
}
@-webkit-keyframes slideInOut {
      0% { background-position: 1600px 50%; }
     15% { background-position: center 50%; }
     80% { background-position: center 50%; }
    100% { background-position: -1600px 50%; }
}
@-o-keyframes slideInOut {
      0% { background-position: 1600px 50%; }
     15% { background-position: center 50%; }
     80% { background-position: center 50%; }
    100% { background-position: -1600px 50%; }
}

slider .js

function startSlider() {
    var main = document.getElementById("main");
    var cArr = ["main m1","main m2","main m3"];
    var ntot = cArr.length;
    var npos = 0;
    setInterval(function() {
        main.className = cArr[npos++];
        if (npos == ntot) npos = 0;
    }, 8000);
}

index.html

<link rel="StyleSheet" href="scripts/slider.css"/>
<script type="text/javascript" src="scripts/slider.js"/>
<body onload="startSlider();">
<div id="main" class="main m3"></div>

统计

*------------------------------------------*
|            | Chars (no spaces) | % total |
|------------|-------------------|---------|
| javascript |               210 |   9.95% |
| html+css3  |          165+1735 |  90.05% |
*------------------------------------------*
| total      |              2110 | 100.00% |
*------------------------------------------*

最佳答案

setInterval(function() {
    main.className = cArr[npos=++npos%ntot];         
}, 8000);

关于javascript - 滑动横幅 90% HTML+CSS3 10% JS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10472741/

24

4

0

文章推荐： javascript - 尝试更改 Divs 然后恢复

文章推荐： css -/images 或/inc/css 链接在 CodeIgniter 子文件夹中不起作用

文章推荐： javascript - 如何将 2 个参数传递给 jquery Find() 方法

显示透明背景的 Adsense 横幅
相信我，我在 Adsense 论坛(西类牙语和英语)中问过这个问题，还检查了以下资源和问题: 1 - 2 - 3 - 4 我有一个实际与 AdMob 配合使用的 AdSense 帐户。我们在 Andr
youtube - 单击播放按钮时如何将标题扩展到视频的标题/横幅？
我想创建一个标题图像/横幅，单击播放图像后，它会垂直扩展以播放YouTube上托管的视频。此页面准确显示了我要执行的操作: blendedlearningnow.com/about。我不确定这是否
Jquery slider 横幅
这里有一个漂亮的 Flash 横幅:http://osc4.template-help.com/drupal_30779/ 。我想知道是否有一个 jquery 库可以让我达到同样的效果。 (点击、滑动
永远延伸的 HTML 横幅
我在一个宽度为 960px 的容器 div 中有一个标题。页眉包含几个完全位于页面中央的 Logo 。我想有一个背景渐变永远延伸到标题后面。出现问题是因为渐变横幅受限于 960px 的宽度。我尝试将横
php - 创建用户可以自定义的页眉/横幅
有谁知道是否可以创建一个功能标题生成器，使用户能够使用颜色、图像和文本对其进行自定义？然后保存并添加到他们的网站？ I have created a feature banner demo here
从左向右延伸的 css 横幅
通常在我的网页中，我会有一个 #wrapper DIV 来包装整个页面并设置为如下内容: #wrap {position: relative; width: 1000px; display: bloc
带有叠加图像和文本的 html 横幅
我正在寻找一种动态创建可以放置在其他页面上的横幅的方法。横幅包含一个背景图像、两个重叠图像和两个位于该背景图像之上的文本标签。是不是只能用绝对定位来实现元素的叠加？我如何确保横幅本身相对放置在集成页
Jquery 横幅 slider
我有一个 900 x 80 的标题区域，以及一个适合该区域左上角的 175 x 75 Logo 。我想要做的是使用 jquery 将 Logo 从标题区域的右侧移动到左侧，然后卡住并设置在左侧。我知道
Admob 横幅，如何仅在主页上显示
我成功地在页脚上显示智能横幅，然后将其处理掉。我的问题是显示在应用程序的所有页面上。我的问题是:如何只显示在一页上？ @override void initState() { super.i
flash - 如何添加链接到 Flash 横幅
我主要是一名开发人员，不知道使用 Adobe Flash CS4。是否有一种简单的方法可以将链接添加到 Flash 横幅。我有 .flv 文件，其中包含库中的一些项目和两层。请给我一步一步的指示
web - 在响应式布局中处理 Adsense 横幅
如何在响应式布局中处理 Adsense 横幅？据我从 Adsense TOS 中了解到，我几乎不允许在客户端对横幅做任何事情，所以我不能在客户端将横幅切换到较小的分辨率，如果它是低分辨率的. 似乎我
java - 如何在Java中使用v3数据Api插入YouTube channel 横幅？
ChannelBannerResource chBannerResource = new ChannelBannerResource(); chBannerResource.setKind("yout
javascript - 横幅 javascript 变得更快
下面附有代码，我正在尝试使用 javascript 制作横幅。使用 setInterval 我做了一个循环，一个接一个地显示 3 个 div。我遇到的问题是，当循环结束时，有一个按钮显示“返回”，
java - 在哪里放置 AdMob 横幅？
我即将在拥有 1000 个活跃用户的应用程序中实现 AdMob 横幅。我有 1 个 main Activity，其中包含 5 个 fragment，每个 fragment 代表不同的选项卡。我应该
java - 我无法在我的应用程序中显示 AdMob 横幅
我尝试在我的应用中实现 AdMob 横幅，但它没有显示。我已经使用了横幅，并且总是使用相同的方式..我有一个带有 View 的 FrameLayout 。此 FrameLayout 位于 Linear
java - Mobclix 横幅 NullPointerException？
我在我的第一款游戏中使用 Andengine 与 Mobclix 结合使用，每当我尝试运行该应用程序时，我都会在 LogCat 中收到巨大错误。我到处都搜索过，但似乎找不到答案。 FATAL EXCE
javascript - 在更改任何表单元素后显示 div 横幅
JS: document.getElementsByTagName("input, select, textarea, option, optgroup, fieldset, label").onch
android - 在页面底部添加一个不重叠内容的 Admob 横幅
我想在页面底部安装一个横幅，但它与主屏幕的内容重叠。在主屏幕中有很多内容并且有滚动。有人知道为什么吗？谢谢。 XML android:id="
java - 布局顶部的 Admob 横幅
我想在屏幕顶部显示横幅，但是有问题。在我的代码中(这不是我的代码，因为我正在学习过程中)我有两个选择。在屏幕底部的屏幕下方或上方显示横幅。 public void showBanner(fin
android - 在屏幕底部显示 AdMob 横幅
我的 AdMob 横幅显示在屏幕顶部而不是底部。这是我的代码: adView = new AdView(mSingleton); adView.setAdSize(AdSize.SMART_BANN

首页

博学

6Ren·AI

商城

javascript - 滑动横幅 90% HTML+CSS3 10% JS

来源

slider .css

slider .js

index.html

统计