一个很不错的jquery 图片导航，图片轮换 代码

相信WEB开发人员经常需要处理一些图片的滚动等效果,这里我给大家介绍个比较的JQUERY函数

kxbdSuperMarquee

 

代码:js

<code>

(function($){

 $.fn.kxbdSuperMarquee = function(options){
  var opts = $.extend({},$.fn.kxbdSuperMarquee.defaults, options);
  
  return this.each(function(){
   var $marquee = $(this);//滚动元素容器
   var _scrollObj = $marquee.get(0);//滚动元素容器DOM
   var scrollW = $marquee.width();//滚动元素容器的宽度
   var scrollH = $marquee.height();//滚动元素容器的高度
   var $element = $marquee.children(); //滚动元素
   var $kids = $element.children();//滚动子元素
   var scrollSize=0;//滚动元素尺寸
   var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型，1左右，0上下
   var scrollId, rollId, isMove, marqueeId;
   var t,b,c,d,e; //滚动动画的参数,t:当前时间，b:开始的位置，c:改变的位置，d:持续的时间，e:结束的位置
   var _size, _len; //子元素的尺寸与个数
   var $nav,$navBtns;
   var arrPos = [];
   var numView = 0; //当前所看子元素
   var numRoll=0; //轮换的次数
   var numMoved = 0;//已经移动的距离

   //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
   $element.css(_type?'width':'height',10000);
   //获取滚动元素的尺寸
   var navHtml = '<ul>';
   if (opts.isEqual) {
    _size = $kids[_type?'outerWidth':'outerHeight']();
    _len = $kids.length;
    scrollSize = _size * _len;
    for(var i=0;i<_len;i++){
     arrPos.push(i*_size);
     navHtml += '<li>'+ (i+1) +'</li>';
    }
   }else{
    $kids.each(function(i){
     arrPos.push(scrollSize);
     scrollSize += $(this)[_type?'outerWidth':'outerHeight']();
     navHtml += '<li>'+ (i+1) +'</li>';
    });
   }
   navHtml += '</ul>';
   
   //滚动元素总尺寸小于容器尺寸，不滚动
   if (scrollSize<(_type?scrollW:scrollH)) return;
   //克隆滚动子元素将其插入到滚动元素后，并设定滚动元素宽度
   $element.append($kids.clone()).css(_type?'width':'height',scrollSize*2);
   
   //轮换导航
   if (opts.navId) {
    $nav = $(opts.navId).append(navHtml).hover( stop, start );
    $navBtns = $('li', $nav);
    $navBtns.each(function(i){
     $(this).bind(opts.eventNav,function(){
      if(isMove) return;
      if(numView==i) return;
      rollFunc(arrPos[i]);
      $navBtns.eq(numView).removeClass('navOn');
      numView = i;
      $(this).addClass('navOn');
     });
    });
    $navBtns.eq(numView).addClass('navOn');
   }
   
   //设定初始位置
   if (opts.direction == 'right' || opts.direction == 'down') {
    _scrollObj[_type?'scrollLeft':'scrollTop'] = scrollSize;
   }else{
    _scrollObj[_type?'scrollLeft':'scrollTop'] = 0;
   }
   
   if(opts.isMarquee){
    //滚动开始
    //marqueeId = setInterval(scrollFunc, opts.scrollDelay);
    marqueeId = setTimeout(scrollFunc, opts.scrollDelay);
    //鼠标划过停止滚动
    $marquee.hover(
     function(){
      clearInterval(marqueeId);
     },
     function(){
      //marqueeId = setInterval(scrollFunc, opts.scrollDelay);
      clearInterval(marqueeId);
      marqueeId = setTimeout(scrollFunc, opts.scrollDelay);
     }
    );
    
    //控制加速运动
    if(opts.controlBtn){
     $.each(opts.controlBtn, function(i,val){
      $(val).bind(opts.eventA,function(){
       opts.direction = i;
       opts.oldAmount = opts.scrollAmount;
       opts.scrollAmount = opts.newAmount;
      }).bind(opts.eventB,function(){
       opts.scrollAmount = opts.oldAmount;
      });
     });
    }
   }else{
    if(opts.isAuto){
     //轮换开始
     start();
     
     //鼠标划过停止轮换
     $marquee.hover( stop, start );
    }
   
    //控制前后走
    if(opts.btnGo){
     $.each(opts.btnGo, function(i,val){
      $(val).bind(opts.eventGo,function(){
       if(isMove == true) return;
       opts.direction = i;
       rollFunc();
       if (opts.isAuto) {
        stop();
        start();
       }
      });
     });
    }
   }
   
   function scrollFunc(){
    var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';
    
    if(opts.isMarquee){
     if (opts.loop > 0) {
      numMoved+=opts.scrollAmount;
      if(numMoved>scrollSize*opts.loop){
       _scrollObj[_dir] = 0;
       return clearInterval(marqueeId);
      }
     }
     var newPos = _scrollObj[_dir]+(opts.direction == 'left' || opts.direction == 'up'?1:-1)*opts.scrollAmount;
    }else{
     if(opts.duration){
      if(t++<d){
       isMove = true;
       var newPos = Math.ceil(easeOutQuad(t,b,c,d));
       if(t==d){
        newPos = e;
       }
      }else{
       newPos = e;
       clearInterval(scrollId);
       isMove = false;
       return;
      }
     }else{
      var newPos = e;
      clearInterval(scrollId);
     }
    }
    
    if(opts.direction == 'left' || opts.direction == 'up'){
     if(newPos>=scrollSize){
      newPos-=scrollSize;
     }
    }else{
     if(newPos<=0){
      newPos+=scrollSize;
     }
    }
    _scrollObj[_dir] = newPos;
    
    if(opts.isMarquee){
     marqueeId = setTimeout(scrollFunc, opts.scrollDelay);
    }else if(t<d){
     if(scrollId) clearTimeout(scrollId);
     scrollId = setTimeout(scrollFunc, opts.scrollDelay);
    }else{
     isMove = false;
    }
    
   };
   
   function rollFunc(pPos){
    isMove = true;
    var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';
    var _neg = opts.direction == 'left' || opts.direction == 'up'?1:-1;

    numRoll = numRoll +_neg;
    //得到当前所看元素序号并改变导航CSS
    if(pPos == undefined&&opts.navId){
     $navBtns.eq(numView).removeClass('navOn');
     numView +=_neg;
     if(numView>=_len){
      numView = 0;
     }else if(numView<0){
      numView = _len-1;
     }
     $navBtns.eq(numView).addClass('navOn');
     numRoll = numView;
    }

    var _temp = numRoll<0?scrollSize:0;
    t=0;
    b=_scrollObj[_dir];
    //c=(pPos != undefined)?pPos:_neg*opts.distance;
    e=(pPos != undefined)?pPos:_temp+(opts.distance*numRoll)%scrollSize;
    if(_neg==1){
     if(e>b){
      c = e-b;
     }else{
      c = e+scrollSize -b;
     }
    }else{
     if(e>b){
      c =e-scrollSize-b;
     }else{
      c = e-b;
     }
    }
    d=opts.duration;
    
    //scrollId = setInterval(scrollFunc, opts.scrollDelay);
    if(scrollId) clearTimeout(scrollId);
    scrollId = setTimeout(scrollFunc, opts.scrollDelay);
   }
   
   function start(){
    rollId = setInterval(function(){
     rollFunc();
    }, opts.time*1000);
   }
   function stop(){
    clearInterval(rollId);
   }
   
   function easeOutQuad(t,b,c,d){
    return -c *(t/=d)*(t-2) + b;
   }
   
   function easeOutQuint(t,b,c,d){
    return c*((t=t/d-1)*t*t*t*t + 1) + b;
   }

  });
 };
 $.fn.kxbdSuperMarquee.defaults = {
  isMarquee:false,//是否为Marquee
  isEqual:true,//所有滚动的元素长宽是否相等,true,false
  loop: 0,//循环滚动次数，0时无限
  newAmount:3,//加速滚动的步长
  eventA:'mousedown',//鼠标事件，加速
  eventB:'mouseup',//鼠标事件，原速
  isAuto:true,//是否自动轮换
  time:5,//停顿时间，单位为秒
  duration:50,//缓动效果，单次移动时间，越小速度越快，为0时无缓动效果
  eventGo:'click', //鼠标事件，向前向后走
  direction: 'left',//滚动方向，'left','right','up','down'
  scrollAmount:1,//步长
  scrollDelay:10,//时长
  eventNav:'click'//导航事件
 };
 
 $.fn.kxbdSuperMarquee.setDefaults = function(settings) {
  $.extend( $.fn.kxbdSuperMarquee.defaults, settings );
 };
 
})(jQuery);

 

