点击(此处)折叠或打开
- *{padding: 0;margin: 0;}
- .web{width: 100%;height: 520px;position: relative;}
- .pic{width: 100%;height: 520px;overflow: hidden;}
- .pic ul li{list-style: none;width: 100%;height: 520px;display: none;}
- .nav{height: 22px;position: absolute;right: 185px;bottom: 15px;}
- .nav ul li{list-style: none;width: 60px;height: 22px;float: right;margin-left: 5px;cursor: pointer;
- position: relative;transition: width .2s;/*平缓的对宽度进行变化*/}
- .nav ul li img{width: 60px;height: 22px;position: absolute;right: 0px;bottom: 0px;transition: .2s;}
点击(此处)折叠或打开
- <div class="web">
- <div class="pic">
- <ul>
- <li style="background: url(img/1.jpg) center;"></li>
- <li style="background: url(img/2.jpg) center;"></li>
- <li style="background: url(img/3.jpg) center;"></li>
- <li style="background: url(img/4.jpg) center;"></li>
- <li style="background: url(img/5.jpg) center;display: block;"></li>
- </ul>
- </div>
- <div class="nav">
- <ul>
- <li><img src="img/1.jpg" /></li>
- <li><img src="img/2.jpg" /></li>
- <li><img src="img/3.jpg" /></li>
- <li><img src="img/4.jpg" /></li>
- <li><img src="img/5.jpg" /></li>
- </ul>
- </div>
- </div>
点击(此处)折叠或打开
- <script>
- var i=0;
- $(".nav ul li").hover(function(){
- $(this).css({"width":"130px"});
- $(this).find("img").css({"width":"130px","height":"50px"});
- },function(){
- $(this).css({"width":"60px"});
- $(this).find("img").css({"width":"60px","height":"22px"});
- })
- $(".nav ul li").click(function(){
- i=$(this).index();
- $(".pic ul li").eq(i).fadeIn(1000).siblings().fadeOut(1000);
- })
- </script>