• 可控制左右切换的幻灯片轮换


    <!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>
    <title>kakaFocus</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="styles/common.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    function focusBox(o){
     if(!o) return;
     var w=630, $o=$('#'+o),i=0,l=0;arr= [],t= null,
      $infoLi = $o.find('.banner_info li'), len= $infoLi.length*2,
      $ul=$o.find('.banner_pic>ul');
     $ul.append($ul.html()).css({'width':len*w, 'left': -len*w/2});
     $infoLi.eq(0).addClass('current');
     //add banner_pages element
     arr.push('<div class="banner_pages"><ul>');
     $infoLi.each(function(i){
      if(i==0){
       arr.push('<li class="current"><span>'+ (i+1) +'</span></li>');
      }else{
       arr.push('<li><span>'+ (i+1) +'</span></li>');
      }
     });
     arr.push('</ul></div>');
     $o.append(arr.join(''));
     var $pagesLi = $o.find('.banner_pages li');
     //mouse
     $pagesLi.children('span').click(function(){
      var p = $pagesLi.index($o.find('.banner_pages li.current'));
      i = $pagesLi.children('span').index($(this));
      if(i==p) return;
      l = parseInt($ul.css('left')) + w*(p-i);
      addCurrent(i,l);
      return false;
     })
     $o.children('a.btn_prev').click(function(){
      i = $pagesLi.index($o.find('.banner_pages li.current'));
      (i==0)? i=(len/2-1):i--;
      l = parseInt($ul.css('left')) + w;
      addCurrent(i,l);
      return false;
     })
     $o.children('a.btn_next').click(function(){
      i = ($pagesLi.index($o.find('.banner_pages li.current'))+1)%(len/2);
      l = parseInt($ul.css('left')) - w;
      addCurrent(i,l);
      return false;
     })
     //auto focus
     t = setInterval(init,8000);
     $o.hover(function(){
      clearInterval(t);
     }, function(){
      t = setInterval(init,8000);
     });
     function init(){
      $o.children('a.btn_next').trigger('click');
     }
     //add focus
     function addCurrent(i,l){
      if($ul.is(':animated')) return;
      $ul.animate({'left':l},500,function(){
       $o.children('.banner_count').text(i+1);
       $infoLi.not($infoLi.eq(i).addClass('current')).removeClass('current');
       $pagesLi.not($pagesLi.eq(i).addClass('current')).removeClass('current');
       if(l== (1-len)*w){
        $ul.css({'left': (1-len/2)*w});
       }else if(l== 0){
        $ul.css({'left': -len*w/2});
       }
      });
     }
    }
    
    $(function(){
     focusBox('kakaFocus');
    })
    </script>
    </head>
    
    <body>
    
    <div class="banner" id="kakaFocus"> 
     <a class="btn_prev" title="上一个" href="#">Previous</a> 
     <a class="btn_next" title="下一个" href="#">Next</a> 
     <div class="banner_pic"> 
      <ul>
       <li><a href="#"><img width="630" height="210" src="images/pic_01.jpg" alt="" /></a></li> 
       <li><a href="#"><img width="630" height="210" src="images/pic_02.jpg" alt="" /></a></li> 
       <li><a href="#"><img width="630" height="210" src="images/pic_03.jpg" alt="" /></a></li> 
       <li><a href="#"><img width="630" height="210" src="images/pic_04.jpg" alt="" /></a></li> 
       <li><a href="#"><img width="630" height="210" src="images/pic_05.jpg" alt="" /></a></li> 
      </ul> 
     </div>
     <div class="banner_info">
      <ul>
       <li>
        <h4><a href="#">快乐的旅程,参观武汉可口可乐饮料有限公司</a></h4>
        <div class="ext">
         时光: 2010-02-10 <span class="pipe">|</span>
         分类: <a href="#">美图</a> <span class="pipe">|</span>
         标签: <a href="#">乐高</a>, <a href="#">乐高</a>
        </div>
       </li>
       <li>
        <h4><a href="#">巧口英语“力推”Club活动——?</a></h4>
        <div class="ext">
         时光: 2010-03-16 <span class="pipe">|</span>
         分类: <a href="#">高烧</a> <span class="pipe">|</span>
         标签: <a href="#">LEGO</a>, <a href="#">乐乐</a>
        </div>
       </li>
       <li>
        <h4><a href="#">想学音乐应从什么时候开始?</a></h4>
        <div class="ext">
         时光: 2010-03-26 <span class="pipe">|</span>
         分类: <a href="#">产品</a>, <a href="#">默认</a> <span class="pipe">|</span>
         标签: <a href="#">春运</a>, <a href="#"></a>, <a href="#">凑和</a>
        </div>
       </li>
       <li>
        <h4><a href="#">关于草原情全国小记者选拔赛通知。</a></h4>
        <div class="ext">
         时光: 2010-03-26 <span class="pipe">|</span>
         分类: <a href="#">产品</a>, <a href="#">左右</a> <span class="pipe">|</span>
         标签: <a href="#">春运</a>, <a href="#"></a>, <a href="#">凑和</a>
        </div>
       </li>
       <li>
        <h4><a href="#">中国小记者新闻写作大赛?</a></h4>
        <div class="ext">
         时光: 2010-04-26 <span class="pipe">|</span>
         分类: <a href="#">年代</a>, <a href="#">春节</a> <span class="pipe">|</span>
         标签: <a href="#">兄弟</a>, <a href="#"></a>, <a href="#">最后</a>
        </div>
       </li>
      </ul>
     </div>
     <div class="banner_count">1</div>
    </div><!--banner end-->
    
    
    <div style="height:20px; background:#EEE;"></div>
    </body>
    </html>
  • 相关阅读:
    【Python】错误、调试和测试
    【c++ primer, 5e】函数指针
    【英语学习】【17/4/1】
    【c++ primer, 5e】函数匹配
    FIRST GAME.
    【Thinking in Java, 4e】访问权限控制
    【c++ primer, 5e】特殊用途语言特性
    Top-Down笔记 #01# 计算机网络概述
    NHibernate之映射文件配置说明
    Web Service 部署到IIS服务器
  • 原文地址:https://www.cnblogs.com/chris-oil/p/3152508.html
Copyright © 2020-2023  润新知