使用方法很简单,你只要申明函数就可以了,在HTML代码中你只需要指定操作的对象就可以了,现在我们就来实际操作以下

1 一次横向滚动一个;

<style>

#marquee1 {position:absolute;top:80px;left:50px;width:186px;height:45px;overflow:hidden;background:#333;border:1px solid #333;}
  #marquee1 ul li {float:left;padding:0 1px;}
  #marquee1 ul li img {display:block;}

</style>

<a href="javascript:void(0);" id="goL">左移一次</a> <a href="javascript:void(0);" id="goR">右移一次</a>

<div id="marquee1">
  <ul>
   <li><img  src="../images/01s.jpg" width="60" height="45" /></li>
   <li><img  src="../images/02s.jpg" width="60" height="45" /></li>
   <li><img  src="../images/03s.jpg" width="60" height="45" /></li>
   <li><img  src="../images/04s.jpg" width="60" height="45" /></li>
  </ul>
 </div>

js.代码为

<script type="text/javascript">

$(function(){
   //一次横向滚动一个
   $('#marquee1').kxbdSuperMarquee({
    distance:186,
    time:3,
    btnGo:{left:'#goL',right:'#goR'},
    direction:'left'
   });

 });

</script>

 

是不是很简单啊

那现在我们就把其他的都写在一起,大家可以实际操作以下

