JQuery定时器和轮播图

定时器

 代码效果如上;

定时器主要使用(setInterval:每隔多少毫秒,执行程序)

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定时器</title>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				// //setTimeout:在多少毫秒之后,执行一段程序,
				// setTimeout(function(){
				// 	$("#content").text("动态生成!")
				// },1000);
				
				//setInterval:每隔多少毫秒,执行程序
				setInterval(function(){
					$("#content").append("定时器添加!");
				},1000);
			});
		</script>
	</head>
	<body>
		<div id="content">
			
		</div>
	</body>
</html>

轮播图

 代码效果图如下:

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是使用jQuery实现轮播图的代码示例: HTML代码: ``` <div class="slider"> <ul class="slider-list"> <li><img src="img1.jpg" alt="图片1"></li> <li><img src="img2.jpg" alt="图片2"></li> <li><img src="img3.jpg" alt="图片3"></li> <li><img src="img4.jpg" alt="图片4"></li> </ul> <div class="slider-arrow-prev"></div> <div class="slider-arrow-next"></div> <ul class="slider-dots"> <li class="active"></li> <li></li> <li></li> <li></li> </ul> </div> ``` CSS代码: ``` .slider { position: relative; width: 800px; height: 450px; overflow: hidden; } .slider-list { position: absolute; left: 0; top: 0; width: 3200px; height: 450px; margin: 0; padding: 0; list-style: none; } .slider-list li { float: left; width: 800px; height: 450px; } .slider-arrow-prev { position: absolute; left: 20px; top: 50%; width: 40px; height: 40px; margin-top: -20px; background-image: url(arrow-prev.png); background-repeat: no-repeat; background-position: center center; cursor: pointer; } .slider-arrow-next { position: absolute; right: 20px; top: 50%; width: 40px; height: 40px; margin-top: -20px; background-image: url(arrow-next.png); background-repeat: no-repeat; background-position: center center; cursor: pointer; } .slider-dots { position: absolute; left: 50%; bottom: 20px; width: 160px; height: 20px; margin-left: -80px; margin-bottom: 0; padding: 0; list-style: none; text-align: center; } .slider-dots li { display: inline-block; width: 10px; height: 10px; margin: 0 5px; background-color: #ccc; border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease; } .slider-dots li.active { background-color: #f00; } ``` JavaScript代码: ``` $(function() { var $slider = $('.slider'); var $list = $slider.find('.slider-list'); var $items = $list.find('li'); var $prev = $slider.find('.slider-arrow-prev'); var $next = $slider.find('.slider-arrow-next'); var $dots = $slider.find('.slider-dots li'); var len = $items.length; var index = 0; var interval = null; var intervalTime = 3000; function showItem(idx) { $items.eq(index).fadeOut(500); $dots.eq(index).removeClass('active'); index = idx; $items.eq(index).fadeIn(500); $dots.eq(index).addClass('active'); } function autoPlay() { interval = setInterval(function() { var nextIndex = (index + 1) % len; showItem(nextIndex); }, intervalTime); } function stopAutoPlay() { clearInterval(interval); } $prev.on('click', function() { var prevIndex = (index - 1 + len) % len; showItem(prevIndex); }); $next.on('click', function() { var nextIndex = (index + 1) % len; showItem(nextIndex); }); $dots.on('click', function() { var idx = $(this).index(); showItem(idx); }); $slider.on('mouseenter', function() { stopAutoPlay(); }); $slider.on('mouseleave', function() { autoPlay(); }); showItem(index); autoPlay(); }); ``` 解释一下代码的实现思路: 1. 首先获取轮播图的各个元素,包括图片列表、箭头、轮播点等。 2. 定义一个showItem函数,用于切换图片和高亮轮播点。在切换图片时,隐藏当前显示的图片,显示将要显示的图片,并同时切换对应的轮播点的高亮状态。 3. 定义一个autoPlay函数,用于启动自动播放定时器,在定时器中调用showItem函数实现图片的自动切换。 4. 定义一个stopAutoPlay函数,用于停止自动播放定时器。 5. 监听箭头和轮播点的点击事件,根据当前显示图片的下标计算出上一张或下一张图片的下标,并调用showItem函数实现切换。 6. 监听鼠标移入和移出轮播图区域的事件,分别启动或停止自动播放定时器。 7. 在页面加载完成后,调用showItem函数显示第一张图片,并启动自动播放定时器

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值