首页 > 代码库 > 幻灯片特效
幻灯片特效
开篇先来个简单的，写一个幻灯片特效。
效果图:
这是这个例子中完整的代码：
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属性值。这样就看到了类似幻灯片的过度效果。
本例子中的思路非原创。代码是经过看别人例子时，自己斟酌出来的。
如果读者有新想法，欢迎一起探讨交流~
幻灯片特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。