jQuery实现轮播效果(一) - 基础

最新推荐文章于 2023-10-20 17:06:24 发布
最新推荐文章于 2023-10-20 17:06:24 发布
阅读量7.6k 收藏 19
点赞数 5
分类专栏： web前端 javascript js的魅力 文章标签： 轮播效果 jquery轮播效果 jquery css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ricciozhang/article/details/47403283
版权

前戏：


         XXXX年XX月XX日，经理交给我一个网站新闻资讯网页开发的活儿，我一个java程序员，怎么完成得了网页设计这样高端的活儿呢！之前虽然有学过一点HTML，CSS的知识，但是在实际的使用中，把页面整的好看很困难，最后信心没了，就再也不想去做涉及网页开发的事儿了，一心学习java。如果在小公司做java web开发，专门做后台的开发时很少的，一般还得弄前台页面（PS:做这些前台也很简单，要么用一些前端框架，要么就是把以前的项目拷过来再修改下页面）。拿到网页开发这个活儿，我顿时愣了，不过好在不用我去设计页面，只要把美工做好的模板拿过来再进行一下排版就OK了，只写代码当然难不住作为程序员的我啦！于是啪啦啪啦的去写代码了，突然发现，咦，这是个什么玩意？每隔一段时间就会显示下一张新闻图片，问了下美工，他说这是一个叫“轮播”的东东，只觉得这个东西好神奇，美工说你去网上找一下做轮播效果的代码，然后改改就行啦~百度了一下，发现搜索到的结果特别多，而且大部分都是用jquery写的，于是随便找到一个效果拿过去用了，效果确实令人满意。

         拿过来改下确实能解决事儿，但是我已经对无脑的复制粘贴感到厌烦了，这终究不是个办法，我不仅要知道他确实能实现这种效果，而且也要了解它到底是怎样工作的（据我观察，公司的一些程序员的一些代码都是复制粘贴过来的，你去看里面的一些代码就会觉得很凌乱，有时代码出问题了，你去问他，他居然不知道！当然我这里不是为了黑大伙，仅仅只是复制代码不会对我们技术的提升有任何效果）。于是根据自己的一些理解，提供了这篇jquery轮播效果的讲解，如果文中有什么疏漏，还奢望指教。


正文：


      首先看一下效果：

     

     轮播效果分析：

  1. 轮播效果大致可以分为3个部分：轮播图片（图片或者是包含容器），控制轮播图显示的按钮（向左、向右按钮，索引按钮(例如上面效果图的顶部的数字按钮)），每隔一段时间轮流显示轮播图片。
  2. 轮播图的显示：要显示的轮播图显示，不需要显示的轮播图隐藏；通常将这些轮播图片以定位的方式重叠在一起，每次显示一张轮播图片。
  3. 控制按钮：鼠标点击或者移到索引按钮上面时，显示对应索引位置的轮播图；向上、向下按钮负责控制显示上一张、下一张轮播图片。
  4. 其它：一般索引按钮有激活状态和未激活状态共2种状态；鼠标移到轮播图片上面时应该停止自动轮播，鼠标离开时开始自动轮播。

   轮播效果实现笔记：

  1. jquery提供了丰富的选择器以及用来挑选元素的方法，这极大的简化了我们的开发，例如$(".slider-item").filter(".slider-item-selected")选择了当前处于激活状态的索引按钮。
  2. 两张轮播图的切换显示效果是通过jquery的fadeOut()和fadeIn()方法来实现的，具体的使用参照jquery的api；
  3. CSS透明背景的实现：  background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); （可以参看下面的参看资料），兼容大部分主流浏览器包括IE；为什么不使用opacity呢？因为opacity会使文字也透明（子元素也会透明）。
  4. HTML骨架很重要，你写的html的结果应该是良好的。

    代码部分：


-----------------------------------------------------------------------------------

    HTML:

<pre name="code" class="html"><div class="slider">
	<ul class="slider-main">
		<li class="slider-panel">
			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/1.jpg"></a>
		</li>
		<li class="slider-panel">
			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/2.jpg"></a>
		</li>
		<li class="slider-panel">
			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/3.jpg"></a>
		</li>
		<li class="slider-panel">
			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/4.jpg"></a>
		</li>
	</ul>
	<div class="slider-extra">
		<ul class="slider-nav">
			<li class="slider-item">1</li>
			<li class="slider-item">2</li>
			<li class="slider-item">3</li>
			<li class="slider-item">4</li>
		</ul>
		<div class="slider-page">
			<a class="slider-pre" href="javascript:;;"><</a>
			<a class="slider-next" href="javascript:;;">></a>
		</div>
	</div>
