js实现广告轮播图

最新推荐文章于 2025-10-15 22:12:51 发布

原创最新推荐文章于 2025-10-15 22:12:51 发布 · 5.7k 阅读

25 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

2 篇文章

订阅专栏

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

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: #fff;line-height: 21px;width: 21px;height: 21px;font-size: 16px;margin: 0 1px;
border: 0;background-color: gray;font-weight: bold;}
</style>

上述是自己写的样式表方便实现效果

在头部引用 jquery

<script src="../jquery-3.3.1.min.js"></script>

核心代码

<script type="text/javascript">
	$(function(){
		var index=0;//保存li索引
		var len=$(".num>li").length;//定义变量用来保存li的长度
		var timer;//定义一个变量用来接收计时器
		$(".num>li").mouseover(function(){//通过jquare获取到li，增加鼠标事件
			index=$(this).index()//接收当前对象的索引
			toggleImg(index)
		}).eq(0).mouseover()//
		$(".ad").hover(function(){//hover 方法中有两个参数 一个为鼠标进入，一个为鼠标离开，可传入两个方法
			clearInterval(timer)//鼠标进入时清除计时器，使得图片不再自动播放
		},function(){
			timer=setInterval(function(){ //定义计时器传入函数，和毫秒数 
				toggleImg(index);
				index++;
				if(index==len){
					index=0;
				}
			},2000)
		}).trigger("mouseleave")//模拟鼠标离开事件触发自动播放函数
		
	})
	function toggleImg(index){//封装函数 图片自动播放 通过改变top属性实现图片上移
		var adHeight=$(".ad").height();
		$(".slider").stop().animate({"top":-adHeight*index},1000)
		$(".num li").removeClass("on").eq(index).addClass("on")
	}
</script>

html

<body>
<div id="box">
    <div class="ad">
        <ul class="slider">
            <li><img src="image/1.jpg" /></li>
            <li><img src="image/2.jpg" /></li>
            <li><img src="image/3.jpg" /></li>
            <li><img src="image/4.jpg" /></li>
            <li><img src="image/5.jpg" /></li>
        </ul>
        <ul class="num">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</div>
</body>