你的位置:首页 > Java教程

[Java教程]HTMl+CSS+JQuery实现简单的图片滑动切换


 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3   <title>t图片的滑动</title> 4   <meta charset="utf-8" /> 5   <style type="text/css" > 6     *{ 7       margin:0; 8       padding:0; 9 10     }11     #main{12       width:1089px;13       height:360px;14       margin:100px;15       background:url(../image/7.png);16    }17     ul li{18       list-style:none ;19       width:100px;20       height:360px;21       float:left;22    }23     a{24       color:#ffffff;25       text-decoration:none;26    }27     .txt{28       width:100px;29       height:360px;30       float:left;31       background:rgb(182, 255, 0);32    }33     p{34       font-family :"Arial.black",Gadugi.sans-serif ;35       font-size:18x;36       position:relative ;37       width:18px;38       font-weight:bold ;39       margin-top :120px;40       margin-left:48px;41    }42     .li1 {43       background: url( ../image/43.png);44     }45     .li2{background: url( ../image/42.png);}46     .li3{background: url( ../image/39.png);}47     .li4{background: url( ../image/47.png);}48   </style>49   50 </head>51 <body>52   <div id="main">53     <ul>54       <li class=" li1"><a href=" #"><div class=" txt"><p>风景1</p></div></a></li>55       <li class=" li2"><a href=" #"><div class=" txt"><p>风景2</p></div></a></li>56       <li class=" li3"><a href=" #"><div class=" txt"><p>风景3</p></div></a></li>57       <li class=" li4"><a href=" #"><div class=" txt"><p>风景4</p></div></a></li>58     </ul>59   </div>60   <script type="text/javascript" src="../Jqurey/jquery.min.js"></script>61   <script >62     $('ul li').hover(function(){63       $(this).stop(true).animate({ width: '789px' }, 500).siblings().stop(true).animate({width:'100'},500);64     })65   </script>66 </body>67 </html>