შესვლა

დასახელება: Slider / სლაიდერი
ავტორი: saba-web
სისტემა: uCoz
დემო: Click

აღწერა: კიდევ ერთისლაიდერი. ასევე შეგიძლიათ შეცვალოთ სურათები და ტექსტი თქვენი სურვილით. უბრალოდ დაკვირდით კოდს

Code
<head>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
  <style>
  background:transparent url(back.png) no-repeat top left;
  position:fixed;
  width:150px;
  height:27px;
  outline:none;
  bottom:0px;
  left:0px;
  }
  #content{
  margin:150px auto 10px auto;
  }
  .reference{
  clear:both;
  width:800px;
  margin:30px auto;
  }
  .reference p a{
  text-transform:uppercase;
  text-shadow:1px 1px 1px #fff;
  color:#666;
  text-decoration:none;
  font-size:10px;
  }
  .reference p a:hover{
  color:#333;
  }
  </style>
  </head>
  <body>
  <div id="content">
  <a class="back" href=""></a>

  <div class="rotator">
  <ul id="rotmenu">
  <li>
  <a href="rot1">Slide 1</a>
  <div style="display:none;">
  <div class="info_image">1.jpg</div>
  <div class="info_heading">GeLesson.Net</div>
  <div class="info_description">
  At vero eos et accusamus et iusto odio
  dignissimos ducimus qui blanditiis praesentium
  voluptatum deleniti atque corrupti quos dolores et
  quas molestias excepturi sint occaecati cupiditate
  non provident...  
  <a href="#" class="more">Read more</a>
  </div>
  </div>
  </li>
  <li>
  <a href="rot2">Slide 2</a>
  <div style="display:none;">
  <div class="info_image">2.jpg</div>
  <div class="info_heading">Web service</div>
  <div class="info_description">
  At vero eos et accusamus et iusto odio
  dignissimos ducimus qui blanditiis praesentium
  voluptatum deleniti atque corrupti quos dolores et
  quas molestias excepturi sint occaecati cupiditate
  non provident...
  <a href="#" class="more">Read more</a>
  </div>
  </div>
  </li>
  <li>
  <a href="rot3">Slide 3</a>
  <div style="display:none;">
  <div class="info_image">3.jpg</div>
  <div class="info_heading">Get in touch</div>
  <div class="info_description">
  At vero eos et accusamus et iusto odio
  dignissimos ducimus qui blanditiis praesentium
  voluptatum deleniti atque corrupti quos dolores et
  quas molestias excepturi sint occaecati cupiditate
  non provident...
  <a href="#" class="more">Read more</a>
  </div>
  </div>
  </li>
  <li>
  <a href="rot4">Slide 4</a>
  <div style="display:none;">
  <div class="info_image">4.jpg</div>
  <div class="info_heading">We do crazy stuff</div>
  <div class="info_description">
  At vero eos et accusamus et iusto odio
  dignissimos ducimus qui blanditiis praesentium
  voluptatum deleniti atque corrupti quos dolores et
  quas molestias excepturi sint occaecati cupiditate
  non provident...
  <a href="#" class="more">Read more</a>
  </div>
  </div>
  </li>
  <li>
  <a href="rot5">Slide 5</a>
  <div style="display:none;">
  <div class="info_image">5.jpg</div>
  <div class="info_heading">Working things</div>
  <div class="info_description">
  At vero eos et accusamus et iusto odio
  dignissimos ducimus qui blanditiis praesentium  
  voluptatum deleniti atque corrupti quos dolores et  
  quas molestias excepturi sint occaecati cupiditate  
  non provident...  
  <a href="#" class="more">Read more</a><a href="rot5">Applications</a>
  <div style="display:none;">
  <div class="info_image">5.jpg</div>
  <div class="info_heading">Working things</div>
  <div class="info_description">
  At vero eos et accusamus et iusto odio
  dignissimos ducimus qui blanditiis praesentium  
  voluptatum deleniti atque corrupti quos dolores et  
  quas molestias excepturi sint occaecati cupiditate  
  non provident...  
  <a href="#" class="more">Read more</a>  
  </div>
  </div>
  </li>
  </ul>
  <div id="rot1">
  <img src="" width="800" height="300" class="bg" alt=""/>
  <div class="heading">
  <h1></h1>
  </div>
  <div class="description">
  <p></p>

  </div>  
  </div>
  </div>
  </div>
  <div class="reference">
  </div>
  <!-- The JavaScript -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript" src="http://stock-exchange.ucoz.com/990/jquery.easing.1.3.js"></script>
  <script type="text/javascript">
  $(function() {
  var current = 1;
   
  var iterate = function(){
  var i = parseInt(current+1);
  var lis = $('#rotmenu').children('li').size();
  if(i>lis) i = 1;
  display($('#rotmenu li:nth-child('+i+')'));
  }
  display($('#rotmenu li:first'));
  var slidetime = setInterval(iterate,3000);
   
  $('#rotmenu li').bind('click',function(e){
  clearTimeout(slidetime);
  display($(this));
  e.preventDefault();
  });
   
  function display(elem){
  var $this = elem;
  var repeat = false;
  if(current == parseInt($this.index() + 1))
  repeat = true;
   
  if(!repeat)
  $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
  $(this).animate({'opacity':'0.7'},700);
  });
   
  current = parseInt($this.index() + 1);
   
  var elem = $('a',$this);
   
  elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);
   
  var info_elem = elem.next();
  $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
  $('h1',$(this)).html(info_elem.find('.info_heading').html());
  $(this).animate({'left':'0px'},400,'easeInOutQuad');
  });
   
  $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
  $('p',$(this)).html(info_elem.find('.info_description').html());
  $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
  })
  $('#rot1').prepend(
  $('<img/>',{
  style : 'opacity:0',
  className : 'bg'
  }).load(
  function(){
  $(this).animate({'opacity':'1'},600);
  $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
  $(this).remove();
  });
  }
  ).attr('src','images/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300')
  );
  }
  });
  </script>
  </body>



ფაილის გადმოწერა შეუძლიათ მხოლოდ დარეგისტრირებულ მომხმარებლებს



986
ავტორი: saba-web კატეგორია: სკრიფტები
სულ კომენტარები: 1