jquery Banner轮播选项卡

时间：2021-05-26

本文实例为大家分享了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:;">&lt;</a> <a class="ba_next" href="javascript:;">&gt;</a></div> <ul> <li> <a href="javascript:;"> <img src="http://scimg.jb51.net/allimg/140708/11-140FQ53531Q9.jpg" alt="" /> </a> </li> <li> <a href="javascript:;"> <img src="http://sc.jb51.net/uploads/allimg/140520/10-140520212515A9.jpg" alt="" /> </a> </li> <li> <a href="javascript:;"> <img src="http:///seven-it/jqBanner

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章