html点击按钮切换图片,并自动定时轮换

最新推荐文章于 2025-05-22 13:28:11 发布

原创最新推荐文章于 2025-05-22 13:28:11 发布 · 7.2k 阅读

10 ·

CC 4.0 BY-SA版权

网页专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及jQuery实现的简单图片轮播效果。通过预加载多张图片并利用按钮控制图片切换，实现了基本的轮播功能。文章提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
#hello {
   width: 108px;
   height: 108px;
   border: 1px solid #369;
   overflow: hidden;
   margin: auto;
}
</style>
<div id="hello"><img src="http://i1.baidu.com/it/u=2390401277,3891827753&fm=203"><img src="http://i1.baidu.com/it/u=3713675608,2219355047&fm=203"><img src="http://i2.baidu.com/it/u=695011303,1300693603&fm=203"></div>
<center>
<div>
    <input type="button" value="上一张" onclick="a()";>
    <input type="button" value="下一张" onclick="b()";>
</div>
</center>
<script>

var t;

   function a(){

       clearInterval(t);
       t=setInterval('b()',3000);

       $('#hello').find('img').eq(0).appendTo($('#hello'));
   }
   function b(){

       clearInterval(t);
       t=setInterval('b()',3000);

       $('#hello').find('img:last').eq(0).prependTo($('#hello'));
   }

   t=setInterval('b()',3000);



</script>
</head>
<body>
</body>
</html>