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 相关文章推荐
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
JavaScript阻止事件冒泡的方法
Dec 06 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根据日期显示所在星座的方法
2015/07/13 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
javascript实现简单页面倒计时
2021/03/02 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
举例说明类变量和实例变量的区别
2016/06/30 面试题
关于读书的演讲稿1000字
2014/08/27 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
论文评审意见
2015/06/05 职场文书