</div>


   
  CSS: 

 

 

* {
	padding: 0px;
	margin: 0px;
}
a {
	text-decoration: none;
}
ul {
	list-style: outside none none;
}
.slider, .slider-panel img, .slider-extra {
	width: 650px;
	height: 413px;
}
.slider {
	text-align: center;
	margin: 30px auto;
	position: relative;
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
	position: absolute;
	z-index: 8;
}
.slider-panel {
	position: absolute;
}
.slider-panel img {
	border: none;
}
.slider-extra {
	position: relative;
}
.slider-nav {
	margin-left: -51px;
	position: absolute;
	left: 50%;
	bottom: 4px;
}
.slider-nav li {
	background: #3e3e3e;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	margin: 0 2px;
	overflow: hidden;
	text-align: center;
	display: inline-block;
	height: 18px;
	line-height: 18px;
	width: 18px;
}
.slider-nav .slider-item-selected {
	background: blue;
}
.slider-page a{
	background: rgba(0, 0, 0, 0.2);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
	color: #fff;
	text-align: center;
	display: block;
	font-family: "simsun";
	font-size: 22px;
	width: 28px;
	height: 62px;
	line-height: 62px;
	margin-top: -31px;
	position: absolute;
	top: 50%;
}
.slider-page a:HOVER {
	background: rgba(0, 0, 0, 0.4);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next {
	left: 100%;
	margin-left: -28px;
}

 

   
  JavaScript： 

 

 

$(document).ready(function() {
	var length,
		currentIndex = 0,
		interval,
		hasStarted = false, //是否已经开始轮播
		t = 3000; //轮播时间间隔
	length = $('.slider-panel').length;
	
	//将除了第一张图片隐藏
	$('.slider-panel:not(:first)').hide();
	//将第一个slider-item设为激活状态
	$('.slider-item:first').addClass('slider-item-selected');
	//隐藏向前、向后翻按钮
	$('.slider-page').hide();
	
	//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
	$('.slider-panel, .slider-pre, .slider-next').hover(function() {
		stop();
		$('.slider-page').show();
	}, function() {
		$('.slider-page').hide();
		start();
	});
	
	$('.slider-item').hover(function(e) {
		stop();
		var preIndex = $(".slider-item").filter(".slider-item-selected").index();
		currentIndex = $(this).index();
		play(preIndex, currentIndex);
	}, function() {
		start();
	});
	
	$('.slider-pre').unbind('click');
	$('.slider-pre').bind('click', function() {
		pre();
	});
	$('.slider-next').unbind('click');
	$('.slider-next').bind('click', function() {
		next();
	});
	
	/**
	 * 向前翻页
	 */
	function pre() {
		var preIndex = currentIndex;
		currentIndex = (--currentIndex + length) % length;
		play(preIndex, currentIndex);
	}
	/**
	 * 向后翻页
	 */
	function next() {
		var preIndex = currentIndex;
		currentIndex = ++currentIndex % length;
		play(preIndex, currentIndex);
	}
	/**
	 * 从preIndex页翻到currentIndex页
	 * preIndex 整数，翻页的起始页
	 * currentIndex 整数，翻到的那页
	 */
	function play(preIndex, currentIndex) {
		$('.slider-panel').eq(preIndex).fadeOut(500)
			.parent().children().eq(currentIndex).fadeIn(1000);
		$('.slider-item').removeClass('slider-item-selected');
		$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
	}
	
	/**
	 * 开始轮播
	 */
	function start() {
		if(!hasStarted) {
			hasStarted = true;
			interval = setInterval(next, t);
		}
	}
	/**
	 * 停止轮播
	 */
	function stop() {
		clearInterval(interval);
		hasStarted = false;
	}
	
	//开始轮播
	start();
});
 

 

         首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。
 

         事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、
 

         轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。
 
 

上面的js写的比较散，结构也不太好，读起来也比较费力，也不易使用，耦合度较高。下篇将给出一个纯粹的jquery轮播插件， 该插件可以定制各种效果，方便的配置以及可扩展。
 
 

-----------------------------------------------------------------------------------
 


 
 

下面是整体的代码：
 
 

index.html
 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery轮播效果图 - by RiccioZhang</title>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<style type="text/css">
	* {
		padding: 0px;
		margin: 0px;
	}
	a {
		text-decoration: none;
	}
	ul {
		list-style: outside none none;
	}
	.slider, .slider-panel img, .slider-extra {
		width: 650px;
		height: 413px;
	}
	.slider {
		text-align: center;
		margin: 30px auto;
		position: relative;
	}
	.slider-panel, .slider-nav, .slider-pre, .slider-next {
		position: absolute;
		z-index: 8;
	}
	.slider-panel {
		position: absolute;
	}
	.slider-panel img {
		border: none;
	}
	.slider-extra {
		position: relative;
	}
	.slider-nav {
		margin-left: -51px;
		position: absolute;
		left: 50%;
		bottom: 4px;
	}
	.slider-nav li {
		background: #3e3e3e;
		border-radius: 50%;
		color: #fff;
		cursor: pointer;
		margin: 0 2px;
		overflow: hidden;
		text-align: center;
		display: inline-block;
		height: 18px;
		line-height: 18px;
		width: 18px;
	}
	.slider-nav .slider-item-selected {
		background: blue;
	}
	.slider-page a{
		background: rgba(0, 0, 0, 0.2);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
		color: #fff;
		text-align: center;
		display: block;
		font-family: "simsun";
		font-size: 22px;
		width: 28px;
		height: 62px;
		line-height: 62px;
		margin-top: -31px;
		position: absolute;
		top: 50%;
	}
	.slider-page a:HOVER {
		background: rgba(0, 0, 0, 0.4);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
	}
	.slider-next {
		left: 100%;
		margin-left: -28px;
	}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		var length,
			currentIndex = 0,
			interval,
			hasStarted = false, //是否已经开始轮播
			t = 3000; //轮播时间间隔
		length = $('.slider-panel').length;
		
		//将除了第一张图片隐藏
		$('.slider-panel:not(:first)').hide();
		//将第一个slider-item设为激活状态
		$('.slider-item:first').addClass('slider-item-selected');
		//隐藏向前、向后翻按钮
		$('.slider-page').hide();
		
		//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
		$('.slider-panel, .slider-pre, .slider-next').hover(function() {
			stop();
			$('.slider-page').show();
		}, function() {
			$('.slider-page').hide();
			start();
		});
		
		$('.slider-item').hover(function(e) {
			stop();
			var preIndex = $(".slider-item").filter(".slider-item-selected").index();
			currentIndex = $(this).index();
			play(preIndex, currentIndex);
		}, function() {
			start();
		});
		
		$('.slider-pre').unbind('click');
		$('.slider-pre').bind('click', function() {
			pre();
		});
		$('.slider-next').unbind('click');
		$('.slider-next').bind('click', function() {
			next();
		});
		
		/**
		 * 向前翻页
		 */
		function pre() {
			var preIndex = currentIndex;
			currentIndex = (--currentIndex + length) % length;
			play(preIndex, currentIndex);
		}
		/**
		 * 向后翻页
		 */
		function next() {
			var preIndex = currentIndex;
			currentIndex = ++currentIndex % length;
			play(preIndex, currentIndex);
		}
		/**
		 * 从preIndex页翻到currentIndex页
		 * preIndex 整数，翻页的起始页
		 * currentIndex 整数，翻到的那页
		 */
		function play(preIndex, currentIndex) {
			$('.slider-panel').eq(preIndex).fadeOut(500)
				.parent().children().eq(currentIndex).fadeIn(1000);
			$('.slider-item').removeClass('slider-item-selected');
			$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
		}
		
		/**
		 * 开始轮播
		 */
		function start() {
			if(!hasStarted) {
				hasStarted = true;
				interval = setInterval(next, t);
			}
		}
		/**
		 * 停止轮播
		 */
		function stop() {
			clearInterval(interval);
			hasStarted = false;
		}
		
		//开始轮播
		start();
	});
