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改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
Vue父子组件传值的一些坑
Sep 16 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数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
自定义jQuery选项卡插件实例
2013/03/27 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python学习教程之常用的内置函数大全
2017/07/14 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
应届大学生的推荐信
2013/11/20 职场文书
教师学习培训邀请函
2014/02/04 职场文书
端午节演讲稿
2014/05/23 职场文书
司机岗位职责说明书
2014/07/29 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
机器人瓦力观后感
2015/06/12 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
python中的random模块和相关函数详解
2022/04/22 Python
Python Flask实现进度条
2022/05/11 Python