手风琴风格图片轮播

最新推荐文章于 2021-06-22 11:00:13 发布

weixin_34301132

最新推荐文章于 2021-06-22 11:00:13 发布

阅读量290

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/U-can/p/5198900.html

版权

今天在http://www.w3cfuns.com/notes/20618/7af828f7b6b7f9d1bb127a9cfbb3267c上看到这个效果，所以拿来练练手，太久没动脑子了，得让它活动活动。

轮播效果：

在该文章的基础上，我自己添加了自动轮播的效果

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5     <title>手风琴切换</title>
  6 </head>
  7 <style type="text/css">
  8     .ts {
  9         overflow: hidden;
 10         width: 1072px;
 11         margin: 0 auto;
 12     }
 13     .ts-ul {
 14         overflow: hidden;
 15         width: 100%;
 16         height: 500px;
 17         margin: 0 auto;
 18         padding: 0;
 19     }
 20     .ts-ul li {
 21         list-style-type: none;
 22         overflow: hidden;
 23         float: left;
 24         width: 95px;
 25         -webkit-transition: width 0.5s;
 26     }
 27     .ts-ul b {
 28         -webkit-transition: all 0.5s;
 29         width: 95px;
 30         display: block;
 31         height: 440px;
 32         text-indent: -9999em;
 33         background: url(http://gyc.woniu.com/tg/ad6/images/ts.jpg);
 34     }
 35 
 36     .ts-ul-li1 {
 37         background: url(http://gyc.woniu.com/tg/ad6/images/ts1_on.jpg) no-repeat;
 38     }
 39 
 40     .ts-ul-li2 {
 41         background: url(http://gyc.woniu.com/tg/ad6/images/ts2_on.jpg) no-repeat;
 42     }
 43 
 44     .ts-ul-li3 {
 45         background: url(http://gyc.woniu.com/tg/ad6/images/ts3_on.jpg) no-repeat;
 46     }
 47     .ts-ul-li4 {
 48         background: url(http://gyc.woniu.com/tg/ad6/images/ts4_on.jpg) no-repeat;
 49     }
 50     .ts-ul li.on {
 51         width: 787px;
 52     }
 53     .ts-ul li.on b{
 54         opacity: 0;
 55         filter: Alpha(opacity=0);
 56     }
 57     .ts-ul-li1 b {
 58         background-position: 0 0
 59     }
 60     .ts-ul-li2 b {
 61         background-position: -95px 0
 62     }
 63     .ts-ul-li3 b {
 64         background-position: -190px 0
 65     }
 66     .ts-ul-li4 b {
 67         background-position: -285px 0
 68     }
 69 </style>
 70 
 71 <body>
 72     <div class="ts">
 73         <ul class="ts-ul">
 74             <li class="ts-ul-li1"><b></b></li>
 75             <li class="ts-ul-li2"><b></b></li>
 76             <li class="ts-ul-li3"><b></b></li>
 77             <li class="ts-ul-li4"><b></b></li>
 78         </ul>
 79     </div>
 80     <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 81     <script type="text/javascript">
 82         $(function() {    
 83             var li_warp=$('.ts-ul')
 84             var totle=li_warp.children('li').length;
 85             var index=-1;
 86             var timeOut=null;    
 87             $(".ts-ul li").eq(0).addClass('on');
 88             $(".ts-ul li").hover(function(){
 89                 clearInterval(timeOut);
 90                 $(".ts-ul li").removeClass("on");
 91                 $(this).addClass("on");
 92                 index=$(this).index();
 93 //                console.log(index);
 94             },function(){
 95                 autoPlay();
 96             });
 97             function autoPlay(){
 98                 timeOut=setInterval(function(){
 99                     index++;                    
100                     $(".ts-ul li").eq(index).addClass('on').siblings('li').removeClass('on');
101                     if(index==totle){
102                         index=0;
103                     }                        
104                 },4000);
105             }
106             autoPlay();
107         });
108     </script>
109 </body>
110 
111 </html>

感觉每次写来写去都是差不多的，但是真正让自己动手还是有问题，归根到底还是练得太少啊，我都不好意思说自己是做了一年多的前端了呢-_-

转载于:https://www.cnblogs.com/U-can/p/5198900.html

weixin_34301132

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
手风琴风格图片轮播

今天在http://www.w3cfuns.com/notes/20618/7af828f7b6b7f9d1bb127a9cfbb3267c上看到这个效果，所以拿来练练手，太久没动脑子了，得让它活动活动。轮播效果：在该文章的基础上，我自己添加了自动轮播的效果 1 <!DOCTYPE HTML> 2 <html> 3 <head>...
复制链接

扫一扫