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实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
js运动动画的八个知识点
Mar 12 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 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
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
python使用pil生成缩略图的方法
2015/03/26 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
python如何在终端里面显示一张图片
2016/08/17 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
浅析Python面向对象编程
2020/07/10 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
美德少年事迹材料
2014/01/23 职场文书
校园文化建设方案
2014/02/03 职场文书
小学清明节活动方案
2014/03/08 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
毕业横幅标语
2014/10/08 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
公证书
2019/04/17 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python