<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-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-box li{ 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-box li div{ width:755px; height:420px; position:relative; margin:0px auto; } #slide .slide-box li b{ width:760px; height:210px; display:block; position:absolute; left:0px; top:-40px; background-position:20px 0px; background-repeat:no-repeat; z-index:1; opacity:0; filter:alpha(opacity=0); } #slide .slide-box li a{ 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:0px auto; } #slide .slide-nav .slide-nav-box a{ display:inline-block; width:14px; height:14px; border-radius:50%; background:#b5b5b5; margin:0px 3px; } #slide .slide-nav .slide-nav-box a.active{ background:#c80002; } </style> <script src="jquery.js" type="text/javascript"> </script> <script type="text/javascript"> $(function(){ //得到这群图片li var oLis = $('#slide .slide-box li'); //得到小圆圈的对象组 var oPage = $('#slide .slide-nav a'); var lens = oLis.size(); //定义一个定时器 var oTimer = null; //遍历 oPage.each(function(index){ $(this).mouseover(function(){ //将索引传入函数 slideRun(index); }) }); //动起来的函数 function slideRun(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); } //当前显示第几张 var iNow = 0; autoRun(); function autoRun(){ oTimer = setInterval(function(){ if(iNow > lens-1){ //边界控制 iNow = 0; } slideRun(iNow); iNow++; },5000); } // oLis.hover(function(){ //鼠标放上去--->图片停止 //清除定时器 clearInterval(oTimer); },function(){ //鼠标移开----->图片开始自动切换 autoRun(); }) }) </script> </head> <body> <div id="slide"> <ul class='slide-box'> <li > <div> <b > </b> <a href="javascript:void(0);"> </a> </div> </li> <li > <div> <b > </b> <a href="javascript:void(0);"> </a> </div> </li> <li > <div> <b > </b> <a href="javascript:void(0);"> </a> </div> </li> <li > <div> <b > </b> <a href="javascript:void(0);"> </a> </div> </li> <li > <div> <b > </b> <a href="javascript:void(0);"> </a> </div> </li> </ul> <div class='slide-nav'> <div class='slide-nav-box'> <a class='active' href="javascript:void(0);"> </a> <a href="javascript:void(1);"> </a> <a href="javascript:void(2);"> </a> <a href="javascript:void(3);"> </a> <a href="javascript:void(4);"> </a> </div> </div> </div> </body> </html>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
