jQuery 实现轮播图时出现 ready 方法外无法调用方法(函数)
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <HTML>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>
- Insert title here
- </title>
- <script type="text/javascript" src="js/jquery-3.3.1.min.js">
- </script>
- <script type="text/javascript">
- var image = ["https://img1.360buyimg.com/pop/jfs/t1/15215/22/10893/142189/5c8b26eeEbf3f7b19/3d8f4b6e982e2ceb.jpg", "https://img1.360buyimg.com/pop/jfs/t1/17925/40/8815/90463/5c78bd5dEfa47279e/8d85b9b3b10179df.jpg", "https://m.360buyimg.com/babel/jfs/t1/20721/30/12006/93636/5c94e1d7E2543f373/bf731a518fed103e.jpg", "https://img1.360buyimg.com/pop/jfs/t1/20083/28/11964/95576/5c937e34Ecfb4ea55/60029bdeab133ce1.jpg"];
- var i = 1;
- var lunbo; // 定义全局变量
- $(document).ready(function() {
- $("div").CSS("background-image", 'url(' + image[0] + ')');
- lunbo = function() {
- // 将 lunbo 函数赋给 lunbo 变量
- $("div").CSS("background-image", "url(" + image[i] + ")");
- i++;
- if (i > 3) {
- i = 0;
- }
- }
- }) setInterval("lunbo()", 2000);
- </script>
- </head>
- <body>
- <div style="width:590px; height:470px; margin:auto;">
- </div>
- </body>
- </HTML>
遇到的问题:
div 标签未设置 width 和 height 属性导致 background-image 属性失效.
ready()方法外调用 lunbo()方法无效.
解决 ready()方法外调用方法 (函数) 问题(修改红色代码即可):
方法一:
- $(document).ready(function(){
- $("div").CSS("background-image",'url('+image[0]+')');
- })
- function lunbo(){
- // 将 lunbo 函数放在 ready()方法外供全局调用
- $("div").CSS("background-image","url("+image[i]+")");
- i++;
- if(i> 3){
- i = 0;
- }
- }
- setInterval("lunbo()",2000);
方法二:
- var lunbo;// 定义全局变量
- $(document).ready(function(){
- $("div").CSS("background-image",'url('+image[0]+')');
- lunbo = function(){
- // 将 lunbo 函数赋给 lunbo 变量
- $("div").CSS("background-image","url("+image[i]+")");
- i++;
- if(i> 3){
- i = 0;
- }
- }
- })
- setInterval("lunbo()",2000);
来源: http://www.bubuko.com/infodetail-2998423.html