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='/images/loading.gif' data-original="../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>
原标题:HTMl+CSS+JQuery实现简单的图片滑动切换
关键词:HTML