js jquery做的图片连续滚动代码

 更新时间:2008年01月06日 00:04:23   作者:  
有bug..点到后面的图片后,再返回 ..... 问题出现了...

核心代码如下,大家可以参考

复制代码 代码如下:

<script src="/js/jquery.js"></script> 
<script> 
$(document).ready(function(){ 

       $(".bannerbutton li").each( 
                     function(){ 
                            $(this).click( 
                                   function(){ 
                                          bannerGo($(this).attr("num")); 
                                   } 
                            ) 
                     } 
              ) 
       $(".img li:last").html($(".img li:first").html()); 
}); 
var active=1;//当前显示第1个 
var picNum=4;//4个图转换 
var time=500;//移动速度 
var intTime=3000;//自动转换间隔时间 
var width=568; //图片宽 
var perDistance=57;//每次移动距离 
var tagObj=0; 
var marquee; 
var autoMarquee; 
var distance; 
var tmpDistance=0; 
var listLeft=0; 
var tagLeft=0; 
var move=false; 



function bannerGo(tag){ 
       if(active != tag){ 
              if(!move){ 
              listLeft=parseInt($(".banner ul.img").css("left")); 
              distance=(tag-active)*width; 
              tmpDistance=0; 
              perTime=parseInt(time*perDistance/distance); 
              if(tag>active){ 
                     tagLeft=listLeft-distance; 
                     marquee=setInterval("Marquee(1)",perTime) 
              }else{ 
                     tagLeft=listLeft-distance; 
                     marquee=setInterval("Marquee(0)",perTime) 
              } 
              active=Number(tag); 
              if(active==picNum+1) 
                     active=1; 
              move=true; 
              } 
       } 


function Marquee(t){ 
       var x=false; 
       if(t==0){ 
              listLeft=listLeft+perDistance; 
              if((tagLeft-listLeft)>=perDistance){ 
                     $(".banner ul.img").css("left",listLeft+"px"); 
              }else{ 
                     $(".banner ul.img").css("left",tagLeft+"px"); 
                     x=true; 
              } 
       }else{ 
              listLeft=listLeft-perDistance; 
              if((tagLeft-listLeft)<=perDistance){ 
                     $(".banner ul.img").css("left",listLeft+"px"); 
              }else{ 
                     $(".banner ul.img").css("left",tagLeft+"px"); 
                     x=true; 
              } 
       } 
       if(x){ 
              clearInterval(marquee); 
              tmpDistance=0; 
              listLeft=0; 
              tagLeft=0; 
              move=false; 
              $(".bannerbutton li").css("background","url(/images/index/b2.gif) no-repeat"); 
              $(".bannerbutton li[@num="+active+"]").css("background","url(/images/index/b1.gif) no-repeat"); 
              if(tagObj==picNum+1){ 
              $(".banner ul.img").css("left","0"); 
              active=1; 
              } 
       } 


function autoMarquee(){ 
       tagObj=Number(active)+1; 
       bannerGo(tagObj); 


function autoMarqueeStart(){ 
       if(!move){ 
       marquee=setInterval("autoMarquee()",intTime) 
       }else{ 
       setTimeout("autoMarqueeStart()",time); 
       } 


autoMarqueeStart(); 
</script> 
<style> 
*{margin:0;padding:0;border:0} 
li{float:left;} 
ul{list-style-type:none;} 
.banner{height:228px;width:568px;overflow:hidden;} 
.bannerbutton li{ 
       width:23px; 
       height:22px; 
       background:url(/images/index/b2.gif) no-repeat; 
       cursor:pointer; 
       line-height:22px; 
       text-align: center; 
       color: #fff; 
       font-weight: bold; 

.banner .img li{float:left;} 
.banner .img { 
       position: relative;width:5600px; 

body,td,th { 
       font-size: 12px; 

body { 
       margin-left: 0px; 
       margin-top: 0px; 
       margin-right: 0px; 
       margin-bottom: 0px; 

</style> 
<div class="banner"> 
        <ul class="bannerbutton" style="position:absolute;z-index:2;top:200px;;left:10px;"> 
                                   <li num=1 style="background:url(/images/index/b2.gif);">1</li> 
                                   <li num=2>2</li> 
                                   <li num=3>3</li> 
                                   <li num=4>4</li> 
       </ul> 
  <ul class="img" style="left:0px;"> 
                            <li><img src="/images/temp/bn1.jpg" width="568" height="228"></li> 
                            <li><img src="/upload/image/2007-11-17_17-30-42.jpg" width="568" height="228"></li> 
                            <li><img src="/upload/image/4bb7eaf902000mnl.jpg" width="568" height="228"></li> 
                            <li><img src="/upload/image/Products/2007-11-16_22-11-15.jpg" width="568" height="228"></li> 
                            <li></li> 
   </ul> 
</div>

相关文章

  • 浅谈jQuery双事件多重加载的问题

    浅谈jQuery双事件多重加载的问题

    下面小编就为大家带来一篇浅谈jQuery双事件多重加载的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • jquery实现的Banner广告收缩效果代码

    jquery实现的Banner广告收缩效果代码

    这篇文章主要介绍了jquery实现的Banner广告收缩效果代码,可实现点击按钮收缩与展开广告图片的功能,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • Jquery读取URL参数小例子

    Jquery读取URL参数小例子

    读取URL参数的方法各种各样不过大同小异,下面本文使用jquery来实现读取URL参数示例,感兴趣的朋友可以练练手哦
    2013-08-08
  • jquery ajax 同步异步的执行示例代码

    jquery ajax 同步异步的执行示例代码

    jquery ajax 同步异步的执行示例代码,需要的朋友可以参考下。
    2010-06-06
  • jquery 操作iframe的几种方法总结

    jquery 操作iframe的几种方法总结

    这篇文章主要是对使用jquery操作iframe的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • jQuery制作拼图小游戏

    jQuery制作拼图小游戏

    这篇文章主要介绍了jQuery制作拼图小游戏,思路与源码都分享给大家,需要的朋友可以参考下
    2015-01-01
  • JQuery index()方法使用代码

    JQuery index()方法使用代码

    做了很多种方式的选择项卡切换。没有一个确定的方法。程序的魅力就在于一个[结果]有无数种[方式]去实现。
    2010-06-06
  • AJAX和jQuery动态加载数据的实现方法

    AJAX和jQuery动态加载数据的实现方法

    本文给大家介绍使用ajax和jquery动态加载数据的实现方法,使用jQuery可以简化这个过程。下面通过实例代码给大家介绍下,需要的的朋友参考下吧
    2016-12-12
  • 常用jQuery选择器总结

    常用jQuery选择器总结

    这篇文章主要介绍了常用jQuery选择器总结,总结的很简洁,很容易看明白和学会它,需要的朋友可以参考下
    2014-07-07
  • easyui 中的datagrid跨页勾选问题的实现方法

    easyui 中的datagrid跨页勾选问题的实现方法

    很多朋友都遇到这样的需求,easyui的datagrid分页显示数据,如果有需求要求勾选多条数据且不再同一页中,easyui会保存在其他页选中的数据吗?小编结合资料自己整理了一篇文章,需要的的朋友参考下吧
    2017-01-01

最新评论