例子1:

if(!$('.side_ul ul').is(":animated")){
            var wli = $('.side_ul li').width()+25;
            var lli = $('.side_ul li').length;
            var tw = lli*wli;
            var witem = wli*3;
            var marl = parseInt($('.side_ul ul').css('margin-left'));
            var endmar = (parseInt(tw/witem)-1)*witem;
            if(marl <= -endmar){
                $('.side_ul ul').animate({marginLeft:'0px'},300)
            }else{
                $('.side_ul ul').animate({marginLeft:marl-witem+'px'},300)
            }
        }

例子2:带有底部小色条同时滚动

  1.  
  1. <div class="baoliao tongcheng">
    <p class="headline1">同城<font>活动&gt;&gt;</font></p>
    <ul class="tongchengul">
    <li>
    <div class="libox">
    <div class="imgboxoo">
    <a href="#">
    <img src="img/143686314955a4caad6a0ab.jpg">
    </a>
    </div>
    <div class="textboxoo">
    <h4><a href="#">1顺势而为!共享史上最大财富盛宴</a></h4>
    <p>2015-12-23 15:52<a href="#">参与活动</a></p>
    <p class="zhuzhi">山东济南市高新区舜泰广场<span><font>18</font> 报名</span></p>
    </div>
    </div>
    </li>
    <li>
    <div class="libox">
    <div class="imgboxoo">
    <a href="#">
    <img src="img/143686314955a4caad6a0ab.jpg">
    </a>
    </div>
    <div class="textboxoo">
    <h4><a href="#">2顺势而为!共享史上最大财富盛宴</a></h4>
    <p>2015-12-23 15:52<a href="#">参与活动</a></p>
    <p class="zhuzhi">山东济南市高新区舜泰广场<span><font>18</font> 报名</span></p>
    </div>
    </div>
    </li>
    <li> <div class="libox"> <div class="imgboxoo"> <a href="#"> <img src="img/143686314955a4caad6a0ab.jpg"> </a> </div> <div class="textboxoo"> <h4><a href="#">3顺势而为!共享史上最大财富盛宴</a></h4> <p>2015-12-23 15:52<a href="#">参与活动</a></p> <p class="zhuzhi">山东济南市高新区舜泰广场<span><font>18</font> 报名</span></p> </div> </div> </li> <li> <div class="libox"> <div class="imgboxoo"> <a href="#"> <img src="img/143686314955a4caad6a0ab.jpg"> </a> </div> <div class="textboxoo"> <h4><a href="#">4顺势而为!共享史上最大财富盛宴</a></h4> <p>2015-12-23 15:52<a href="#">参与活动</a></p> <p class="zhuzhi">山东济南市高新区舜泰广场<span><font>18</font> 报名</span></p> </div> </div> </li> <li> <div class="libox"> <div class="imgboxoo"> <a href="#"> <img src="img/143686314955a4caad6a0ab.jpg"> </a> </div> <div class="textboxoo"> <h4><a href="#">5顺势而为!共享史上最大财富盛宴</a></h4> <p>2015-12-23 15:52<a href="#">参与活动</a></p> <p class="zhuzhi">山东济南市高新区舜泰广场<span><font>18</font> 报名</span></p> </div> </div> </li> <div class="clear"></div> </ul> <div class="gudongtiao"> <ul class="icongun"> <li class="gudongli"></li> <li></li> <li></li> <li></li> <li></li> <div class="clear"></div> </ul> </div></div> <script> $(function(){ var width = $('.tongcheng .headline1').width(); var ulwidth = width*5; $('.tongcheng').width(width); $('.tongchengul li').width(width); $('.tongchengul').width(ulwidth); var t = setInterval('lunbo()',2000); }); function lunbo(){ if(!$('.tongchengul').is(":animated")){ var width = $('.tongcheng .headline1').width(); var length = $('.tongchengul li').length; var ulwidth = width*length; var marginleft = parseInt($('.tongchengul').css('margin-left')); var maxmarginleft = (parseInt(ulwidth/width)-1)*width; if(marginleft<= -maxmarginleft){ $('.tongchengul').css('margin-left',-width); $('.tongchengul').animate({marginLeft:'0px'},300,function(){ $('.icongun li').siblings().removeClass('gudongli'); $('.icongun li:eq(0)').addClass('gudongli'); }); }else{ $('.tongchengul').animate({marginLeft:marginleft-width+'px'},300,function(){ var num = Math.abs(marginleft/width-1); $('.icongun li').siblings().removeClass('gudongli'); $('.icongun li:eq('+num+')').addClass('gudongli'); }); } } } </script>
  1.  