</script>
</head>
<body>
	<div class="slider">
		<ul class="slider-main">
			<li class="slider-panel">
				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/1.jpg"></a>
			</li>
			<li class="slider-panel">
				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/2.jpg"></a>
			</li>
			<li class="slider-panel">
				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/3.jpg"></a>
			</li>
			<li class="slider-panel">
				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/4.jpg"></a>
			</li>
		</ul>
		<div class="slider-extra">
			<ul class="slider-nav">
				<li class="slider-item">1</li>
				<li class="slider-item">2</li>
				<li class="slider-item">3</li>
				<li class="slider-item">4</li>
			</ul>
			<div class="slider-page">
				<a class="slider-pre" href="javascript:;;"><</a>
				<a class="slider-next" href="javascript:;;">></a>
			</div>
		</div>
	</div>
</body>
</html>
 

 

至此一个简单的jquery轮播效果就完成了，当然还有很多需要改进的地方。
 

本篇文章的源代码可以在如下几个地址下载：
 

  • CSDN下载点击这里 (http://download.csdn.net/detail/qq791967024/8993769)
  • GitHub下载点击这里(https://github.com/ricciozhang/zslider_simple)
     
 

参考资料：
 

  1.  
    IE8下实现兼容rgba(透明效果)
     
  2. jquery官方api
  3. CSS3 opacity 属性
     

                

        

        

    




    

      

        

            

              
                
                  coder-qi
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    5
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    19
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
jQuery实现轮播图效果demo

				
			

			

				

					01-19
				

			

		

		

			
				
本文实例为大家分享了jQuery实现轮播图效果的具体代码，供大家参考，具体内容如下 效果展示：  编程思路： 1. 首先是基础的布局，使用”子绝父相”等页面布局方法，将图片、左右按钮以及每张图片下方对应的标识小...

			
		

	



                

              
                



	

		

			

				
					
背景 back-ground

				
			

			

				

					m0_55832273的博客
				

				

					04-01
					
					1147
					
				

			

		

		

			
				
背景 back-ground
【tips】背景色与背景图是可以一起设置的。
1.背景颜色 （掌握）

背景色 background-color
有三种表达方式：

单词 （颜色英文名称） 例:（red、green、blue） 。
十六进制：
1.RGB  。例：【background-color: rgb(0, 0, 0);】。
2.RGBA （A指的是透明度）。 例：【background-color：rgba（0，0，0，0.5）】。
3.直接写十六进制数值，前面必须加‘#’，否则不生效 。例：(bac

			
		

	



                


  
              

                


	

		

			

				
					
jquery 页眉单行信息滚动显示

				
			

			

				

					weixin_34153893的博客
				

				

					06-09
					
					69
					
				

			

		

		

			
				


JSP:
下面是控制滚动的样式。将滚动的内容查询出来。放在一个div 或者别的容器里面，我这里使用的是&lt;dt&gt;
&lt;style&gt;
#newCglist{width:300px;height:14px;line-height:14px;overflow:hidden}
#newCglist li{height:14px;padding-left:10px;}
...

			
		

	





	

		

			

				
					
HTML轮播图片，实现占满整个页面的轮播图

					
最新发布

				
			

			

				

					xiaozhou_cq的博客
				

				

					10-20
					
					1023
					
				

			

		

		

			
				
用js实现轮播效果，不管图片尺寸是多少，都能自适应整个页面，下面是一个简单的demo。

			
		

	



		

			
		



	

		

			

				
					
用jQuery实现轮播图——超简单(代码解释)

				
			

			

				

					weixin_48466991的博客
				

				

					09-03
					
					1万+
					
				

			

		

		

			
				
鼠标悬浮时停止轮播，离开时自动轮播，点下一张小圆点会随着动。这里只要把图片地址更换一下 ，引用jquery文件就可以了。// 控制图片显示隐藏,小圆点背景色。/* 5张图片叠加到一块 *//* 左右箭头 */

			
		

	





	

		

			

				
					
Jquery实现轮播图与文字联动

				
			

			

				

					mumumu_mu的博客
				

				

					03-19
					
					899
					
				

			

		

		

			
				
**
Jquery实现轮播图与文字联动
**
完整代码如下：




			
		

	





	

		

			

				
					
基于jQuery实现无缝轮播与左右点击效果

				
			

			

				

					12-29
				

			

		

		

			
				
在网页中我们想要的无缝轮播左右循环有好多好多中，这是我第一个轮播效果，也是最基础的，和大家分享一下，对于初学者希望你们能有所借鉴，对于大神我想让你们尽情的虐我给我宝贵的意见。 这个是我要的效果  进入...

			
		

	





	

		

			

				
					
使用jQuery制作基础的Web图片轮播效果

				
			

			

				

					10-22
				

			

		

		

			
				
主要介绍了使用jQuery制作基础的Web图片轮播效果的实例,鼠标悬停时可停止而离开时可自动轮播,文中还介绍了一种使用zslider插件来实现的方法,比较犀利,需要的朋友可以参考下

			
		

	





	

		

			

				
					
jquery实现定时自动轮播特效

				
			

			

				

					01-19
				

			

		

		

			
				
这次的轮播图是在上一篇文章jQuery手动点击实现图片轮播特效的基础上写出来的，也就是本次展示的是手动点击轮播效果以及定时自动轮播效果的程序，建议想连贯学习的小伙伴把我之前的文章看一看，看完后再看这篇文章~~...

			
		

	





	

		

			

				
					
利用jquery.carousel.js实现自动轮播旋转木马效果（带前后按钮和小按钮5个）

				
			

			

				

					05-11
				

			

		

		

			
				
在 jquery.carousel.js插件基础上做了改进，添加了索引按钮。

			
		

	





	

		

			

				
					
jsp图片轮播html

				
			

			

				

					07-16
				

			

		

		

			
				
jsp 生成的html5图片轮播，已测试。支持图片预览

			
		

	





	

		

			

				
					
基于Jquery-1.9.1.js的轮播图，兼容低版本ie

				
			

			

				

					05-03
				

			

		

		

			
				
NULL
博文链接：https://yuyongkun4519.iteye.com/blog/2428399

			
		

	





	

		

			

				
					
jQuery实现轮播图

				
			

			

				

					qq_54998648的博客
				

				

					11-07
					
					1550
					
				

			

		

		

			
				
jQuery实现轮播图

			
		

	





	

		

			

				
					
jQuery实现图片轮播效果，jQuery实现焦点新闻

				
			

			

				

					不积跬步无以至千里，不积小流无以成江海。
				

				

					05-28
					
					1万+
					
				

			

		

		

			
				
效果图：


实现代码：


	
		图片轮播，新闻轮播，焦点新闻轮播
		
		
		
			$(document).ready(function(){		   
				var index=0;
				var slideFlag = true;
				var length=$(".roll-news-image img").length;

				function showImg

			
		

	





	

		

			

				
					
ECharts属性设置

					
热门推荐

				
			

			

				

					she_lover的专栏
				

				

					05-18
					
					12万+
					
				

			

		

		

			
				
theme = { 
    // 全图默认背景 
    // backgroundColor: ‘rgba(0,0,0,0)’,// 默认色板
color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
        '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
        '

			
		

	





	

		

			

				
					
【黑马前端—CSS基础】背景

				
			

			

				

					学习如逆水行舟，不进则退
				

				

					08-30
					
					910
					
				

			

		

		

			
				
内容来自b站的黑马程序员pink老师
由我收集整理
总结

CSS 的背景
通过 CSS 背景属性，可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
背景颜色
background-color 属性定义了元素的背景颜色。
background-color:颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色
background-color:transparent;

背景图片
backgro

			
		

	





	

		

			

				
					
background:rgba（）兼容性

				
			

			

				

					肖肖肖丽珠的博客
				

				

					09-28
					
					1万+
					
				

			

		

		

			
				
background:rgba（r,g,b,opacity）是设置为半透明的背景色。但是他具有兼容性，在ie浏览器里不显示背景色。

开始我以为只要单独设颜色和透明度就好了。但是你一旦用opacity和filter设置背景色，这个节点里面的元素也会透明，不单单是背景色透明了。所以还是不行。看到一种说法是利用滤镜。原文的链接在这里http://www.zhangxinxu.com/wordpre

			
		

	





	

		

			

				
					
Myeclispe 导入css空指针异常  background: rgba(0, 0, 0, 0.3)

				
			

			

				

					qq_38278933的博客
				

				

					11-08
					
					2827
					
				

			

		

		

			
				
background: rgba(0, 0, 0, 0.3);
改成background-color: rgba(0, 0, 0, 0.3); 


md找了一个小时。。。这都能报空指针异常。。。

			
		

	





	

		

			

				
					
background:rgba()

				
			

			

				

					Clownfishl的博客
				

				

					03-12
					
					2万+
					
				

			

		

		

			
				
RGBA

			
		

	





	

		

			

				
					
《jquery高级编程》 jd

				
			

			

				

					07-22
				

			

		

		

			
				
更进一步，书中还详细讲解了如何使用jQuery实现Ajax异步请求，包括Ajax的基本使用、处理返回数据、错误处理等。此外，书中还介绍了如何进行跨域请求、使用JSONP等相关技术。  最重要的是，该书还涉及了如何开发...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值