jquery幻灯片

2024-12-15 技术教程

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>index</title><style>*{margin:0px;padding:0px;}li{list-style:none;}#slide{width:100%;height:420px;overflow:hidden;position:relative;}#slide.slide-box{width:100%;height:420px;position:relative;}#slide.slide-boxli{background-position:50%0px;background-repeat:no-repeat;width:100%;height:420px;overflow:hidden;position:absolute;left:0px;top:0px;opacity:0;filter:alpha(opacity=0);}#slide.slide-boxlidiv{width:755px;height:420px;position:relative;margin:0pxauto;}#slide.slide-boxlib{width:760px;height:210px;display:block;position:absolute;left:0px;top:-40px;background-position:20px0px;background-repeat:no-repeat;z-index:1;opacity:0;filter:alpha(opacity=0);}#slide.slide-boxlia{width:755px;height:420px;background:url(./p_w_picpaths/spaceball.gif);display:block;position:absolute;left:0px;top:0px;z-index:2;}#slide.slide-nav{width:100%;height:30px;position:absolute;bottom:0px;left:0px;z-index:3;}#slide.slide-nav.slide-nav-box{width:755px;height:30px;line-height:30px;margin:0pxauto;}#slide.slide-nav.slide-nav-boxa{display:inline-block;width:14px;height:14px;border-radius:50%;background:#b5b5b5;margin:0px3px;}#slide.slide-nav.slide-nav-boxa.active{background:#c80002;}</style><scriptsrc="jquery.js"type="text/javascript"></script><scripttype="text/javascript">$(function(){//得到这群图片livaroLis=$('#slide.slide-boxli');//得到小圆圈的对象组varoPage=$('#slide.slide-nava');varlens=oLis.size();//定义一个定时器varoTimer=null;//遍历oPage.each(function(index){$(this).mouseover(function(){//将索引传入函数slideRun(index);})});//动起来的函数functionslideRun(index){iNow=index;//1--小圆圈--先给自己加上，去除兄弟的样式oPage.eq(index).addClass('active').siblings().removeClass('active');//2--图片--opacity:0//开始一个动画之前停止所有之前的动画oLis.eq(index).siblings().stop().animate({opacity:0},600).find('b').stop().animate({//3--小文字向上并消失top:-40,opacity:0},600);oLis.eq(index).stop().animate({opacity:1},600).find('b').stop().animate({//小文字向下并显示opacity:1,top:-10},600);}//当前显示第几张variNow=0;autoRun();functionautoRun(){oTimer=setInterval(function(){if(iNow>lens-1){//边界控制iNow=0;}slideRun(iNow);iNow++;},5000);}//oLis.hover(function(){//鼠标放上去--->图片停止//清除定时器clearInterval(oTimer);},function(){//鼠标移开----->图片开始自动切换autoRun();})})</script></head><body><divid="slide"><ulclass='slide-box'><li><div><b></b><ahref="javascript:void(0);"></a></div></li><li><div><b></b><ahref="javascript:void(0);"></a></div></li><li><div><b></b><ahref="javascript:void(0);"></a></div></li><li><div><b></b><ahref="javascript:void(0);"></a></div></li><li><div><b></b><ahref="javascript:void(0);"></a></div></li></ul><divclass='slide-nav'><divclass='slide-nav-box'><aclass='active'href="javascript:void(0);"></a><ahref="javascript:void(1);"></a><ahref="javascript:void(2);"></a><ahref="javascript:void(3);"></a><ahref="javascript:void(4);"></a></div></div></div></body></html>