带同时滚动小色条的banner轮播图jq
<div class="baoliao tongcheng">
<p class="headline1">同城<font>活动>></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轮播图jq的更多相关文章
- 用JavaScript制作banner轮播图
JavaScript_banner轮播图 让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...
- 原生无缝Banner轮播图
话不多说,先展示效果图.由于录制工具,稍显卡顿,实际是流畅的.可以看到实现了无缝轮播,鼠标悬停,点击左右上下按钮切换Banner的功能,如图1所示. 图1 原生无缝banner效果展示 以我这个轮播图 ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- banner轮播图js
例子1: if(!$('.side_ul ul').is(":animated")){ var wli = $('.side_ul li').width()+ ...
- 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)
大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
- 安卓开发笔记(三十二):banner轮播图的实现
一.activity.xml 我这里主要爬取的爱奇艺首页的图片进行轮播,应用了两个github上的开源库,一个banner的库,一个加载网络图片的库,用开源库能够极大地节省我们编写代码的时间. < ...
- 微信小程序_(组件)swiper轮播图
微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...
- 如何使用微信小程序制作banner轮播图?
在前端工程师的工作中,banner是必不可少的,那缺少了DOM的小程序是如何实现banner图的呢?如同其他的框架封装了不同的banner图的方法,小程序也封装了banner的方法,来让我一一道来: ...
- 【微信小程序】:实现轮播图3秒滚动
wxml模板:(数据一维数组) <scroll-view scroll-y="true"> <swiper autoplay="auto" i ...
随机推荐
- Arithmetic Progressions
题目大意: 求出满足条件A的等差数列: A:长度为N(N<=25),每个元素都能表示成 两个数p,q的平方和(0<=p,q<=m<=250): 解题过程: 1.处理出所有的能拆 ...
- C#生成唯一的ID保存到数据库
直接用.NET Framework 提供的 Guid() 函数: Guid.NewGuid()是指生成唯一码的规则 System.Guid.NewGuid().ToString()全球唯一标识符 (G ...
- 仿淘宝js图片切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- redis学习(一)
一.redis简介 Redis是基于内存.可持久化的日志型.key-value高性能存储系统.关键字(Keys)是用来标识数据块.值(Values)是关联于关键字的实际值,可以是任何东西.有时候你会存 ...
- JVM-class文件完全解析-方法表集合
方法表集合 前面的魔数,次版本号,主板本号,常量池入口,常量池,访问标志,类索引,父类索引,接口索引集合,字段表集合,那么再接下来就是方法表了. 方法表的构造如同字段表一样,依次包括了访问标志(a ...
- java应用程序和虚拟机实例之间的关系
每一个java程序都会产生一个java虚拟机的实例.并不是说一个物理机上,运行多个java应用程序就只有一个java虚拟机实例,多少个java应用程序就有多少个java虚拟机实例.
- ld can't link with a main executable file for architecture armv7
在iPhone 6 Plus上跑的时候遇到了这么一个错误:ld can't link with a main executable file for architecture armv7,然后就各种改 ...
- Linksys WRT120N路由器备份文件解析
Perusing the release notes for the latest Linksys WRT120N firmware, one of the more interesting comm ...
- Oracle之ROW_NUMBER() OVER函数
语法:ROW_NUMBER() OVER(ORDER BY COLUMN) 简单的说row_number()从1开始,为每一条分组记录返回一个数字,这里的select ACD_ID,ROW_NUMBE ...
- 2016 - 1 -19 初探NSOperation
一:简介 1.NSOperation的作用: 配合NSOperation与NSOperationQueue也可以实现多线程. 2.NSOperation与NSOperationQueue实现多线程的步 ...