html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div id="notice5" class="news" style="margin-top:30px; padding-top:0;"> <div class="open-event fl" style="width:400px;"> <ul class="notice-list"> <li><a href="#">1. '보코' 손승연, 美 버클리 음대 합격 "버클리도 반했다"</a><span class="date">2011.08.11</span></li> <li><a href="#">2. K팝스타 러브라인, 이승훈 두고 백아연·이미쉘 신경전?</a><span class="date">2011.08.11</span></li> <li><a href="#">3. '내 아내의 모든 것', '어벤져스' 제쳤다..예매율 1위...</a><span class="date">2011.08.11</span></li> <li><a href="#">4. '사랑비' 이미숙-정진영, 아름다운 이별…</a><span class="date">2011.08.11</span></li> <li><a href="#">5. 최효종, 다시 한 번 강용석 의원이 고소한다면?</a><span class="date">2011.08.11</span></li> </ul> <span id="bt5"> <a href="#" class="prev"><img src="http://mylko72.maru.net/jquerylab/images/ico/bul_arrow_up.gif" alt="Prev"></a> <a href="#" class="next"><img src="http://mylko72.maru.net/jquerylab/images/ico/bul_arrow_down.gif" alt="Next"></a> </span> </div> <div class="control fl"> <a href="#" class="play" title="재생">▷</a> <a href="#" class="stop" title="정지">▣</a> </div> <script type="text/javascript">fn_article3('notice5','bt5',true);</script> </div> | cs |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .news {padding:0 0px 20px;} .news .open-event {height:16px; position:relative; border:1px solid #ccc; overflow:hidden;} .news .open-event ul{position:absolute; top:0px;} .news .open-event ul#notice1 {left:0;} .news .open-event ul#notice2 {right:20px;} .news .open-event ul li {height:20px;} .news .open-event ul li a {display:inline-block; width:310px;} .news .open-event ul li a:hover {color:#8f7614; text-decoration:underline;} .news .open-event ul li a strong {margin-right:10px;} .news .open-event ul li span.date {display:inline-block; width:60px;} .news .open-event .prev{position:absolute; top:1px; right:2px; width:7px; height:4px; line-height:0; font-size:0;} .news .open-event .next{position:absolute; bottom:1px; right:2px; width:7px; height:4px; line-height:0; font-size:0;} .news .control {float:left; margin:0px 0 0 10px; } .news .control a.stop {font-size:12px;} .news .control a.on {color:red; font-size:12px;} | cs |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | function fn_article3(containerID, buttonID, autoStart){ var $element = $('#'+containerID).find('.notice-list'); var $prev = $('#'+buttonID).find('.prev'); var $next = $('#'+buttonID).find('.next'); var $play = $('#'+containerID).find('.control > a.play'); var $stop = $('#'+containerID).find('.control > a.stop'); var autoPlay = autoStart; var auto = null; var speed = 2000; var timer = null; var move = $element.children().outerHeight(); var first = false; var lastChild; lastChild = $element.children().eq(-1).clone(true); lastChild.prependTo($element); $element.children().eq(-1).remove(); if($element.children().length==1){ $element.css('top','0px'); }else{ $element.css('top','-'+move+'px'); } if(autoPlay){ timer = setInterval(moveNextSlide, speed); $play.addClass('on').text('▶'); auto = true; }else{ $play.hide(); $stop.hide(); } $element.find('>li').bind({ 'mouseenter': function(){ if(auto){ clearInterval(timer); } }, 'mouseleave': function(){ if(auto){ timer = setInterval(moveNextSlide, speed); } } }); $play.bind({ 'click': function(e){ if(auto) return false; e.preventDefault(); timer = setInterval(moveNextSlide, speed); $(this).addClass('on').text('▶'); $stop.removeClass('on').text('▣'); auto = true; } }); $stop.bind({ 'click': function(e){ if(!auto) return false; e.preventDefault(); clearInterval(timer); $(this).addClass('on').text('■'); $play.removeClass('on').text('▷'); auto = false; } }); $prev.bind({ 'click': function(){ movePrevSlide(); return false; }, 'mouseenter': function(){ if(auto){ clearInterval(timer); } }, 'mouseleave': function(){ if(auto){ timer = setInterval(moveNextSlide, speed); } } }); $next.bind({ 'click': function(){ moveNextSlide(); return false; }, 'mouseenter': function(){ if(auto){ clearInterval(timer); } }, 'mouseleave': function(){ if(auto){ timer = setInterval(moveNextSlide, speed); } } }); function movePrevSlide(){ $element.each(function(idx){ if(!first){ $element.eq(idx).animate({'top': '0px'},'normal',function(){ lastChild = $(this).children().eq(-1).clone(true); lastChild.prependTo($element.eq(idx)); $(this).children().eq(-1).remove(); $(this).css('top','-'+move+'px'); }); first = true; return false; } $element.eq(idx).animate({'top': '0px'},'normal',function(){ lastChild = $(this).children().filter(':last-child').clone(true); lastChild.prependTo($element.eq(idx)); $(this).children().filter(':last-child').remove(); $(this).css('top','-'+move+'px'); }); }); } function moveNextSlide(){ $element.each(function(idx){ var firstChild = $element.children().filter(':first-child').clone(true); firstChild.appendTo($element.eq(idx)); $element.children().filter(':first-child').remove(); $element.css('top','0px'); $element.eq(idx).animate({'top':'-'+move+'px'},'normal'); }); } } | cs |
MrZZang