例子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:带有底部小色条同时滚动


<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>
												

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. flask剖析

    1.为何只要通过import request,就能拿到对应的request呢?怎么解决区分请求,区分线程的问题? 简而言之,就是通过拿栈顶对象就表示是当前活动的对象 但对于多线程,由于栈的数据结构是 ...

  2. [网络技术]网关 路由器 OSI

    tracert 1.网关与路由 关键的区别:网关是这样一个网络节点:以两个不同协议搭建的网络可以通过它进行通信.路由器是这样一种设备:它能在计算机网络间收发数据包,同时创建一个覆盖网络(overlay ...

  3. SharePoint 2013 Nintex Workflow 工作流帮助(四)

    博客地址 http://blog.csdn.net/foxdave 接上篇点击打开链接 我们来看下一个配置标签Ribbon Option: Task Notification(用于配置分配任务时的提醒 ...

  4. mybatis 参数问题

    load方法,往sql语句中传一个参数的那种,似乎parameterType并不是那么重要,不写其实都可以,而且sql语句中的比如username=#{A} 这里面的A可以随便写,只要传过来的是个St ...

  5. Connection to http://www.google.com:80 refused

    使用SDK Manager更新时出现问题 Failed to fetch URL https://dl-ssl.google.com/android/repository/repository-6.x ...

  6. ant新建scp和sshexec任务

    1.build.xml中新建targer如下: <target name="remotecopytest" description="拷贝文件到远程服务器" ...

  7. JSP如何在servlet将一个数据模型对象传递给jsp页面

    在servlet把对象放到request里,然后jsp里直接通过request取值如 在servlet:(简写了)public void doGet(request,response){UserInf ...

  8. 层次分析模型(AHP)及其MATLAB实现

    今天用将近一天的时间学习了层次分析模型(AHP),主要参考了一份pdf,这个网站,和暨南大学章老师的课件,现写出一些自己总结的要点. 一.层次分析法的基本步骤: 角度一: 实际问题——分解——> ...

  9. 【LeetCode OJ】Valid Palindrome

    Problem Link: http://oj.leetcode.com/problems/valid-palindrome/ The following two conditions would s ...

  10. ERP存储过程的调用和树形菜单的加载(四)

    引用:DAL:System.Data.SqlClient;System.Data; namespace CommTool { public class SqlComm { /// <summar ...