当前位置： 移动技术网 > IT编程>开发语言>Jquery > jQuery实现轮播图

jQuery实现轮播图

2019年03月25日  | 移动技术网IT编程  | 我要评论

　　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>

 

 

 

　　遇到的问题：

  1. div标签未设置width和height属性导致background-image属性失效。
  2. 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);

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网