Template:Team:UC Davis/Head

From 2014.igem.org

(Difference between revisions)
Line 801: Line 801:
               }
               }
</style>
</style>
 +
/*-----------------------------------------------------------------Image Slider Start--*/
 +
<style>
 +
 +
#slider {
 +
  position: relative;
 +
  overflow: hidden;
 +
  margin: 20px auto 0 auto;
 +
  border-radius: 4px;
 +
}
 +
 +
#slider ul {
 +
  position: relative;
 +
  margin: 0;
 +
  padding: 0;
 +
  height: 200px;
 +
  list-style: none;
 +
}
 +
 +
#slider ul li {
 +
  position: relative;
 +
  display: block;
 +
  float: left;
 +
  margin: auto;
 +
  padding: 0;
 +
  width: 600px;
 +
  height: 300px;
 +
  background: rgba(0,0,0,0);
 +
  text-align: center;
 +
  line-height: 300px;
 +
}
 +
 +
#slider ul li img {
 +
  position: relative;
 +
  display: block;
 +
  float: center;
 +
  margin: auto;
 +
  padding: 0;
 +
  max-width: 600px;
 +
  max-height: 300px;
 +
  text-align: center;
 +
  line-height: 300px;
 +
}
 +
 +
a.control_prev, a.control_next {
 +
  position: absolute;
 +
  top: 40%;
 +
  z-index: 999;
 +
  display: block;
 +
  padding: 2% 1%;
 +
  width: auto;
 +
  height: auto;
 +
  background: #2a2a2a;
 +
  color: #fff;
 +
  text-decoration: none;
 +
  font-weight: 600;
 +
  font-size: 18px;
 +
  opacity: 0.8;
 +
  cursor: pointer;
 +
}
 +
 +
a.control_prev:hover, a.control_next:hover {
 +
  opacity: 1;
 +
  -webkit-transition: all 0.2s ease;
 +
}
 +
 +
a.control_prev {
 +
  border-radius: 0 2px 2px 0;
 +
}
 +
 +
a.control_next {
 +
  right: 0;
 +
  border-radius: 2px 0 0 2px;
 +
}
 +
 +
</style>
 +
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 +
<script  type='text/javascript'>
 +
 +
jQuery(document).ready(function ($) {
 +
 +
  $('#checkbox').change(function(){
 +
    setInterval(function () {
 +
        moveRight();
 +
    }, 3000);
 +
  });
 +
 
 +
var slideCount = $('#slider ul li').length;
 +
var slideWidth = $('#slider ul li').width();
 +
var slideHeight = $('#slider ul li').height();
 +
var sliderUlWidth = slideCount * slideWidth;
 +
 +
$('#slider').css({ width: slideWidth, height: slideHeight });
 +
 +
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
 +
 +
    $('#slider ul li:last-child').prependTo('#slider ul');
 +
 +
    function moveLeft() {
 +
        $('#slider ul').animate({
 +
            left: + slideWidth
 +
        }, 200, function () {
 +
            $('#slider ul li:last-child').prependTo('#slider ul');
 +
            $('#slider ul').css('left', '');
 +
        });
 +
    };
 +
 +
    function moveRight() {
 +
        $('#slider ul').animate({
 +
            left: - slideWidth
 +
        }, 200, function () {
 +
            $('#slider ul li:first-child').appendTo('#slider ul');
 +
            $('#slider ul').css('left', '');
 +
        });
 +
    };
 +
 +
    $('a.control_prev').click(function () {
 +
        moveLeft();
 +
    });
 +
 +
    $('a.control_next').click(function () {
 +
        moveRight();
 +
    });
 +
 +
});
 +
</script>
 +
/*-----------------------------------------------------------------Image Silder End--*/
 +
 +
 +
 +
     </head>
     </head>
          
          

Revision as of 23:28, 14 October 2014

UC Davis iGEM 2014 /*-----------------------------------------------------------------Image Slider Start--*/ /*-----------------------------------------------------------------Image Silder End--*/

Retrieved from "http://2014.igem.org/Template:Team:UC_Davis/Head"