Team:Nanjing NFLS/test

From 2014hs.igem.org

(Difference between revisions)
(Replaced content with "{{Template:Nanjing_Nfls}} Test test test test test test test test == Headline text == test")
Line 1: Line 1:
{{Template:Nanjing_Nfls}}
{{Template:Nanjing_Nfls}}
-
Test
+
<html>
-
test
+
 
-
test
+
<!--picture banner-->
-
test
+
<style type="text/css">
-
test
+
img { border: 0px; }
-
test
+
#banner { margin: 70px auto 0px auto; padding: 0px; width: 100%; height: 360px; float:left;}
-
test
+
.slides { margin: 0px auto; width: 100%; height: 360px; overflow: hidden; position: relative; }
-
test
+
.slide-pic { margin: 0px; padding: 0px; width: 100%; overflow: hidden; list-style: none; }
-
== Headline text ==
+
.slide-pic img { width: 100%; height: 360px; }
-
test
+
.slide-pic li { display: none; }
 +
.slide-pic li.cur { display: block; }
 +
.slide-li {padding: 0px; right: 50px; bottom: 0px; position: absolute;float:left;}
 +
.slide-li li { margin: 0px; padding: 0px; width: 30px; height:20px ;float:left;overflow: hidden;}
 +
.slide-li a { width: 30px; height: 20px; color: #000; font-size: 26px; display: block; text-align:center;text-decoration:none;margin-bottom:5px;}
 +
.slide-li a:hover { color: #ccc; text-decoration: none; }
 +
.slide-txt span { display: none; }
 +
</style>
 +
<script type="text/javascript">
 +
jQuery(function ($) {
 +
    if ($(".slide-pic").length > 0) {
 +
        var defaultOpts = { interval: 5000, fadeInTime: 300, fadeOutTime: 200 };
 +
        var _titles = $("ul.slide-txt li");
 +
        var _titles_bg = $("ul.op li");
 +
        var _bodies = $("ul.slide-pic li");
 +
        var _count = _titles.length;
 +
        var _current = 0;
 +
        var _intervalID = null;
 +
        var stop = function () { window.clearInterval(_intervalID); };
 +
        var slide = function (opts) {
 +
            if (opts) {
 +
                _current = opts.current || 0;
 +
            } else {
 +
                _current = (_current >= (_count - 1)) ? 0 : (++_current);
 +
            };
 +
            _bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime, function () {
 +
                _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
 +
                _bodies.removeClass("cur").eq(_current).addClass("cur");
 +
            });
 +
            _titles.removeClass("cur").eq(_current).addClass("cur");
 +
            _titles_bg.removeClass("cur").eq(_current).addClass("cur");
 +
        };
 +
        var go = function () {
 +
            stop();
 +
            _intervalID = window.setInterval(function () { slide(); }, defaultOpts.interval);
 +
        };
 +
        var itemMouseOver = function (target, items) {
 +
            stop();
 +
            var i = $.inArray(target, items);
 +
            slide({ current: i });
 +
        };
 +
        _titles.hover(function () { if ($(this).attr('class') != 'cur') { itemMouseOver(this, _titles); } else { stop(); } }, go);
 +
        _bodies.hover(stop, go);
 +
        go();
 +
    }
 +
});
 +
</script>
 +
 
 +
    <!-- START -->
 +
    <div id="banner">
 +
        <div class="slides">
 +
            <ul class="slide-pic">
 +
                <li class="cur">
 +
                    <img alt="" src="https://static.igem.org/mediawiki/2014hs/e/e0/NFLST1.jpg" /></li>
 +
                <li>
 +
                    <img alt="" src="https://static.igem.org/mediawiki/2013/d/dc/Tju-2banner.jpg" /></li>
 +
                <li>
 +
                    <img alt="" src="https://static.igem.org/mediawiki/2013/9/9a/03banner.jpg" /></li>
 +
                <li>
 +
                    <img alt="" src="https://static.igem.org/mediawiki/2013/3/3f/Tju-4banner.JPG" /></li>
 +
              <li>
 +
                    <img alt="" src="https://static.igem.org/mediawiki/2013/e/e8/Tju-5banner.jpg" /></li>
 +
             
 +
            </ul>
 +
            <ul class="slide-li op">
 +
                <li class="cur"></li>
 +
                <li></li>
 +
                <li></li>
 +
                <li></li>
 +
                <li></li>
 +
            </ul>
 +
            <ul class="slide-li slide-txt">
 +
                <li><a href="#">●</a></li>
 +
                <li><a href="#">●</a></li>
 +
                <li><a href="#">●</a></li>
 +
                <li><a href="#">●</a></li>
 +
                <li><a href="#">●</a></li>
 +
            </ul>
 +
        </div>
 +
    </div>
 +
    <!-- END OF THE BANNER -->

Revision as of 02:53, 18 June 2014