banner轮播图js
2015-12-25 17:35
651 查看
例子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:带有底部小色条同时滚动
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>活动>></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>
相关文章推荐
- 推荐牛X的一本JS书
- 在Angular.js使用组合+依赖注入而不是继承
- js中String类型对象的方法使用
- 如何创建AnjularJS项目
- js ajax
- JSON-lib框架,转换JSON、XML不再困难
- javascript之DOM操作
- 在javascript中关于submit和button提交表单区别
- extjs 按条件查询出的数据在grid上不显示
- javascript图片预加载实例分析
- js数据过滤
- javascript中的super
- 【JAVASCRIPT】JS实现淘宝,百度评分功能
- js方法数据验证
- 不得不分享的JavaScript常用方法函数集(下)
- 常用jstl标签小结
- JS正则中的RegExp对象对象
- ArcGIS API for JavaScript 学习之 identifyTask
- javaWeb学习笔记-----3 javascript
- JavaScript的Cookie操作