<!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(./images/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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 style="background-image:url(./images/1.jpg);opacity:1;filter:alpha(opacity=100);"> <div> <b style="background-image:url(./images/1.png);opacity:1;filter:alpha(opacity=100);"> </b> <a href="javascript:void(0);"> </a> </div> </li> <li style="background-image:url(./images/2.jpg);"> <div> <b > </b> <a href="javascript:void(0);"> </a> </div> </li> <li style="background-image:url(./images/3.jpg);"> <div> <b > </b> <a href="javascript:void(0);"> </a> </div> </li> <li style="background-image:url(./images/4.jpg);"> <div> <b style="background-image:url(./images/4.png);"> </b> <a href="javascript:void(0);"> </a> </div> </li> <li style="background-image:url(./images/5.jpg);"> <div> <b style="background-image:url(./images/5.png);"> </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>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