扁平按钮jQuery图片切换代码轮播滚动切换特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是扁平按钮jQuery图片切换代码轮播滚动切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>扁平按钮jQuery图片切换代码</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css"/>
</head>
<body>
<br>
<div class="index_show">
	<ul class="bxslider" id="index-bxslider">
		<li class="item1" style="background: url(images/banner_03.jpg) center 0 no-repeat;"></li>
		<li class="item2" style="background: url(images/banner_01.jpg) center 0 no-repeat;"></li>
		<li class="item3" style="background: url(images/banner_02.jpg) center 0 no-repeat;"></li>
	</ul>
	<div id="bx-pager">
		<a data-slide-index="0" href="javascript:void(0);">01</a>
		<a data-slide-index="1" href="javascript:void(0);">02</a>
		<a data-slide-index="2" href="javascript:void(0);">03</a>
	</div>
</div>
<script type="text/javascript" src="js/jQuery.v1.8.3-min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</body>
</html>

JS代码(zzsc.js):

$(function(){
	//首页 轮播if($('#index-bxslider').length>0){
	$('#index-bxslider').bxSlider({
	auto:true,pagerCustom:'#bx-pager',nextText:' ',prevText:' ',speed:600,pause:5000}
);
}
;
}
);

CSS代码(zzsc.css):

@charset "UTF-8";/*CSS reset*/
body{padding:0;margin:0;}
fieldset,img{border:0;}
a{text-decoration:none;outline:none;}
a:hover{text-decoration:underline;}
li{list-style:none;}
/*首页*/
.index_show{position:relative;z-index:2;width:100%;background:#fff;}
.bxslider{height:447px;overflow:hidden;width:100%;}
.bxslider li{width:100%;height:447px;overflow:hidden;}
.bxslider .item1{background:url(../images/slider1.png) center 0 no-repeat;}
.bxslider .item2{background:url(../images/slider1.png) center 0 no-repeat;}
.bxslider .item3{background:url(../images/slider1.png) center 0 no-repeat;}
.bx-controls{display:none;}
#bx-pager{position:absolute;left:50%;bottom:-15px;z-index:10;margin-left:-90px;background:url(../images/shadow1.png) 0 bottom no-repeat;padding-bottom:6px;}
#bx-pager a{float:left;width:60px;height:60px;line-height:60px;text-align:center;font-size:30px;background:#fff;color:#999;font-family:"宋体";}
#bx-pager a:hover{text-decoration:none;}
#bx-pager .active{position:relative;background:#fd825c;color:#fff;}
#bx-pager .active::before{content:'';position:absolute;top:-10px;left:25px;border:5px solid transparent;border-bottom:5px solid #fd825c;}

附件:下载该文件资源,减少时间成本(增值服务)