<!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>
 <meta name="generator" content="raojinpg" />
 <meta name="author" content="raojinpg00@126.com" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 <style type="text/css">
  * {margin:0;padding:0;}
  body { font-size:12px;}
  a {color:#333;}
  ul {list-style:none;}
  #marquee1 {position:absolute;top:80px;left:50px;width:186px;height:45px;overflow:hidden;background:#333;border:1px solid #333;}
  #marquee1 ul li {float:left;padding:0 1px;}
  #marquee1 ul li img {display:block;}
  
  #marquee2 {position:absolute;top:80px;left:300px;width:60px;height:141px;overflow:hidden;background:#333;border:1px solid #333;}
  #marquee2 ul li {float:left;padding:1px 0;}
  #marquee2 ul li img {display:block;}
  
  #marquee3 {position:absolute;top:80px;left:530px;width:400px;height:300px;overflow:hidden;background:#333;border:1px solid #333;}
  #marquee3 ul li {float:left;}
  #marquee3 ul li img {display:block;}
  
  #mar3Nav {position:absolute;left:535px;top:90px;}
  #mar3Nav li {float:left;margin:0 3px;width:16px;height:16px;background:#333;border:1px solid #FFF;cursor:pointer;
     line-height:16px;font-family:Arial;font-size:10px;color:#FFF;text-align:center;}
  #mar3Nav li.navOn {background:#FF6600;}
  
  #marquee4 {position:absolute;top:150px;left:50px;width:186px;height:45px;overflow:hidden;background:#333;border:1px solid #333;}
  #marquee4 ul li {float:left;padding:0 1px;}
  #marquee4 ul li img {display:block;}
  
  #marquee5 {position:absolute;top:250px;left:50px;width:200px;height:100px; overflow:hidden;background:#EFEFEF;}
  #marquee5 ul li {float:left; width:180px; height:80px; padding:10px; line-height:20px;}
  
  #marquee6 {position:absolute;top:250px;left:300px;width:200px;height:100px; overflow:hidden;background:#EFEFEF;}
  #marquee6 ul li {float:left; width:180px; padding:10px; line-height:20px;}
  
  #control {position:absolute;left:20px; top:20px;}
  
  #contro2 {position:absolute;left:300px; top:20px;}
  
  #contro3 {position:absolute;left:20px; top:200px;}
  
  #contro4 {position:absolute;left:300px; top:380px;}
  
  
 </style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/kxbdSuperMarquee.js"></script>
 <script type="text/javascript">
  
  $(function(){
   //一次横向滚动一个
   $('#marquee1').kxbdSuperMarquee({
    distance:186,
    time:3,
    btnGo:{left:'#goL',right:'#goR'},
    direction:'left'
   });
   
   //一次纵向滚动一个
   $('#marquee2').kxbdSuperMarquee({
    distance:47,
    time:3,
    btnGo:{up:'#goU',down:'#goD'},
    direction:'down'
   });
   //一次滚动一屏
   $('#marquee3').kxbdSuperMarquee({
    distance:400,
    time:4,
    navId:'#mar3Nav',
    direction:'left'
   });
   
   //一次滚动一屏，不自动滚动，点击滚动，可作为导航
   $('#marquee4').kxbdSuperMarquee({
    isAuto:false,
    distance:186,
    btnGo:{left:'#goL2',right:'#goR2'},
    direction:'left'
   });
   //一次滚动一屏
   $('#marquee5').kxbdSuperMarquee({
    isEqual:false,
    distance:100,
    time:4,
    //btnGo:{up:'#goU',down:'#goD'},
    direction:'up'
   });
   //Marquee
   $('#marquee6').kxbdSuperMarquee({
    isMarquee:true,
    isEqual:false,
    scrollDelay:20,
    controlBtn:{up:'#goUM',down:'#goDM'},
    direction:'up'
   });
   
   
  });

 </script>
</head>

<body>
 <div id="control">一次横向滚动一个<br />↓鼠标点击：<a href="javascript:void(0);" id="goL">左移一次</a> <a href="javascript:void(0);" id="goR">右移一次</a></div>
 <div id="contro2">一次纵向滚动一个<br />↓鼠标点击：<a href="javascript:void(0);" id="goU">上移一次</a> <a href="javascript:void(0);" id="goD">下移一次</a></div>
 <div id="contro3">默认不动，可做图片导航<br />↑鼠标点击：<a href="javascript:void(0);" id="goL2">左移一屏</a> <a href="javascript:void(0);" id="goR2">右移一屏</a></div>
 <div id="contro4">Marquee<br />↑鼠标按住：<a href="javascript:void(0);" id="goUM">加速上移</a> <a href="javascript:void(0);" id="goDM">加速下移</a></div>
 <div id="marquee1">
  <ul>
   <li><img  src="../images/01s.jpg" width="60" height="45" /></li>
   <li><img  src="../images/02s.jpg" width="60" height="45" /></li>
   <li><img  src="../images/03s.jpg" width="60" height="45" /></li>
   <li><img  src="../images/04s.jpg" width="60" height="45" /></li>
  </ul>
 </div>
 
 <div id="marquee2">
  <ul>
   <li><img  src="../images/01s.jpg" width="60" height="45" /></li>
   <li><img  src="../images/02s.jpg" width="60" height="45" /></li>
   <li><img  src="../images/03s.jpg" width="60" height="45" /></li>
   <li><img  src="../images/04s.jpg" width="60" height="45" /></li>
  </ul>
 </div>
 
 <div id="marquee3">
  <ul>
   <li><img  src="../images/01.jpg" width="400" height="300" /></li>
   <li><img  src="../images/02.jpg" width="400" height="300" /></li>
   <li><img  src="../images/03.jpg" width="400" height="300" /></li>
   <li><img  src="../images/04.jpg" width="400" height="300" /></li>
  </ul>
 </div>
 <div id="mar3Nav"></div>
 
 <div id="marquee4">
  <ul>
   <li><img  src="../images/01s.jpg" width="60" height="45" alt="1" /></li>
   <li><img  src="../images/02s.jpg" width="60" height="45" alt="2"/></li>
   <li><img  src="../images/03s.jpg" width="60" height="45" alt="3"/></li>
   <li><img  src="../images/04s.jpg" width="60" height="45" alt="4"/></li>
   <li><img  src="../images/05s.jpg" width="60" height="45" alt="5"/></li>
   <li><img  src="../images/06s.jpg" width="60" height="45" alt="6"/></li>
            <li><img  src="../images/04s.jpg" width="60" height="45" alt="7"/></li>
   <li><img  src="../images/05s.jpg" width="60" height="45" alt="8"/></li>
   <li><img  src="../images/06s.jpg" width="60" height="45" alt="9"/></li>
  </ul>
 </div>
 
 <div id="marquee5">
  <ul>
   <li><a href="#">新闻公告一新闻公告一新闻公告一新闻公告一新闻公告一新闻公告一新闻公告一新闻公告一新闻公告一新闻公告一新闻公告一新闻公告一</a></li>
   <li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二</a></li>
   <li><a href="#">新闻公告三新闻公告三新闻公告三新闻公告三新闻公告三新闻公告三新闻公告三新闻公告三新闻公告三新闻公告三新闻公告三新闻公告三</a></li>
   <li><a href="#">新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四</a></li>
   <li><a href="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li>
   <li><a href="#">新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六</a></li>
  </ul>
 </div>
 
 <div id="marquee6">
  <ul>
   <li><a href="#">新闻公告一新闻公告一</a></li>
   <li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二</a></li>
   <li><a href="#">新闻公告三新闻公告三新闻公告三新闻公告三</a></li>
   <li><a href="#">新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四</a></li>
   <li><a href="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li>
   <li><a href="#">新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六</a></li>
  </ul>
 </div>

</body>
</html>