css样式

点击(此处)折叠或打开

  1. *{padding: 0;margin: 0;}
  2.             .web{width: 100%;height: 520px;position: relative;}
  3.             .pic{width: 100%;height: 520px;overflow: hidden;}
  4.             .pic ul li{list-style: none;width: 100%;height: 520px;display: none;}
  5.             .nav{height: 22px;position: absolute;right: 185px;bottom: 15px;}
  6.             .nav ul li{list-style: none;width: 60px;height: 22px;float: right;margin-left: 5px;cursor: pointer;
  7.                         position: relative;transition: width .2s;/*平缓的对宽度进行变化*/}
  8.             .nav ul li img{width: 60px;height: 22px;position: absolute;right: 0px;bottom: 0px;transition: .2s;}
index

点击(此处)折叠或打开

  1. <div class="web">
  2.             <div class="pic">
  3.                 <ul>
  4.                     <li style="background: url(img/1.jpg) center;"></li>
  5.                     <li style="background: url(img/2.jpg) center;"></li>
  6.                     <li style="background: url(img/3.jpg) center;"></li>
  7.                     <li style="background: url(img/4.jpg) center;"></li>
  8.                     <li style="background: url(img/5.jpg) center;display: block;"></li>
  9.                 </ul>
  10.             </div>
  11.             <div class="nav">
  12.                 <ul>
  13.                     <li><img src="img/1.jpg" /></li>
  14.                     <li><img src="img/2.jpg" /></li>
  15.                     <li><img src="img/3.jpg" /></li>
  16.                     <li><img src="img/4.jpg" /></li>
  17.                     <li><img src="img/5.jpg" /></li>
  18.                 </ul>
  19.             </div>
  20.         </div>
js

点击(此处)折叠或打开

  1. <script>
  2.         var i=0;
  3.         $(".nav ul li").hover(function(){
  4.             $(this).css({"width":"130px"});
  5.             $(this).find("img").css({"width":"130px","height":"50px"});
  6.         },function(){
  7.             $(this).css({"width":"60px"});
  8.             $(this).find("img").css({"width":"60px","height":"22px"});
  9.         })
  10.         $(".nav ul li").click(function(){
  11.             i=$(this).index();
  12.             $(".pic ul li").eq(i).fadeIn(1000).siblings().fadeOut(1000);
  13.         })
  14.     </script>

08-31 13:17