经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery实现轮播图
来源:cnblogs  作者:呆呆papa  时间:2019/3/25 9:15:10  对本文有异议

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

 

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

 

 

 

  遇到的问题:

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

 

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

  方法一:

 

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

 

  方法二:

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

 

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号