jquery图片淡入淡出切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery图片淡入淡出切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片淡入淡出切换特效</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.simple_slider.js" type="text/javascript"></script>
<style>
@charset "utf-8";
/*基本框架CSS*/
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
a img {border:0}
body { color: #333; text-align: center; font: 12px "宋体"; }
ul, ol, li {list-style-type:none;vertical-align:0}
a {outline-style:none;color:#535353;text-decoration:none}
a:hover { color: #D40000; text-decoration: none}
.kePublic{background:#FFF; padding:50px;}
/*基本框架CSS结束，应用特效时，以上样式可删除*/
/* 效果CSS开始 */
.objImgFrame { border: #000000 1px solid; padding: 4px; width: 120px; margin:0 auto }
.simple_slider_hover { cursor: pointer; cursor: hand }
.simple_slider_disabled { opacity : 0.2; filter: alpha(opacity=20); zoom: 1; }
#imgBox{float:left;}
#leftNav{float:left; margin:60px 10px 0 0; cursor:pointer}
#rightNav{float:left; margin:60px 0 0 10px; cursor:pointer}
#holder{width:670px; margin:0 auto; height:180px;}
/* 效果CSS结束 */
</style>
<script>
jQuery(document).ready(function(){
	jQuery('#holder').show();
	jQuery('#imgBox').simple_slider({
		'leftID': 'leftNav',
		'rightID': 'rightNav',
		'display': 4
	})
});
</script>
</head>
<body>
<div class="kePublic">
<!--效果html开始-->
<div id='holder' style='display:none;'>
<img src='images/left.png' id='leftNav' />
<span id='imgBox'>
<img src='images/01.jpg' class='objImgFrame' />
<img src='images/02.jpg' class='objImgFrame' />
<img src='images/03.jpg' class='objImgFrame' />
<img src='images/04.jpg' class='objImgFrame' />
<img src='images/05.jpg' class='objImgFrame' />
<img src='images/06.jpg' class='objImgFrame' />
<img src='images/07.jpg' class='objImgFrame' />
<img src='images/08.jpg' class='objImgFrame' />
<img src='images/09.jpg' class='objImgFrame' />
<img src='images/10.jpg' class='objImgFrame' />
</span>
<img src='images/right.png' id='rightNav' />
</div>
<!--效果html结束-->
</div>
</body>
</html>

JS代码(jquery.simple_slider.js):

/* * Simple Image Slider * Read more at:http://stuff.nekhbet.ro/2009/06/23/simple-image-gallery-navigation-slider-plugin-in-jquery.html * Version:1.0.1 * Copyright (c) 2009 Trimbitas Sorin-Iulian * Free of use (personal and commercial) as long as you keep this header in the file * Requires:jQuery v1.3+*/
;
	(function($){
	var totalCount = 0,selector,options,firstPos = 0,isRunning = false;
	$.fn.simple_slider = function(settings){
	settings = $.extend({
}
,$.fn.simple_slider.defaults,settings);
	selector = this.selector;
	options = settings;
	//get the number of imagestotalCount = $(selector + " img").size();
	//init_init();
	function _init(){
	//hide them all (with the exception of the first X images)$(selector + " img").each(function(i){
	if (i >= options.display){
	this.style.display = "none";
}
}
);
	//put actions (onclick) on the buttons for navigation//left$("#" + options.leftID).click(function (){
	if (isRunning == false){
	_goLeft();
}
}
);
	$("#" + options.leftID).hover(function (){
	$(this).addClass("simple_slider_hover");
}
,function (){
	$(this).removeClass("simple_slider_hover");
}
);
	//right$("#" + options.rightID).click(function (){
	if (isRunning == false){
	_goRight();
}
}
);
	$("#" + options.rightID).hover(function (){
	$(this).addClass("simple_slider_hover");
}
,function (){
	$(this).removeClass("simple_slider_hover");
}
);
	$("#" + options.leftID).addClass("simple_slider_disabled");
	_checkNavigation();
}
function _goLeft(){
	isRunning = true;
	if (firstPos > 0){
	//remove the last one$(selector + " img:eq("+ (firstPos + options.display - 1) + ")").fadeOut("slow",function (){
	firstPos--;
	//add one from the beginning$(selector + " img:eq("+ (firstPos) +")").fadeIn("slow",function(){
	isRunning = false;
	_checkNavigation();
}
);
}
);
}
else{
	isRunning = false;
}
}
function _goRight(){
	isRunning = true;
	if (firstPos + options.display < totalCount){
	//remove the first one$(selector + " img:eq("+ firstPos +")").fadeOut("slow",function (){
	firstPos++;
	//add one from the end$(selector + " img:eq("+ (firstPos + options.display - 1) +")").fadeIn("slow",function(){
	isRunning = false;
	_checkNavigation();
}
);
}
);
}
else{
	isRunning = false;
}
}
function _checkNavigation(){
	//leftif (firstPos == 0){
	$("#" + options.leftID).addClass("simple_slider_disabled");
}
else{
	$("#" + options.leftID).removeClass("simple_slider_disabled");
}
//rightif ( (firstPos + options.display) >= totalCount){
	$("#" + options.rightID).addClass("simple_slider_disabled");
}
else{
	$("#" + options.rightID).removeClass("simple_slider_disabled");
}
}
}
$.fn.simple_slider.defaults ={
	display:2,leftID:null,rightID:null}
;
}
)(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)