회전 현수막을 만들어 보세요.

18707 단어 jQuery
일정 기간 동안 회전하는'회전 현수막'을 만들어 보세요.
① 완성도란 현수막은 일정 기간 동안'현수막 1'에서'현수막 4'로 바뀐다.

또한 완성 샘플은 ↓
http://m-uehara.com/rotation001/
파일 다운로드
rotation001.zip

파일 구성

  • index.html
  • slide.js
  • style.css
    • 에서 원하는 벽 유형을 선택합니다.

    코드


    index.html
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Contents-Script-Type" content="text/javascript" />
<title>ローテーションバナー</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="slide.js"></script>
</head>

<body>

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
    $('ul#rotation').slide();
});
</script>

<ul id="rotation">
<li><a href="#"><img src="pict01.jpg" width="468" height="60" alt="リンク先サイト名" /></a></li>
<li><a href="#"><img src="pict02.jpg" width="468" height="60" alt="リンク先サイト名" /></a></li>
<li><a href="#"><img src="pict03.jpg" width="468" height="60" alt="リンク先サイト名" /></a></li>
<li><a href="#"><img src="pict04.jpg" width="468" height="60" alt="リンク先サイト名" /></a></li>
</ul>

</body>
　
</html>
    slide.js
    
(function($) {
    $.fn.slide = function(settings) {
        settings = jQuery.extend({
            firstload       : 0,
            showmode        : "normal", // [ random | normal ]
            action          : "auto",   // [ auto | click ]
            interval_mode   : "randum", // [ random | normal ]
            interval_normal : 2000,
            interval_min    : 2000,
            interval_max    : 5000,
            animation       : true,     // [ true | false ]
            fadespeed       : 1000
        }, settings);

        var _root   = this;
        var max     = $(this).find("li").length;
        var current = settings.firstload;

        $(this).find("li").not(":eq(" + current + ")").hide();

        if(settings.action == "auto") {
            intervalmode_check();
        } else if(settings.action == "click") {
            $(this).click(animation);
        }

        function intervalmode_check() {
            if(settings.interval_mode == "normal") {
                setTimeout(animation, settings.interval_normal);
            } else {
                var time = settings.interval_min + Math.floor(Math.random() * (settings.interval_max + 1));
                setTimeout(animation, time);
            }
        }

        function animation() {
            var prev = $(_root).find("li").eq(current);
            var n = current;
            if(settings.showmode == "normal") {
                if(current == (max- 1)) {
                    current = 0;
                } else {
                    current++;
                }
            } else {
                current = Math.floor(Math.random() * max);
            }
            var next = $(_root).find("li").eq(current);
            if(n == current) {
                animation();
            } else {
                if(settings.animation == true) {
                    prev.fadeOut(settings.fadespeed);
                    next.fadeIn(settings.fadespeed);
                } else {
                    prev.hide();
                    next.show();
                }
                intervalmode_check();
            }
        }
    }
})(jQuery);
    style.css
    
body{
    margin:0px;
    padding:0px;
}

ul#rotation {
    margin:0;
    padding:0;
    position:relative;
    list-style:none;
}

ul#rotation li {
    margin:0;
    padding:0;
    position:absolute;
    top:0;
    left:0;
    display: block;
    margin: 0 auto;
}

a img {
    border-style:none;
}
    모듈식 React 구성 요소 라이브러리 구축 방법
    Adonis 및 Vue를 사용하여 fullstack Javascript 애플리케이션 구축

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage