jquery Banner轮播选项卡


Posted in Javascript onDecember 26, 2016

本文实例为大家分享了jquery Banner轮播选项卡的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wraper{
width: 1200px;
margin: 0 auto;
position: relative;
}
.banner{
width: 100%;
position: relative;
height: 460px;
}
.banner ul{
position:absolute; 
left:0; 
top:0; 
width:10000px;
}
.ba_slider{ width:1920px; 
height:460px; 
position:absolute; 
overflow: hidden; 
left: 50%; 
margin-left: -960px; 
}
.ba_center{


position: absolute;
height: 460px;
left: 50%;
top: 0;
margin-left:-600px; 
}
.ba_slider ul{ position:relative; 
width: 100000px; 
}
.ba_slider ul li{ 
position: relative;
float: left; 
}
.ba_slider img{ 
width:1920px; 
height:460px; 
}
.ba_prev,.ba_next{ 
width:60px; 
height:100px; 
background:rgba(0,0,0,0.5); 
color:#fff; 
text-decoration:none; 
font-size:50px; 
line-height:100px; 
text-align:center; 
position:absolute; 
top:50%; 
margin-top:-50px; 
z-index:99; 
}
.ba_prev{ left:0; }
.ba_next{ right:0; }
.ba_slider ol{ 
position:absolute; 
left:50%; 
bottom:10px; 
overflow:hidden; 
margin-left:-220px; 
}
.ba_slider ol li{ 
width:100px;
height:6px; 
background:rgb(85,85,85); 
float:left; margin-right:10px; 
}
.ba_slider ol li.on{ 
background:#fff; 
}
</style>
</head>
<body>
<div class="banner">
<div class="ba_slider">
<div class="wraper ba_center">
<a class="ba_prev" href="javascript:;"><</a>
   <a class="ba_next" href="javascript:;">></a>
</div>
 
 <ul>
   <li>
   <a href="javascript:;"> 
    <img src="http://scimg.3water.com/allimg/140708/11-140FQ53531Q9.jpg" alt="" />
    </a>
   </li>
   <li>
   <a href="javascript:;"> 
    <img src="http://sc.3water.com/uploads/allimg/140520/10-140520212515A9.jpg" alt="" />
    </a>
   </li>
   <li>
   <a href="javascript:;">
    <img src="http://www.xxyo.com/pictures/xz/4.jpg" alt="" />
    </a>
   </li>
   <li>
   <a href="javascript:;">
    <img src="http://img1.3lian.com/2015/w7/85/d/25.jpg" alt="" />
    </a>
   </li>
  </ul>
  <ol>
   <li class="on"></li>
   <li></li>
   <li></li>
   <li></li>
  </ol>
</div>
 </div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
cBanner();
function cBanner(){
var iNow=0; //初始化自定义值
var w = $('.ba_slider ul img').width(); //获取图片宽度
function bTimer(){
//定时器
clearInterval(b_timer);
//先关后开
var b_timer = setInterval(function(){ 
iNow++; 
if(iNow == $('.ba_slider ul li').length){ //判断是否最后一张图片
iNow=0;
}
tab(); //当前分页器高亮
$('.ba_slider ul').eq(0).animate({ //ul运动距离
left:-iNow*w
},1000);

},2000); //定时器时间
$('.ba_slider').mouseover(function(){ //鼠标移入关闭定时器
clearInterval(b_timer);
});
}
bTimer(); //定时器函数调用
$('.ba_slider').mouseout(function(){
//鼠标移出调用定时器
bTimer();
});
$('.ba_next').click(function (){
//点击切换下一个图片
iNow++; 
if(iNow==$('.ba_slider ul li').length){ //判断iNow是否为最后一张图片
iNow=0;
}
$('.ba_slider ul').eq(0).animate({  //运动距离
left:-iNow*w
},1000);
tab(); //当前分页器高亮

});
$('.ba_prev').click(function (){  //点击切换上一个
iNow--;
if(iNow==-1){ //判断是否是第一张图片
iNow = $('.ba_slider ul li').length-1 ;
}
$('.ba_slider ul').eq(0).animate({ //运动距离
left:-iNow*w
},1000);
tab(); //当前分页器高亮
});

$('ol li').click(function (){
//点击分页器选择图片
iNow=$(this).index();
//iNow赋值为当前分页器索引值
$('.ba_slider ul').eq(0).animate({
left:-iNow*w
},1000);
tab();
});
function tab(){
//分页器高亮效果
$('ol li').removeClass('on');
$('ol li').eq(iNow).addClass('on');
}
};
</script>
</html>

github地址:https://github.com/seven-it/jqBanner

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JS剩余字数计算的代码
Jul 03 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
js 上传图片预览问题
Dec 06 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 #Javascript
Angular的自定义指令以及实例
Dec 26 #Javascript
如何提高javascript加载速度
Dec 26 #Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 #Javascript
javascript实现去除HTML标签的方法
Dec 26 #Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 #Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 #Javascript
You might like
论建造顺序的重要性
2020/03/04 星际争霸
php采集中国代理服务器网的方法
2015/06/16 PHP
php新建文件的方法实例
2019/09/26 PHP
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
python获取本机外网ip的方法
2015/04/15 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
生产副总岗位职责
2013/11/28 职场文书
生物专业个人自荐信范文
2013/11/29 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
运动会通讯稿500字
2014/02/20 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
生产文员岗位职责
2014/04/05 职场文书
请假条怎么写
2014/04/10 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python