自動換圖的產品說明與介紹 html css jquery語法 ~ 猛甲茶道互動式創意網頁設計 Tea Road

0/4

<!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>
</head>

<div style="margin:0 auto; text-align:center;">
<style type="text/css">
p{margin:0;padding:0;}
ol,ul{list-style:none;}
li{list-style-type:none;}
caption,th{text-align:left;}
address,caption,cite,code,dfn,ins,em,th,var{font-weight:normal;font-style:normal;}
input,textarea{font-size:12px;padding:2px;}
*{text-decoration:none;}
a{color:#06c;}
a:hover{color:#f00;}
#slide-box{margin:8px auto ;width:470px;height:150px;}
#slide-box p{border-bottom:0px;}
#slide-box .thumb-wrap{height:115px;}
#slide-box .tit-ctrl{height:30px;line-height:24px;}
#slide-box .ctrl{float:right;width:65px;margin-top:4px;}
#slide-box .ctrl .num{float:left;margin:2px 8px 0 8px;padding:0px 10px;line-height:16px;background-color:#FFA500;color:#fff;font-family:Arial,Helvetica,sans-serif;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:10px;}
#slide-box .ctrl .num strong{font-size:12px;}
#slide-box .title{float:left;margin-left:6px;}
#slide-box .title a{font-weight:bold;font-size:14px;}
#slide-box .shadow{display:none;height:8px;background-color:#000;}
.tl,.tr{margin:6px 0px 0 0px;cursor:pointer;}
.tl{float:left;}
.tr{float:right;}
#slide-box .description{height:38px;line-height:20px;padding:0 10px 5px 10px;clear:both;color:#fff;}
</style>

<div id="slide-box">
 <ul rel="slide-data" style="display: none;">
  <li>
   <p class="data-title">超連結網址說明文字１</p>
   <p class="data-url">http://goo.gl/ZTbB7</p>
   <p class="data-description">透明背板說明文字１</p>
   <p class="data-humb">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj94vm97WyQVua1kBWpCcbNAQq6hLTj-V4rn3P90cgXNBFngtKDobxVWBD4Xfua3gr-xk9X1LjZiaXU9It46lqxL_AoOkgrzwGSKc-j8-WwUn3OghFA6EV3AsAiEL6oOXLqq4BmAh_HETfJ/s144/%2525E5%25259C%252596%2525E7%252589%2525877.jpg</p>
  </li>
  <li>
   <p class="data-title">超連結網址說明文字２</p>
   <p class="data-url">http://goo.gl/ZTbB7</p>
   <p class="data-description">透明背板說明文字２</p>
   <p class="data-humb">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBbk_UY5uXoUjVBUkSf51NH8ZWSfFB60TKH4nu2SEUeKx-f-01zDhvDCtGyJEKvoIa1tR_qmjqQMDLGukLnM0Ms7bElsbYisNmIJzmcReWh2CjbiHBer9R77qpcWf5TVjjRlIXC6NgxNEU/s144/%2525E5%25259C%252596%2525E7%252589%2525877.jpg</p>
  </li>
  <li>
   <p class="data-title">超連結網址說明文字３</p>
   <p class="data-url">http://goo.gl/ZTbB7</p>
   <p class="data-description">透明背板說明文字３</p>
   <p class="data-humb">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6LyntUEYORSa8tCbfUrTo-LiEuhOCqt2vyt6G055gXL7QSRRudpraMn4NAswG3u1RhffwilFZkBKBEYOU-yOJhnsI3gm-SMwi4AXOMbhfBqOTSJg1VFvYp-S3hiIXOw0pa1GmPoY0E9nI/s144/%2525E5%25259C%252596%2525E7%252589%2525875.jpg</p>
  </li>

</ul>
<div class="thumb-wrap">
  <div><a href=""><img rel="thumb" src="http://goo.gl/ZTbB7" width="470" height="115" alt="" /></a></div>
  <div class="shadow" rel="shadow"></div>
  <p class="description" rel="description"></p>
 </div>
 <div class="tit-ctrl">
  <p class="title"><a href="" rel="title"></a></p>
  <div class="ctrl" rel="ctrl">
   <img class="tl" rel="tl" alt="" src="http://goo.gl/55bz1" title="點擊切換到上一張" /> 
   <img class="tr" rel="tr" alt="" src="http://goo.gl/EUVn1" title="點擊切換到下一張" />
   <span class="num" rel="num"><strong>0</strong>/<em>4</em></span>
  </div>
 </div>
</div>

f.thumb = f.find('[rel=thumb]');     
     f.shadow = f.find('[rel=shadow]');     
     f.des = f.find('[rel=description]');     
     f.title = f.find('[rel=title]');     
     f.ctrl = f.find('[rel=ctrl]');     
     f.num = f.find('[rel=num]');
     f.n = f.num.find('strong');     
     f.tl =  f.find('[rel=tl]');     
     f.tr =  f.find('[rel=tr]');
     f.t = t || 6000; 
   },
   //o-包裹元素id，btnL: 左控制按鈕, btnR: 右控制按鈕
   init: function( o, t ){
     //組織dom
     slidePic.getRelDom( o,t );
     //組織數據
     slidePic.getData();
     //整理陰影部分
     slidePic.setShadow();
     //鼠標移上大圖，顯示描述
     slidePic.showDes();
     //自動播放
     slidePic.auto();
     //手動控制
     slidePic.slideLR();
   },
   getData: function(){
     var  o = slidePic.o,
     //定義儲存變量
     d = o.data = [];
     //獲取數據以二維數組形式保存在slidePic.o.data中
     o.find('[rel=slide-data]').find('li').each(function( i ){
       d[i] = [];
       $(this).find('p').each(function(){
        d[i].push($(this).html());
       });
     });
     //獲得數據總條數
     o.size = slidePic.o.data.length;
     //當前數組中的位置
     o.now = 0;
     //顯示出來的數目，總是比數組中位置多1
     o.index = slidePic.o.now + 1;
     //默認值總數的設置
     o.num.find('em').html(o.size);
     //默認顯示設置
     slidePic.updateDomData(o.index,d[o.now][0],d[o.now][1],d[o.now][2],d[o.now][3]);
   },
   //處理陰影效果，採用絕對定位
   setShadow: function(){
      var o = slidePic.o,
        h = o.des.innerHeight(),
       w = o.des.parent().innerWidth();
       //保存陰影和描述的bottom值
       o.shadow.bottom = -h - 10;
       o.des.bottom = -h;
       o.shadow.css({'display':'block',
           'opacity': 0.5,
           'position': 'absolute',
           'bottom': -h - 10,
           'height': h + 10,
           'width': w,
           'zIndex': 20}); 
       o.shadow.parent().css({'position':'relative', 'overflow':'hidden'});            
       o.des.css({'position': 'absolute','bottom': -h, 'zIndex': 30});   
   },
   //設置當前項數據,不包括圖片，因為圖片有顯示效果
   updateDomData: function(n,title,href,des,thumb){
     var o = slidePic.o;
      //設置當前項碼數
      o.n.html( n );
      //設置標題和鏈接
      o.title.html( title ).attr('href',href);
      //設置描述
      o.des.html(des);
      //設置圖片鏈接
      o.thumb.parent().attr('href',href);
      //如果不需要圖片效果，則調用此方法
      if(thumb != undefined) o.thumb.attr('src', thumb );
   },
   //陰影和描述控制
   showDes: function(){
      var o = slidePic.o,
       pic = o.thumb; 
      pic.parent().parent().hover(function(){         
        o.shadow.animate({bottom: 0},'normal');
        o.des.animate({bottom: 0},'normal');
        //描述的dom添加hover事件
        o.des.hover(function(){
         window.clearTimeout( o.timeDes ); 
        },function( e ){ 
         //判斷鼠標是否移到了shadow上
         if(relatedTarget(e) == o.shadow[0]) return;
         o.shadow.animate({bottom: o.shadow.bottom},'normal');
         o.des.animate({bottom: o.des.bottom},'normal');
        });   
      },function(){
        //鼠標移出大圖1/5秒，陰影和描述設置隱藏
        o.timeDes = window.setTimeout(function(){
         o.shadow.animate({bottom: o.shadow.bottom},'normal');
         o.des.animate({bottom: o.des.bottom},'normal');
        },200);
      })
   },
   // 自動播放
   auto: function(){
     var o = slidePic.o,
      d = o.data;
      o.timerPic = window.setInterval(function(){
        o.now = o.now + 1;
        if (o.now == o.size) {
          o.now = 0;
          window.clearInterval( o.timerPic );
          slidePic.auto();
        }
        o.index = o.now + 1;
        slidePic.updateDomData(o.index,d[o.now][0],d[o.now][1],d[o.now][2],d[o.now][3]);
        slidePic.slider();
      }, o.t);
   },
   //漸顯效果
   slider: function(){
     var o = slidePic.o;
      o.thumb.hide();
      o.thumb.fadeIn('slow');
   },
   slideLR: function(){ 
       var o = slidePic.o,
        d = o.data;
       o.tl.click(function(){
         window.clearInterval( o.timerPic );
         o.now = o.now - 1;
         if (o.now == -1) o.now = o.size - 1;
         o.index = o.now + 1;
         slidePic.updateDomData(o.index,d[o.now][0],d[o.now][1],d[o.now][2],d[o.now][3]);
         slidePic.slider();
         
         slidePic.auto()
       });
       o.tr.click(function(){
         window.clearInterval( o.timerPic );
         o.now = o.now + 1;
         if (o.now == o.size) o.now = 0;
         o.index = o.now + 1;
         slidePic.updateDomData(o.index,d[o.now][0],d[o.now][1],d[o.now][2],d[o.now][3]);
         slidePic.slider();
         slidePic.auto();
       });
   }
  };
 //調用方式
 slidePic.init('#slide-box',8000);
</script>
</div>

</body>
</html>

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

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

"你是獵人還是獵物？"

Tea Road

Monga Shop

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