当前位置：首页 → 问答吧 → 黑白电视里面嵌套JQuery幻灯

黑白电视里面嵌套JQuery幻灯

时间：2010-05-17

来源：互联网

演示:http://www.gzse7en.com/ad/71/index.html
原文：http://www.gzse7en.com/html/124-5/5358.htm
代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>怀旧电视机里面的幻灯效果--Gdesign学习网</title> <style type="text/css"> body{ margin:0; padding:0; font-size:12px;} #wray{ margin:0 auto; width:372px; height:auto; overflow: hidden;} #top{ width:372px; height:25px; background:url(http://www.gzse7en.com/ad/71/images/index_01.gif) no-repeat;} #main_left{ width:19px; height:302px; background:url(http://www.gzse7en.com/ad/71/images/index_02.gif) no-repeat; float:left;} #flashhot{ width:272px; height:302px; float:left;} #main_right{ width:81px; height:302px; background:url(http://www.gzse7en.com/ad/71/images/index_04.gif) no-repeat; float:right;} #bottom{ width:372px; height:27px; background:url(http://www.gzse7en.com/ad/71/images/index_05.gif) no-repeat;} .clear{ clear:both;} /*幻灯片*/ #picBox{width:272px; height:302px;overflow:hidden; position:relative;} #picBox ul#show_pic{ margin:0; padding:0; list-style:none; height:302px; width:816px; position:absolute;} #picBox ul#show_pic li{ float:left; margin:0; padding:0; height:302px;} #picBox ul#show_pic li img{ display:block;} #icon_num{ position:absolute; bottom:10px; right:10px;} #icon_num li{ float:left; background:urlhttp://www.gzse7en.com/ad/71/(http://www.gzse7en.com/ad/71/images/flashbutton.gif) no-repeat -15px 0;width:15px; height:15px; list-style:none; color:#39F; text-align:center; cursor:pointer; padding:0; margin:0;margin-right:5px;} #icon_num li:hover,#icon_num li.active{ background:url(http://www.gzse7en.com/ad/71/images/flashbutton.gif) no-repeat 0 0; color:#fff;} </style> </head> <body> <div id="wray"> <div id="top"></div> <div id="main_left"></div> <div id="flashhot">  <div id="picBox"> <ul id="show_pic" style="left:0;"> <li><img src="http://www.gzse7en.com/ad/71/images/1.jpg" width="272" height="302" border="0" /></li> <li><img src="http://www.gzse7en.com/ad/71/images/2.jpg" width="272" height="302" border="0" /></li> <li><img src="http://www.gzse7en.com/ad/71/images/3.jpg" width="272" height="302" border="0" /></li> </ul> <ul id="icon_num"> <li class="active">1</li> <li>2</li> <li>3</li> </ul> <script type="text/javascript" src="http://www.gzse7en.com/ad/71/js/jq.js"></script> </div> </div> <div id="main_right"></div> <div class="clear"></div> <div id="bottom"></div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 gzse7en 于 2010-5-17 17:42 编辑 ]

作者: gzse7en 发布时间: 2010-05-17

比较好玩哦！

作者: dongtso 发布时间: 2010-05-18