毕业论文开发语言企业开发JAVA技术.NET技术WEB开发Linux/Unix数据库技术Windows平台移动平台嵌入式论文范文英语论文
您现在的位置: 毕业论文 >> WEB开发 >> 正文

css+jquery实现图片滑动效果源代码

更新时间:2013-3-12:  来源:毕业论文
css+jquery实现图片滑动效果源代码
用css+jquery 实现 图片滑动效果,哪位大侠有代码。
就是那种1234点击每个都会有不同图片显示在同一个地方的。
网上有,结果发现出不来。。。毕业论文 
<!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>无标题文档</title> <script src="http:-//dealer.xxauto-com/JS/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript">     $(document).ready(function(){         $("#tip span").bind("click",function(){             change($(this).html());            });         change(1);     });     var change = function(id){         if (typeof(isround)!='undefined') clearTimeout(isround);         var bigimg =$("#pic img");         var smallimg = $("#tip span");         var text = $("#text p");         smallimg.each(function(i){                bigimg.eq(i).attr("class","undis");             smallimg.eq(i).attr("class","");             text.eq(i).attr("class","undis");          });         bigimg.eq(id-1).attr("class","dis");         smallimg.eq(id-1).attr("class","current");         text.eq(id-1).attr("class","dis");         var next = id >= smallimg.size()?1:parseInt(id)+1;              isround=setTimeout('change('+next+')', 4000);     } </script> <style> body, p, ul, li, dd, dt, dl, ol, form, h1, h2, h3, h4, h5 { margin:0; padding:0; } body { font-size:12px; color:#000; text-align:left } i, em { font-style:normal; } img { border:none; vertical-align:middle; } ul, li { list-style:none; min-height:12px; } a { color:#555; text-decoration:none; } a:hover { color:#cc0000; text-decoration:underline; } .undis{display:none;} .dis{display:block!important;} #pic{position:absolute;top:0;left:0;z-index:9;width:308px;height:258px;} #pic img{width:308px;height:258px;float:left;} #textbg{position:absolute;left:0;bottom:0;z-index:99;width:308px;height:27px;background:url (http:-//mat1.gtimg-com/sports/nba2011/images/flash_bg.png);_background:none;filter:progid:DX ImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="http:-//mat1.gtimg-com/sports/nba2011/images/flash_bg.png");} #text{position:absolute;left:0;bottom:0;z-index:999;width:308px;height:27px;line-height:27px;color:#fff;} #text p{width:100%;height:27px;line-height:27px;color:#fff;text-align:center;font-size:14px;} #text p a{color:#fff;} #tip{width:308px;height:15px;position:absolute;right:0;bottom:28px;z-index:999;text-align:right;} #tip span{width:16px;height:15px;line-height:15px;background:#7B7B7B;cursor:pointer;display:inline-block;margin-left:1px;text-align:center;color:#fff;} #tip span.current{background:#000;} </style> </head> <body> <div id="pic">         <a href="http:-//zhibo.sports.qq-com/sports/1162/index.html"><img src="http:-//img1.gtimg-com/sports/pics/hv1/224/17/723/47017634.jpg" class="undis" border="0"></a>         <a href="http:-//sports.qq-com/a/20110220/000515.htm#p=1"><img src="http:-//img1.gtimg-com/sports/pics/hv1/184/194/722/46997704.jpg" class="undis" border="0"></a>          <a href="http:-//sports.qq-com/a/20110220/000465.htm"><img src="http:-//img1.gtimg-com/sports/pics/hv1/122/189/722/46996367.jpg" class="undis" border="0"></a>         <a href="http:-//sports.qq-com/a/20110220/000356.htm"><img src="http:-//img1.gtimg-com/sports/pics/hv1/112/185/722/46995337.jpg" class="undis" border="0"></a>         <a href="http:-//sports.qq-com/a/20110220/000417.htm"><img src="http:-//img1.gtimg-com/sports/pics/hv1/93/187/722/46995828.jpg" class="undis" border="0"></a>         <a href="http:-//sports.qq-com/a/20110220/000303.htm#p=2"><img src="http:-//img1.gtimg-com/sports/pics/hv1/20/180/722/46993970.jpg" class="undis" border="0"></a>         <a href="http:-//sports.qq-com/a/20110220/000262.htm"><img src="http:-//img1.gtimg-com/sports/pics/hv1/61/177/722/46993246.jpg" class="undis" border="0"></a>         <a href="http:-//sports.qq-com/a/20110220/000324.htm#p=1"><img src="http:-//img1.gtimg-com/sports/pics/hv1/205/181/722/46994410.jpg" class="undis" border="0"></a>     <div id="textbg"></div>         <div id="text">         <p class="undis"><a href="http:-//zhibo.sports.qq-com/sports/1162/index.html">正在直播全明星东西部对抗赛皇帝对决科比</a></p>         <p class="undis"><a href="http:-//sports.qq-com/a/20110220/000515.htm#p=1">全明星扣篮大赛格里芬击败麦基得冠军</a></p>         <p class="undis"><a href="http:-//sports.qq-com/a/20110220/000465.htm">全明星三分球大赛热火琼斯闪耀捧杯</a></p>         <p class="undis"><a href="http:-//sports.qq-com/a/20110220/000356.htm">亚特兰大队捧杯瞬间霍福德笑开怀</a></p>         <p class="undis"><a href="http:-//sports.qq-com/a/20110220/000417.htm">全明星技巧挑战赛库里28.2秒成功夺魁</a></p>         <p class="undis"><a href="http:-//sports.qq-com/a/20110220/000303.htm#p=2">科比星光大道留手脚印模成篮坛第一人</a></p>         <p class="undis"><a href="http:-//sports.qq-com/a/20110220/000262.htm">纳什闪电离婚内幕曝光前妻与巴博萨偷情生子</a></p>         <p class="undis"><a href="http:-//sports.qq-com/a/20110220/000324.htm#p=1">腾讯直击全明星美女明星黄奕现场微博爆料</a></p>         </div>         <div id="tip"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span></div>   </div> </body>
设为首页 | 联系站长 | 友情链接 | 网站地图 |

copyright©youerw.com 优尔论文网 严禁转载
如果本毕业论文网损害了您的利益或者侵犯了您的权利,请及时联系,我们一定会及时改正。