开篇先来个简单的，写一个幻灯片特效。
效果图:
这是这个例子中完整的代码：
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" />
<link type="text/css" rel="stylesheet" href="./css/focus.css" />
<title>幻灯片特效 在线演示 DIVCSS5</title>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/sl-1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#navSlider").navSlider();
});
</script>
</head>
<body>
<div class="navBg">
<div class="navSlider" id="navSlider">
<ul class="imgLi">
<li style="background-image:url(./img/images_nav/img1.jpg);"></li>
<li style="background-image:url(./img/images_nav/img2.jpg);"></li>
<li style="background-image:url(./img/images_nav/img3.jpg);"></li>
<li style="background-image:url(./img/images_nav/img4.jpg);"></li>
<li style="background-image:url(./img/images_nav/img5.jpg);"></li>
<li style="background-image:url(./img/images_nav/img6.jpg);"></li>
</ul>
</div>
</div>
</body>
</html>
css：
/*nav*/
div.navBg{background: url(../img/images_nav/loading.gif) 50% 50% no-repeat; width:100%; height: 400px;text-align:center;border-radius:15px;overflow:hidden;box-shadow:10px 10px 20px #888888;}
div.navSlider{width:100%;height:100%;display:block;position:relative;overflow:hidden;cursor:pointer;}
div.navSlider ul.imgLi{list-style-type:none;width:100%;height:100%;position:absolute;margin:0px;padding:0px;}
div.navSlider ul.imgLi li{background-position:50% 50%; background-repeat: no-repeat;width:100%;height:400px;opacity:0;z-index:0;float:left;margin-left:0%;position:absolute;}
div.navSlider ol{position:absolute;bottom:15px;width:100%;height:14px;list-style-type:none;z-index:2;}
div.navSlider ol li.orderIndex{background:url(../img/images_nav/dot.png) 100% 100% no-repeat; width:14px; height:14px;display:inline-block;margin:0 5px;overflow:hidden;opacity:1;}
div.navSlider ol li.orderIndex a{line-height: 44px;width:14px;height:14px;overflow:hidden;display:inline-block;cursor:pointer;}
div.navSlider ol li.mouseClick{background-position:0% 0%;}
div.navSlider ol li.onHover{cursor:pointer;width:14px;height:14px;display:inline-block;}
div.navSlider ul.sliderBtn{position:absolute;z-index:3;width:100%;height:50px;top:45%;}
div.navSlider ul.sliderBtn li{height:50px; margin:0px; padding:0px;list-style-type:none;display:inline-block;opacity:0.5;cursor:pointer;}
div.navSlider ul.sliderBtn li:first-child{background:url(../img/images_nav/prev.png) 50% 50% no-repeat; width:50px;float:left;margin-left:60px;}
div.navSlider ul.sliderBtn li:last-child{background:url(../img/images_nav/next.png) 50% 50% no-repeat;width:50px;float:right;margin-right:60px;}
div.navSlider ul.sliderBtn li.mouseEnter{opacity:1;}
jQuery：
;(function($){
$.fn.extend({
"navSlider": function(){
var selector = $(this),
liLength = selector.find("ul li").size(),
index = 0,
olHtml = "<ol>";
while(index++ < liLength){
olHtml+="<li class=‘orderIndex‘><a>"+index+"</a></li>";
}
olHtml +="</ol><ul class=‘sliderBtn‘><li class=‘btnDirection pre‘></li><li class=‘btnDirection next‘></li></ul>";
selector.append(olHtml);
index = 0;
selector.find(".btnDirection").hover(function(){
$(this).toggleClass("mouseEnter");
});
selector.find(".orderIndex").click(function(){
selector.children().eq(0).children().stop(true, false).eq($(this).index()).animate({"opacity":"1","z-index":"1"},2000).siblings().animate({"opacity":"0","z-index":"0"},1000);
$(this).toggleClass("mouseClick").siblings().removeClass("mouseClick");
index = $(this).index();
}).eq(index).click();
selector.find(".sliderBtn").find(".next").click(function(){
selector.find(".orderIndex").eq(++index < liLength?index:0).click();
}).end().find(".pre").click(function(){
selector.find(".orderIndex").eq(--index<0?liLength-1:index).click();
});
selector.bind("mousewheel",function(event,isUp){
if((event.wheelDelta && event.wheelDelta > 0) || (event.detail && event.detail < 0)){//up
selector.find(".pre").trigger("click");
}else if((event.wheelDelta && event.wheelDelta < 0) || (event.detail && event.detail > 0)){
selector.find(".next").trigger("click");
}
event.preventDefault();
event.stopPropagation();
});
}
});
})(jQuery);
在这个例子中，我给class为navBg的div设置了一个背景图（loading.gif）.当点击上下按钮进行图片交替的时候，修改ul中li的style样式中opacity,z-index属性值。这样就看到了类似幻灯片的过度效果。
本例子中的思路非原创。代码是经过看别人例子时，自己斟酌出来的。
如果读者有新想法，欢迎一起探讨交流~
时间： 2024-08-25 00:03:17