jquery简单实现幻灯片的方法
本文实例讲述了jquery简单实现幻灯片的方法。分享给大家供大家参考。具体如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>幻灯片</title> <scripttype="text/javascript"src="js/jquery-1.11.1.min.js"></script> <styletype="text/css"> .slide{position:relative;overflow:hidden;} .slideimg{max-width:100%;position:absolute;left:0;top:0;} .slideimg:first-child{position:relative;visibility:visible;} </style> </head> <body> <divclass="slide"> <imgsrc="images/172233f3cyzidsc8rl8irz.jpg"/> <imgsrc="images/172231vxzvzz2xvk92d5m0.jpg"/> <imgsrc="images/172228jybldywbdwdflfzm.jpg"/> <imgsrc="images/172223i8otbbsot8b232o5.jpg"/> </div> <scripttype="text/javascript"> varsize=$('.slideimg').size(); var_index=size; vartimer=null; $('.slide').append($('.slideimg:eq(0)').clone()); timer=setInterval(function(){ $('.slideimg').eq(_index).fadeOut(800); _index==1?_index=size:_index--; $('.slideimg').eq(_index).fadeIn(800); },4000); </script> </body> </html>
希望本文所述对大家的jquery程序设计有所帮助。