<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML5带左右箭头可拖动幻灯片代码</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<!-- [ Optional ] -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="dist/css/custom.css">
<!-- [ REQUIRED ] -->
<link rel="stylesheet" href="dist/css/bpHS.min.css">
</head>
<body>
<br>
<div class="container">
<div class="bp-hs" id="demo-default">
<div class="bp-hs_inner">
<div class="bp-hs_inner__item" data-transform="scale">
<img src="dist/images/demo/01.jpg" alt="Boompx Hero Slider 01"/>
</div>
<div class="bp-hs_inner__item" data-transform="rotate" data-origin="top-left">
<img src="dist/images/demo/02.jpg" alt="Boompx Hero Slider 02"/>
</div>
<div class="bp-hs_inner__item" data-transform="rotate" data-origin="bottom-left">
<img src="dist/images/demo/03.jpg" alt="Boompx Hero Slider 03"/>
</div>
<div class="bp-hs_inner__item">
<img src="dist/images/demo/04.jpg" alt="Boompx Hero Slider 04"/>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="dist/js/vendors/jquery.touchSwipe.min.js"></script> <!-- optional (required for touchSwipe option) -->
<script src="dist/js/bpHS.min.js"></script>
<script src="dist/js/custom.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>
基于HTML5实现的带左右箭头可拖动幻灯片特效源码.zip
版权申诉
122 浏览量
2022-11-09
22:23:57
上传
评论
收藏 294KB ZIP 举报
基于HTML5实现的带左右箭头可拖动幻灯片特效源码.zip （12个子文件） 
132686872555813528 
index.html 2KB dist css 
bpHS.min.css 4KB bpHS.css 4KB custom.css 1KB images demo 
01.jpg 86KB 04.jpg 84KB 03.jpg 65KB 02.jpg 63KB js bpHS.js 4KB custom.js 387B bpHS.min.js 3KB vendors jquery.touchSwipe.min.js 11KB资源评论
