网页常用动态效果--淘宝竖条广告

布局：.box>ol+ul

ol和ul均整体左浮动，box清浮

CSS：

 1             .box{
 2                 width:250px;
 3                 height:250px;
 4                 position: relative;
 5                 overflow:hidden;
 6             }
 7             ol{
 8                 width:49px;
 9                 height:250px;
10                 float: left;
11                 border-right:1px solid black;
12             }
13             ol li{
14                 height:35px;
15                 line-height:35px;
16                 text-align: center;
17                 background-color: lightcyan;
18                 border-bottom:1px solid #333;
19             }
20             ol li.current{
21                 background: yellowgreen;
22             }
23             ul{
24                 width:200px;
25                 height:250px;
26                 float: left;
27             }

JQ:

 1 <script>
 2             jQuery(document).ready(function($) {
 3                 var num = 0;
 4                 var len = $('.box ul li').length;
 5                 function autoplay(){
 6                     num++;
 7                     if(num>len-1){
 8                         num = 0;
 9                     }
10                     $('.box ol li').eq(num).addClass('current').siblings().removeClass('current');
11                     $('.box ul li').eq(num).css({display:'block'}).siblings().css({display:'none'});
12                 }
13                 var timer = null;
14                 timer = setInterval(autoplay, 1000);
15                 $('ol li').on('click',function(){
16                     var index = $(this).index();
17                     $('.box ol li').eq(index).addClass('current').siblings().removeClass('current');
18                     $('.box ul li').eq(index).css({display:'block'}).siblings().css({display:'none'});
19                     num = index;
20                 });
21                 $('.box').hover(function() {
22                     clearInterval(timer);
23                 }, function() {
24                     timer = setInterval(autoplay, 1000);
25                 });
26             });
27         </script>

 

posted @ 2015-09-24 10:42  十三君  阅读(351)  评论(0)  编辑  收藏  举报