<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>笔记本样式jQuery视频滑块 - 网页模板</title>
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
<link href="royalslider/royalslider.css" rel="stylesheet">
<script src="royalslider/jquery-1.8.3.min.js"></script>
<script src="royalslider/jquery.royalslider.min.js?v=9.3.6"></script>
<link href="preview-assets/css/reset.css?v=1.0.4" rel="stylesheet">
<link href="royalslider/skins/default-inverted/rs-default-inverted.css?v=1.0.4" rel="stylesheet">
<style>
#slider-in-laptop {
width: 70%;
height: 200px;
padding: 2% 15% 7%;
background: none;
}
#slider-in-laptop .rsOverflow,
#slider-in-laptop .rsSlide,
#slider-in-laptop .rsVideoFrameHolder,
#slider-in-laptop .rsThumbs {
background: #151515;
}
.imgBg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
#slider-in-laptop .rsBullets {
bottom: -25px;
}
.laptopBg {
position: relative;
width: 100%;
height: auto;
}
#slider-in-laptop .rsBullets {
bottom: -30px;
}
</style>
</head>
<body >
<div class="page wrapper main-wrapper">
<div class="row clearfix">
<div id="page-navigation" class="col span_6">
<div class="left page-nav-item"> </div>
<div class="right page-nav-item"></div>
</div>
</div>
<div class="row clearfix">
<div class="col span_4 fwImage">
<div class="royalSlider-preview laptopBg">
<img src="img/laptop.png" class="imgBg" width="707" height="400" />
<div id="slider-in-laptop" class="royalSlider rsDefaultInv">
<img src="img/full-width/medium/1.jpg" />
<img src="img/full-width/medium/2.jpg" data-rsVideo="https://vimeo.com/45778774" />
<img src="img/full-width/medium/3.jpg" />
<img src="img/full-width/medium/4.jpg" />
</div>
</div>
</div>
<div class="col span_2">
<h1>Slider in laptop</h1>
<p>Simple variation of image slider with bullets is used, image behind scales with slider automatically.</p>
<p>Laptop mockup by Maxwell Barvian, photography by Gilderic.</p>
<p>Buttons controlled by API:</p>
<button id="slider-prev">上一张</button><button id="slider-next">下一张</button>
</div>
</div>
</div>
<script>
jQuery(document).ready(function($) {
var rsi = $('#slider-in-laptop').royalSlider({
autoHeight: false,
arrowsNav: false,
fadeinLoadedSlide: false,
controlNavigationSpacing: 0,
controlNavigation: 'bullets',
imageScaleMode: 'fill',
imageAlignCenter: true,
loop: false,
loopRewind: false,
numImagesToPreload: 6,
keyboardNavEnabled: true,
autoScaleSlider: true,
autoScaleSliderWidth: 486,
autoScaleSliderHeight: 315,
imgWidth: 792,
imgHeight: 479
}).data('royalSlider');
$('#slider-next').click(function() {
rsi.next();
});
$('#slider-prev').click(function() {
rsi.prev();
});
});
</script>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
笔记本样式jQuery滑块.zip （21个子文件） 
笔记本样式jQuery滑块 
笔记本样式jQuery滑块.jpg 63KB jiaoben1635 royalslider 
royalslider.css 4KB
blank.gif 49B jquery-1.8.3.min.js 91KB skins default-inverted 
rs-default-inverted.png 3KB rs-default-inverted.css 9KB Thumbs.db 4KB preloaders preloader.gif 2KB jquery.royalslider.min.js 50KB grabbing.png 3KB grab.png 99B img laptop.png 23KB full-width medium 2.jpg 144KB 1.jpg 93KB 3.jpg 38KB 4.jpg 98KB Thumbs.db 16KB
index.html 3KB preview-assets css reset.css 12KB Thumbs.db 4KB sprite.png 2KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- Matlab根据flac、pfc或其他软件导出的坐标及应力、位移数据再现云图 案例包括导出在flac6.0中导出位移的fish代码（也可以自己先准备软件导出的坐标数据及对应点的位移或应力数据，可根据需
- 拳皇97.exe拳皇972.exe拳皇973.exe
- 捕鱼达人1.exe捕鱼达人2.exe捕鱼达人3.exe
- 医疗骨折摄像检测29-YOLO（v5至v9）、COCO、CreateML、Darknet、Paligemma数据集合集.rar
- ks滑块加密算法与源代码
- 医护人员检测23-YOLOv8数据集合集.rar
- 1.电力系统短路故障引起电压暂降 2.不对称短路故障分析 包括：共两份自编word＋相应matlab模型 1.短路故障的发生频次以及不同类型短路故障严重程度，本文选取三类典型的不对称短路展开研究
- C#连接sap NCO组件 X64版
- 开源基于51单片机的多功能智能闹钟设计，课设毕设借鉴参考
- 深度强化学习电气工程复现文章，适合小白学习 关键词：能量管理 深度学习 强化学习 深度强化学习 能源系统 优化调度 编程语言：python平台 主题：用于能源系统优化调度的深度强化学习算法的性能比较
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
