使用jquery现实图片切换效果

最新推荐文章于 2024-10-16 09:21:38 发布

416984954

最新推荐文章于 2024-10-16 09:21:38 发布

阅读量323

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_33663071/article/details/50476410

jquery特效专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何利用jQuery库创建一个简单的图片轮播效果，包括事件监听、DOM操作及循环展示图片的方法。

摘要生成于 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="js/jquery.min.js"></script>
<script>

//窗体加载完成后执行该函数
$(function(){
$("#image").click(function(){
//this表示底层的html元素，表示将这个元素的src从第7位开始截取，
var idx=parseInt($(this).attr("src").substr(7));
//共有6张图片，循环完以后从1开始重新循环
if(++idx>6){
idx=1;
}
//设置元素的src属性
$(this).attr("src","images/"+idx+".jpg");
})
})

</script>

</head>

<body>
<img src="images/1.jpg" id="image" width="300" height="200" />

</body>
</html>