banner轮播图js的更多相关文章

  1. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  2. 用JavaScript制作banner轮播图

    JavaScript_banner轮播图 让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...

  3. 原生无缝Banner轮播图

    话不多说,先展示效果图.由于录制工具,稍显卡顿,实际是流畅的.可以看到实现了无缝轮播,鼠标悬停,点击左右上下按钮切换Banner的功能,如图1所示. 图1 原生无缝banner效果展示 以我这个轮播图 ...

  4. 小米官网轮播图js+css3+html实现

    官网轮播: 我的轮播: 重难点: 1.布局 2.图片和右下角小圆点的同步问题 3.setInterval定时器的使用 4.淡入淡出动画效果 5.左右箭头点击时,图片和小圆点的效果同步 6.另一种轮播思 ...

  5. 轮播图--JS手写

    轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> < ...

  6. 轮播图js编写

    //面向对象 function Left() { this.index = 0; this.lefthover = $('#left-content'); this.listenhover(); th ...

  7. 安卓开发笔记(三十二):banner轮播图的实现

    一.activity.xml 我这里主要爬取的爱奇艺首页的图片进行轮播,应用了两个github上的开源库,一个banner的库,一个加载网络图片的库,用开源库能够极大地节省我们编写代码的时间. < ...

  8. 轮播图--js课程

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 轮播图js版&jQ版

    JS版轮播图 html部分和css部分自己任意定 主要构成: 1,一个固定的框 超出框的部分隐藏 2,几张图片float:left 3,下部下原点,点击切换,切换到不同的张都有红色显示 4,左右两个大 ...

随机推荐

  1. php file_get_contents curl发送cookie,使用代理

    $auth = base64_encode('LOGIN:PASSWORD');//LOGIN:PASSWORD 这里是你的账户名及密码 $aContext = array( 'http' => ...

  2. hdu 4610 Cards

    http://acm.hdu.edu.cn/showproblem.php?pid=4610 先求出每个数的得分情况,分数和得分状态,(1<<4)种状态 按分数从大到小排序 然后每种状态取 ...

  3. [转载]Android核心分析

    2013-12-19 15:44:03 转载自: http://blog.csdn.net/column/details/androidcore.html 很好的文章,阅读请跳转到转载链接,转载备以后 ...

  4. NOIP 2013 提高组 day2 积木大赛

      积木大赛 描述 春春幼儿园举办了一年一度的“积木大赛”.今年比赛的内容是搭建一座宽度为 n 的大厦,大厦可以看成由 n 块宽度为1的积木组成,第

  5. JDBC 元数据 事务处理

    使用 JDBC 驱动程序处理元数据 Java 通过JDBC获得连接以后,得到一个Connection 对象,可以从这个对象获得有关数据库管理系统的各种信息,包括数据库中的各个表,表中的各个列,数据类型 ...

  6. SSH(2)-- ssh_config和sshd_config

    假定服务器ip为192.168.1.139,ssh服务的端口号为22,服务器上有个用户为pi,两边都是ubuntu. ssh_config和sshd_config都是ssh服务器的配置文件,二者区别在 ...

  7. 自定义ImageView的MainActivity

    package com.baidu.lianximyview; import com.example.myimageview.MyImageView; import android.os.Bundle ...

  8. JVM-类文件结构

    无关性的基石 I> "平台无关性"实现在操作系统的应用层上:sun公司以及其他虚拟机提供商发布了许多可以运行在各种不同平台上的虚拟机,这些虚拟机都可以载入和执行同一种平台无关 ...

  9. Oracle的DDL、DML、DCL

    DDL (Data Definition Language 数据定义语言) create table 创建表 alter table 修改表 drop table 删除表 truncate table ...

  10. Android 对 properties文件的读写操作

    -. 放在res中的properties文件的读取,例如对放在assets目录中的setting.properties的读取:PS:之所以这里只是有读取操作,而没有写的操作,是因为我发现不能对res下 ...