下载地址：/detail/yx511500623/6543857
示例:
<html><head><meta charset="UTF-8"><script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript">var first,last;$(document).ready(function(){first=$(".item:first");last=$(".item:last");$(".item:not(:first)").hide();$(".slider_img").wrap("<a href=''></a>");fangun();initSpan();});/***翻滚轮播特效*/function fangun(){var currentItem=$(".item:visible"),nextItem=$(".item:visible").next();if(currentItem.is(last)){nextItem=first;}//淡出currentItem.fadeOut("slow",function(){//淡入nextItem.fadeIn("slow",function(){setTimeout(fangun,2000);});});}/***跳转*/function turnTo(index){var currentItem=$(".item:visible"),nextItem=$(".item").eq(index);//关闭所有动画$.fx.off = true;//所有淡出$(".item").hide();//淡入nextItem.fadeIn("fast",function(){$.fx.off = false;});}function initSpan(){$(".show_index").each(function(i){$(this).val(i);console.log(i);});$(".show_index").click(function(index){turnTo($(this).val());});}</script><title>javascript和jquery特效练习</title><style type="text/css">.item{list-style-type:none;display:inline;}#content{margin: auto 0;}ul{margin: auto 0;text-align: center;}/**当你定义的CSS中有position属性值为absolute、relative或fixed，用z-index此取值方可生效。此属性参数值越大，则被层叠在最上面。*/.item,#ul,#show{position:relative;}#show{z-index:9999;bottom: 20px;}.show_index{border: 1px solid red;cursor: pointer;background: #888888;color:#f00;}</style></head><body><div id="content"><ul id="nav"><li class="item"><img class="slider_img" src="images/slider1.jpg" alt="slider1.jpg"></li><li class="item"><img class="slider_img" src="images/slider2.jpg" alt="slider2.jpg"></li><li class="item"><img class="slider_img" src="images/slider3.jpg" alt="slider3.jpg"></li><li style="list-style-type:none"><div id="show"><span class="show_index">1</span><span class="show_index">2</span><span class="show_index">3</span></div></li></ul></div></body></html>
