欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery实现轮播图

程序员文章站 2022-06-11 08:35:53
jQuery实现轮播图时出现ready方法外无法调用方法（函数） 遇到的问题： 解决ready()方法外调用方法（函数）问题（修改红色代码即可）： 方法一： 方法二： ......

　　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);

 

上一篇： linux学习总结

下一篇： 深入理解Redis Cluster

推荐阅读