首頁banner橫幅廣告自動輪播 JQUERY網頁特效演示範例demo及語法 ~ 猛甲茶道互動式創意網頁設計 Tea Road

首頁橫幅廣告自動輪播 JQUERY網頁特效演示範例demo及語法

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>孟甲商行</title>

<body>

_li += '<li><a href="'+$a.attr('href')+'">'+$a.find('img').attr('alt')+'</a></li>';
  });
  // 幫 li 加上透明度
  // 並計算 li 基本寬度及最大寬度
  var $li = $controls.html(_li).appendTo($block).find('li').css('opacity', _liOpacity), 
   _liWidth = $li.width(), 
   _selectedWidth = $block.width() - ($li.length - 1) * _liWidth - 1;
  
  // 當滑鼠移到 li 上時
  $li.mouseover(function(){
   var $this = $(this), 
    _index = $this.index();
   
   // 如果現在移上去的跟已顯示是的同一個就跳過
   if(_selectedIndex == _index) return;
   
   // 進行動畫切換
   $list.eq(_index).stop(true, true).css({
    top: _blockHeight, 
    zIndex: 1, 
    display: 'block'
   }).animate({
    top: 0
   }, _animateSpeed).end().eq(_selectedIndex).stop(true, true).animate({
    top: -_blockHeight
   }, _animateSpeed, function(){
    $(this).hide();
   });
   
   // 把滑鼠移上去的 li 寬度變成最大寬度
   // 並將上一個最大寬度的 li 寬度變成基本寬度
   //$this.addClass('selected').find('a').width(_selectedWidth).end().siblings('.selected').removeClass('selected').find('a').width(_liWidth-1);
   $this.addClass('selected').find('a').width(_selectedWidth);
   $li.eq(_selectedIndex).removeClass('selected').find('a').width(_liWidth-1);

_selectedIndex = _index;
  }).eq(_selectedIndex).addClass('selected').find('a').width(_selectedWidth);
  
  // 用 speed 表示切換輪播的速度
  var timer, speed = 2500;

// 用來自動輪播使用
  function auto(){
   var _index = (_selectedIndex + 1) % $li.length;
   $li.eq(_index).mouseover();

timer = setTimeout(auto, speed + _animateSpeed);
  }

$block.hover(function(){
   // 當滑鼠移入時, 停止計時器
   clearTimeout(timer);
  }, function(){
   // 當滑鼠移出時, 啟動計時器
   timer = setTimeout(auto, speed);
  });
  
  // 啟動計時器
  timer = setTimeout(auto, speed);
 });
</script>

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-33861724-1']);
  _gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<div id="abgne-block-20111227">
  <ul class="lists">   
            <li><a href="#"><img alt="心想事成！ 吉祥如意！ 喜樂平安！" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghFR_YzaheqX_CO6Z21hl0uWMyYpz5U_v-SWJzDkhABkxagyA82vv-Z5JlMQm2V4MYZTCcd-fbBqLOm72j8RS4-fbUbebCVfIPlNlZZoMMO9cmQ6GnMNXcRcOWqibVxNmRBr3LwPeYcsob/s600/skylight.jpg" /></a></li>
            <li><a href="http://hala999.net/products_detial.php?p_id=21"><img alt="獨家天然配方、手工製作及天然日曬，使麵條超滑Q彈牙富嚼勁，愛不釋口！" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6EEOGZdUGea7eC3j6txyLwyzoyVvYB1A4eRe6xFzDYkXAxxGMYCVXE-e8-PVFxrubHtm4_CNc4P2awBR7jQReSmGxqBF9rDUtZwMzmucH0cZMrdGk1yVMdi03ZqWKFoUC5yAPLmD8KtfD/s600/noodle.jpg" /></a></li>

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

響應式網頁架站只要6,888元起|[RWD]響應式網站，自適應網頁，讓SEO搜尋引擎最佳化你的網站

"你是獵人還是獵物？"

Tea Road

Monga Shop

猛甲茶道互動式創意網頁設計 Tea Road