js实现广告轮播图

最新推荐文章于 2024-08-12 16:04:13 发布

太阳和月亮.

最新推荐文章于 2024-08-12 16:04:13 发布

阅读量5.5k

点赞数 6

分类专栏： js

本文链接：https://blog.csdn.net/Azhi626/article/details/83756724

版权

本文介绍了如何使用JavaScript来实现广告轮播图。主要步骤包括：设置广告轮播图的显示样式，编写动画滚动方法，为图片序号和广告图片添加鼠标事件，以及在鼠标移入移出时控制自动切换的逻辑。同时，文章中包含了CSS样式定义、jQuery引用及核心代码示例。

摘要由CSDN通过智能技术生成

js中的图片切换思路：

1.创建页面设置广告轮播图的显示样式。

2.编写动画滚动方法接收显示广告图片索引，并执行动画移动到指定广告图片，并重置当前中的图片序号效果。

3.为图片序号设置鼠标移动事件，并调用显示图片的方法切换广告图片。

4.为广告图片编写鼠标移入事件，当鼠标移入时，停止自动切换广告图片时钟（定时器）。

5.为广告图片编写鼠标移出事件，当鼠标移出的时后，启动时钟自动每2秒切换一张广告图片。

在头部定义css样式

<style type="text/css">
*{margin:0;padding:0}
li{list-style:none;}
.ad {margin-bottom:10px;width: 560px;height: 200px;overflow: hidden;position: relative;}
.slider, .num {position: absolute;}
.slider li {list-style:none;display: inline;}
.slider img {width: 560px; height: 200px;display: block;}
.num {right: 5px;bottom: 5px;}
 .num li {float: left;color:gray;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 gray;background-color: #fff;}
.num li.on {color: