大图淡入淡出图片幻灯演示效果特效代码

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

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

以下是大图淡入淡出图片幻灯演示效果特效代码的示例演示效果:

当前平台(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=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为大图淡入淡出图片幻灯演示效果，属于站长常用代码" />
<title>大图淡入淡出图片幻灯演示效果</title>
<link href="css/styles.css" type=text/css rel=stylesheet>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#slider').s3Slider({
  timeOut:5000
 });
});
</script>
</head>
<body >

<div id="slider" style="left:0px; top:0px; right:0px;">
 <ul id="sliderContent">
  <li class="sliderImage">
   <img src="images/001.jpg" width="1200" height="600" alt="标题">
   <span class="bottom">董世建筑是一个充满设计激情与创造力、集先进设计施工理念，对客户了解入微并极其负责的团队。</span>
  </li>
  <li class="sliderImage">
   <img src="images/002.jpg" width="1200" height="600" alt="标题">
   <span class="bottom">公司的成员包括城市规划师，建筑师，室内设计师。</span>
  </li>
  <li class="sliderImage">
   <img src="images/003.jpg" width="1200" height="600" alt="标题">
   <span class="bottom">创造的激情是驱动我们向前的重要因素，它是我们想象力的原动力，帮助我们实现概念和构思。</span>
  </li>
  <div class="clear sliderImage"></div>
 </ul>
</div>
</body>
</html>

JS代码(s3Slider.js):

(function($){
	$.fn.s3Slider = function(vars){
	var element = this;
	var timeOut = (vars.timeOut != undefined) ? vars.timeOut:4000;
	var current = null;
	var timeOutFn = null;
	var faderStat = true;
	var mOver = false;
	var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
	var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
	items.each(function(i){
	$(items[i]).mouseover(function(){
	mOver = true;
}
);
	$(items[i]).mouseout(function(){
	mOver = false;
	fadeElement(true);
}
);
}
);
	var fadeElement = function(isMouseOut){
	var thisTimeOut = (isMouseOut) ? (timeOut/2):timeOut;
	thisTimeOut = (faderStat) ? 10:thisTimeOut;
	if(items.length > 0){
	timeOutFn = setTimeout(makeSlider,thisTimeOut);
}
else{
	console.log("Poof..");
}
}
var makeSlider = function(){
	current = (current != null) ? current:items[(items.length-1)];
	var currNo = jQuery.inArray(current,items) + 1 currNo = (currNo == items.length) ? 0:(currNo - 1);
	var newMargin = $(element).width() * currNo;
	if(faderStat == true){
	if(!mOver){
	$(items[currNo]).fadeIn((timeOut/6),function(){
	if($(itemsSpan[currNo]).css('bottom') == 0){
	$(itemsSpan[currNo]).slideUp((timeOut/6),function(){
	faderStat = false;
	current = items[currNo];
	if(!mOver){
	fadeElement(false);
}
}
);
}
else{
	$(itemsSpan[currNo]).slideDown((timeOut/6),function(){
	faderStat = false;
	current = items[currNo];
	if(!mOver){
	fadeElement(false);
}
}
);
}
}
);
}
}
else{
	if(!mOver){
	if($(itemsSpan[currNo]).css('bottom') == 0){
	$(itemsSpan[currNo]).slideDown((timeOut/6),function(){
	$(items[currNo]).fadeOut((timeOut/6),function(){
	faderStat = true;
	current = items[(currNo+1)];
	if(!mOver){
	fadeElement(false);
}
}
);
}
);
}
else{
	$(itemsSpan[currNo]).slideUp((timeOut/6),function(){
	$(items[currNo]).fadeOut((timeOut/6),function(){
	faderStat = true;
	current = items[(currNo+1)];
	if(!mOver){
	fadeElement(false);
}
}
);
}
);
}
}
}
}
makeSlider();
}
;
}
)(jQuery);

CSS代码(styles.css):

HTML{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-TOP:0px;}
BODY{PADDING-RIGHT:0px;PADDING-LEFT:25px;FONT-WEIGHT:normal;FONT-SIZE:11px;PADDING-BOTTOM:30px;MARGIN:0px;COLOR:#aaaaaa;LINE-HEIGHT:18px;PADDING-TOP:30px;FONT-FAMILY:微软雅黑,sans-serif;BACKGROUND-COLOR:#565656;TEXT-ALIGN:left;TEXT-DECORATION:none;}
.margin_bottom_1{clear:both;overflow:hidden;width:100%;height:1px;BORDER-BOTTOM:#ff2a43 0.1em solid;font-size:1px;}
#slider{width:1200px;/* important to be same as image width */
 height:600px;/* important to be same as image height */
 position:relative;/* important */
 overflow:hidden;/* important */
}
#slider img{border:0px;left:0;margin-left:0;}
#sliderContent{width:100%;/* important to be same as image width or wider */
 position:absolute;top:0;margin-left:0;}
.sliderImage{float:left;position:relative;display:none;width:100%;height:600px;left:0;margin-left:0;}
.sliderImage img{float:left;position:relative;left:0;margin-left:0;}
.sliderImage span{position:absolute;font:14px 微软雅黑,sans-serif;padding:1px 9px;width:1198px;height:58px;line-height:46px;background-color:#000;filter:alpha(opacity=60);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;color:#fff;display:none;letter-spacing:0.3mm;}
.clear{clear:both;}
.sliderImage span strong{font-size:80%;}
.top{top:0;left:0;}
.bottom{bottom:0;left:0;}
ul{list-style-type:none;}

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