jq bxslider轮播图
严宇
参考地址：https://blog.csdn.net/william_han1989/article/details/80305370
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Author" content="" />
<title>bxslider轮播图</title>
<meta name="keywords" content="" />
<meta name="Description" content="" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>
</head>
<body>
<style>
/*
.Banner002246 为demo编号
*/
.bx-prev{
width:12px;
height:26px;
background:#f00;
text-indent: -999999px;
z-index: 999;
position: absolute;
left:55px;
top:-300px;
}
.bx-next{
width:12px;
height:26px;
background:#f00;
text-indent: -999999px;
z-index: 999;
position: absolute;
top:-300px;
right:55px;
}
.Banner002246{
position: relative;
}
.Banner002246 .bx-wrapper{ position:relative; z-index:1;}
.Banner002246 .bx-viewport{ z-index:1;}
.Banner002246 li a{ display:block; }
.Banner002246 li img{ display:block; width:130%; position: relative; left: -15%; max-width: none; }
.Banner002246 .bx-controls{ position:absolute; left:0; width:100%; bottom:6%; z-index:10;}
.Banner002246 .bx-pager{ max-width:1260px; margin:0 auto; text-align:center;}
.Banner002246 .bx-pager div{ display:inline-block; height:12px; margin:0 6px;}
.Banner002246 .bx-pager div a{ display:block; width:8px; height:8px; border: 2px solid #fff; border-radius:50%; overflow:hidden; line-height: 50px;}
.Banner002246 .bx-pager div a.active{ background-color: #5252AD; border-color: #5252AD;}
@media(min-width:768px){
.Banner002246 li img{width:100%; left: 0; max-width: 100%;}
.Banner002246 .bx-controls{ bottom:5%; left:auto; right:2%;}
.Banner002246 .bx-pager div a{ display:block; width:12px; height:12px; }
}
</style>
<!-- Banner002246 Start -->
<div class="Banner002246" data-role="part">
<ul id="marquee">
<li><a href='#' ><img src="uploadfiles/2018/10/201810241635183518.jpg" /></a></li>
<li><a href='#' ><img src="uploadfiles/2018/10/20181024163509359.jpg" /></a></li>
<li><a href='#' ><img src="uploadfiles/2018/10/201810241634583458.jpg" /></a></li>
</ul>
<div class="swiper-pagination"></div>
<script>
$(document).ready(function(){
$('.Banner002246 #marquee').bxSlider({
auto: true,//幻灯片自动滚动
mode:'horizontal', //默认的是水平 垂直vertical
displaySlideQty:1,//显示li的个数
moveSlideQty: 1,//移动li的个数
controls: true//是否显示左和右按钮
});
});
</script>
</div>
<!-- Banner002246 End -->
</div>
</body>
</html>
类似资料：