轮播（内容滑块）组件jQuery.bxSlider教程，实例de
2019-08-12 本文已影响0人
小二黑儿
详细API请参考jQuery.bxSlider中文API参数使用介绍
Demo演示是内容滑块效果，轮播效果可自行根据API说明扩展，组件很强大，就看您项目需要哪种效果了
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>轮播（内容滑块）组件jQuery.bxSlider教程，实例demo演示</title>
<style>
body {
height : 100vh;
overflow : hidden;
}
.gold {
background-color : #999999;
border-radius : 10px;
margin : 33vh auto 0;
width : 420px;
overflow : hidden;
}
h3 {
margin : 0;
padding: 20px;
}
h3 span {
float : right;
width : 42px;
height : 18px;
background : url(https://res.tuwan.com/templet/play/index/images/arrow_bg.png?v=1) no-repeat;
}
h3 span a {
width : 50%;
height : 100%;
float : left;
}
#gold-list a {
display : inline-block;
height : 110px;
overflow : hidden;
border-radius : 8px;
}
#gold-list a img {
width : 100%;
height : 100%;
}
#gold-list a:hover img {
transition : all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
transform : scale(1.2, 1.2)
}
h4 {
margin : 0;
width : 100%;
position : absolute;
bottom : 0;
height : 20px;
line-height : 20px;
background : rgba(0, 0, 0, 0.4);
border-radius : 0 0 8px 8px;
color : #ffffff;
font-size : 12px;
text-align : center;
}
.bx-wrapper {
margin-bottom : 0 !important;
box-shadow : none !important;
border : none !important;
background : transparent !important;
}
</style>
<script src="../assets/js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css"/>
<body>
<div class="gold">
<h3>
美女
<span>
<a href="javascript:;" id="prev"></a>
<a href="javascript:;" id="next"></a>
</span>
</h3>
<div id="gold-list">
<a href="#"
target="_blank">
<img src="http://p3.pstatp.com/large/6c2a0008d4bf2b6df897"
alt="绝地求生">
<h4>美女1</h4>
</a>
<a href="#"
target="_blank">
<img src="http://p1.pstatp.com/large/6c290008d794bc378cd1"
alt="绝地求生">
<h4>美女2</h4>
</a>
<a href="#"
target="_blank">
<img src="http://p1.pstatp.com/large/6c2a0008d4d3024b4cc7"
alt="绝地求生">
<h4>美女3</h4>
</a>
<a href="#"
target="_blank">
<img src="http://p3.pstatp.com/large/6ef200017ee3bb28c8a4"
alt="绝地求生">
<h4>美女4</h4>
</a>
<a href="#"
target="_blank">
<img src="http://p9.pstatp.com/large/6ef300017e4f6b47a419"
alt="绝地求生">
<h4>美女5</h4>
</a>
</div>
</div>
</body>
<script>
$(function() {
// 内容滑动组件部分
let slider = $('#gold-list').bxSlider({
mode : 'horizontal',
moveSlides : 1,
slideMargin : 32,
infiniteLoop : true,
slideWidth : 152,
minSlides : 3,
maxSlides : 3,
speed : 800,
controls : false,
pager : false,
auto : true,
autoStart : true,
autoControls : true
});
$("#prev").on("click", function() {
slider.goToPrevSlide();
});
$("#next").on("click", function() {
slider.goToNextSlide();
});
})
</script>
</html>
