jquery Banner轮播选项卡

2019-11-19 18:15:39

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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.VeVB.COm/allimg/140708/11-140FQ53531Q9.jpg" alt="" />    </a>   </li>   <li>   <a href="javascript:;">     <img src="http://sc.VeVB.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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：angular双向绑定模拟探索

下一篇：Javascript中常用类型的格式化方法小结