jQuery实现轮播图

最新推荐文章于 2024-07-15 17:15:41 发布

CH1240

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量97

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ddpapa/p/10589165.html

版权

jQuery实现轮播图时出现ready方法外无法调用方法（函数）

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 7 <script type="text/javascript">
 8     var image = ["https://img1.360buyimg.com/pop/jfs/t1/15215/22/10893/142189/5c8b26eeEbf3f7b19/3d8f4b6e982e2ceb.jpg",
 9         "https://img1.360buyimg.com/pop/jfs/t1/17925/40/8815/90463/5c78bd5dEfa47279e/8d85b9b3b10179df.jpg",
10         "https://m.360buyimg.com/babel/jfs/t1/20721/30/12006/93636/5c94e1d7E2543f373/bf731a518fed103e.jpg",
11         "https://img1.360buyimg.com/pop/jfs/t1/20083/28/11964/95576/5c937e34Ecfb4ea55/60029bdeab133ce1.jpg"];
12     var i = 1;
13     var lunbo;//定义全局变量
14     $(document).ready(function(){
15         $("div").css("background-image",'url('+image[0]+')');
16         lunbo = function(){
17             //将lunbo函数赋给lunbo变量
18             $("div").css("background-image","url("+image[i]+")");
19             i++;
20             if(i > 3){
21                 i = 0;
22             }
23         }
24     })
25     setInterval("lunbo()",2000); 
26 </script>
27 </head>
28 <body>
29 <div style="width:590px; height:470px; margin:auto;"></div>
30 </body>
31 </html>

调试

备注

　　遇到的问题：

div标签未设置width和height属性导致background-image属性失效。
ready()方法外调用lunbo()方法无效。

　　解决ready()方法外调用方法（函数）问题（修改红色代码即可）：

　　方法一：

 1 $(document).ready(function(){
 2         $("div").css("background-image",'url('+image[0]+')');
 3     })
 4     function lunbo(){
 5         //将lunbo函数放在ready()方法外供全局调用
 6         $("div").css("background-image","url("+image[i]+")");
 7         i++;
 8         if(i > 3){
 9             i = 0;
10         }
11     }
12     setInterval("lunbo()",2000);

　　方法二：

 1 var lunbo;//定义全局变量
 2     $(document).ready(function(){
 3         $("div").css("background-image",'url('+image[0]+')');
 4         lunbo = function(){
 5             //将lunbo函数赋给lunbo变量
 6             $("div").css("background-image","url("+image[i]+")");
 7             i++;
 8             if(i > 3){
 9                 i = 0;
10             }
11         }
12     })
13     setInterval("lunbo()",2000);

转载于:https://www.cnblogs.com/ddpapa/p/10589165.html

CH1240

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现轮播图

jQuery实现轮播图时出现ready方法外无法调用方法（函数） 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta ...
复制链接

扫一扫