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


Posted in Javascript onJanuary 06, 2008

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

<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>
Javascript 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
javascript常用经典算法详解
Jan 11 Javascript
js a标签点击事件
Mar 30 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 Javascript
javascript 屏蔽鼠标键盘的几段代码
Jan 02 #Javascript
js获取url参数的使用扩展实例
Dec 29 #Javascript
javascript js cookie的存储,获取和删除
Dec 29 #Javascript
javascript下function声明一些小结
Dec 28 #Javascript
用js实现的页面关键字密度查询代码
Dec 27 #Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 #Javascript
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 #Javascript
You might like
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
php 学习资料零碎东西
2010/12/04 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
header跳转和include包含问题详解
2012/09/08 PHP
php中的比较运算符详解
2013/10/28 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
jQuery 表单验证扩展(四)
2010/10/20 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
Python生成随机密码的方法
2017/06/16 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
神路信息Java面试题目
2013/03/31 面试题
员工评语大全
2014/01/19 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
爱护公物标语
2014/06/24 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
个人承诺书格式范文
2015/04/29 职场文书
正规欠条模板
2015/07/03 职场文书