"
Team:SCUT/HP
From 2014.igem.org
(Difference between revisions)
| Line 22: | Line 22: | ||
</div> | </div> | ||
| - | <div class="slides"> | + | <div class="slides"> |
| + | <ul class="slide-pic"> | ||
| + | <li class="cur"><img alt="" src="hp/show1.jpg" /></li> | ||
| + | <li><img alt="" src="hp/show2.jpg" /></li> | ||
| + | <li><img alt="" src="hp/show3.jpg" /></li> | ||
| + | <li><img alt="" src="hp/show4.jPG" /></li> | ||
| + | </ul> | ||
| + | <ul class="slide-li"> | ||
| + | <li><a href="#">●</a></li> | ||
| + | <li><a href="#">●</a></li> | ||
| + | <li><a href="#">●</a></li> | ||
| + | <li><a href="#">●</a></li> | ||
| + | </ul> | ||
</div> | </div> | ||
| + | <script type="text/javascript"> | ||
| + | $(function ($) { | ||
| + | if ($(".slide-pic").length > 0) { | ||
| + | var defaultOpts = { interval: 2000, fadeInTime: 300, fadeOutTime: 200 }; | ||
| + | var _titles = $("ul.slide-li 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> | ||
Revision as of 15:24, 10 October 2014
