运用for循环设置轮播图标的高亮效果

在运用DW制作网站页面的时候,我们经常会运用到小窗口轮播的js代码,轮播js代码的书写复杂且稍稍难以理解,但轮播窗口已经是当前网站页面制作的必不可少的一部分。在javascript代码中,for循环是制作轮播的不可或缺的常用代码。

图例,图片中的左下角是轮播的位置小图标,用于方便用户快速跳到指定的页面,图标内的红色高亮效果表示为所显示的当前页。

在这里插入图片描述
那么,设置小图标的高亮效果就需要运用到for循环的代码。如图例:
在这里插入图片描述
首先需要通过id获取四个小图标的li标签,然后设置for循环(如果变量p=0,且p需要小于li标签的长度,则p自加,即高亮效果向前推进),再结合if判断语句清除前一个图标的高亮效果,这样子就可以达到所需要的效果。
在这里插入图片描述
…若有不足请各位指出

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的基于 CSS 的轮播图样式和动画效果示例代码: ```css .slideshow-container { max-width: 1000px; position: relative; margin: auto; } .mySlides { display: none; } .mySlides img { width: 100%; height: auto; } .prev, .next { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; padding: 16px; color: white; font-weight: bold; font-size: 20px; border-radius: 5px; } .next { right: 0; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } .dot-container { text-align: center; padding: 20px; background: #ddd; } .dot { display: inline-block; cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } ``` 这个示例定义了一些基本的样式,包括轮播图容器的最大宽度、幻灯片的显示方式、前进和后退按钮的位置和样式、点容器的样式以及点的样式和动画效果。 在这个示例中,我们使用了 `display: none` 属性来隐藏所有幻灯片。在 JavaScript 中的 `showSlides()` 函数中,我们使用 `display: block` 属性来显示当前幻灯片和 `display: none` 属性来隐藏所有其他幻灯片。 我们还使用了 `transition` 属性来定义点的背景颜色变化的动画效果,使它们在激活和悬停时产生一个渐变效果。 请注意,这个示例中的样式只是一个基本示例,你需要根据你的需求进行相应的更改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值