<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Swiper Demos</title>
<meta name="description" content="Swiper demos and examples">
<meta name="keywords" content="swiper, mobile slider, touch slider, ios slider, android slider, touch gallery, jquery slider, jquery mobile slider, web app slider, native app slider, free slider, swipe slider">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/idangerous.swiper.css">
<link rel="stylesheet" href="css/style.css?v=1.8">
<link rel="stylesheet" href="css/swiper-demos.css?v=1.8">
<script src="js/libs/jquery-1.7.1.min.js"></script>
<!-- Swiper -->
<script src="js/idangerous.swiper-1.9.1.min.js"></script>
<!-- Swiper Scrollbar plugin -->
<script src="js/idangerous.swiper.scrollbar-1.2.js"></script>
<!-- Demos code -->
<script src="js/swiper-demos.js"></script>
</head>
<body>
<div role="main" class="main">
<h2 class="sw-title">手机设备幻灯片精选集合-懒人模板整理</h2>
<p class="demo-title">NO1.带内容滑动幻灯演示</p>
<div class="home-device"><a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a>
<div class="swiper-main">
<div class="sm-free"></div>
<div class="swiper-container swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide"> <img src="img/slider1-1.png"> </div>
<div class="swiper-slide"> <img src="img/slider1-2.png"> </div>
<div class="swiper-slide">
<div class="content-slide">
<h2 style="margin-top: 0;">懒人模板测试</h2>
<p>这里地方的幻灯片是可以自己定义一个内容网页幻灯,非常实用喔!</p>
</div>
<div class="content-slide cs-1">
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tortor vitae neque luctus a tempor lacus pretium. Mauris eget ligula at justo molestie cursus. In vitae sem id neque pharetra luctus non vel felis.</p>
</div>
<div class="content-slide cs-2">
<p style="margin: 0;">Aliquam ut laoreet ligula. Quisque vehicula lectus nec orci viverra porttitor. Donec sodales lectus sit amet nunc congue ut mattis augue rhoncus.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="pagination pagination1"></div>
</div>
<p class="demo-title">NO2.垂直方向内容滑动幻灯片演示</p>
<div class="swiper-container swiper-v">
<div class="pagination-v"></div>
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">
<h2>懒人模板测试1</h2>
<p>这里可以自己定义文字图片喔!www.lanrenmb.com</p>
</div>
<div class="swiper-slide red-slide">
<h2>懒人模板测试2</h2>
<p>这里可以自己定义文字图片喔!www.lanrenmb.com</p>
</div>
<div class="swiper-slide orange-slide">
<h2>懒人模板测试3</h2>
<p>这里可以自己定义文字图片喔!www.lanrenmb.com</p>
</div>
</div>
</div>
<p class="demo-title">NO3.动态方向内容滑动幻灯片演示</p>
<div class="swiper-container swiper-dynamic">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">
<h2>懒人模板www.lanrenmb.com</h2>
<p>你可以点下按钮来增加或者减少幻灯片帧数,功能很多,慢慢体会!</p>
</div>
<div class="swiper-slide red-slide">
<h2>Slide 2</h2>
<p>Keep swiping</p>
</div>
<div class="swiper-slide orange-slide">
<h2>Slide 4</h2>
<p>The last one</p>
</div>
<div class="swiper-slide green-slide">
<h2>Slide 5</h2>
<p>The last one</p>
</div>
</div>
</div>
<div class="pagination-sd"></div>
<p class="swiper-dynamic-links">
<a class="sdl-append" href="#">Append slide</a>
<a class="sdl-prepend" href="#">Prepend slide</a>
<a class="sdl-swap" href="#">Swap 1st and 2nd slides</a>
<a class="sdl-insert" href="#">Insert after first slide</a>
<a class="sdl-remove1" href="#">Remove first slide</a>
<a class="sdl-removel" href="#">Remove last slide</a>
<a class="sdl-remove2" href="#">Remove 2nd slide</a>
</p>
<p class="demo-title">NO4.一边滚动一边显示幻灯片演示</p>
<div class="swiper-container swiper-scroll-container">
<div class="swiper-wrapper" >
<div class="swiper-slide" style="background:#fff; padding:20px">
<div class="red-slide" style="width:250px; float:left; font-size:25px; line-height:30px; text-align:center">
<p style="color:#fff; font-weight:bold; font-style:italic;">Your dreams come true:) That is a simple single scrollable area! No slides, no nothing, just pure area!</p>
</div>
<div style="width:300px; float:left; margin-left:20px">
<p>懒人模板www.lanrenmb.com</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum ipsum auctor nulla consectetur sed porta nunc placerat.</p>
<p>Nulla dui augue, sollicitudin egestas consequat a, consequat quis neque. Sed at mauris nunc. Donec rutrum leo id risus congue convallis. Maecenas ultrices condimentum velit, nec tincidunt lorem convallis consequat. Nulla elementum consequat quam eu euismod</p>
</div>
<div style="width:500px; float:left; margin-left:20px">
<p>Here goes wide image</p>
<p><img src="img/bb.jpg"></p>
</div>
<div class="blue-slide" style="width:350px; float:left; font-size:28px; line-height:30px; text-align:center; margin-left:20px; padding:25px">
<p style="color:#fff; font-weight:bold; font-style:italic;">You can make it any width/height, horizontal (like this one) or vertical, with any styling and with any HTML content!</p>
</div>
</div>
</div>
<div class="swiper-scrollbar"></div>
<style>
/*
Bad practise to use inline styles but good place to show you as an example
*/
.swiper-scrollbar {
width: 100%;
height: 4px;
border-radius: 10px;
position: absolute;
left:0;
bottom:2px;
-ms-touch-action: none;
background: none
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0,0,0,0.5);
border-radius: 10px;
}
</style>
</div>
<p class="demo-title">NO5.多屏滑动哪里显示哪里幻灯片演示</p>
<div class="swiper-container swiper-free">
<div class="pagination-free"></div>
<div class="swiper-wrapper">
<div class="swiper-slide red-slide">
<h2>懒人模板www.lanrenmb.com</h2>
<p>在这里你可以自己定义内容!</p>
</div>
<div class="swiper-slide blue-slide">
<h2>Fluid-Mode Enabled</h2>
<p>When you release the slide, it keep moving for a while</p>
</div>
<div class="swiper-slide orange-slide">
<h2>Slide 3</h2>
<p>Keep swiping</p>
</div>
<div class="swiper-slide green-slide">
<h2>Slide 4</h2>
<p>Keep swiping</p>
</div>
<div class="swiper-slide pink-slide">
<h2>Slide 5</h2>
<p>The last one</p>
</div>
</div>
</div>
<p class="demo-title">NO6.旋转幻灯片演示</p>
<div class="swiper-container swiper-car">
<div class="pagination-car"></div>
<div class="swiper-wrapper">
<div class="swiper-slide red-slide">
手机设备幻灯片精选集合 很全的手机焦点图代码 有html
4星 · 超过85%的资源 需积分: 10 4 浏览量
2014-07-21
08:29:48
上传
评论
收藏 453KB ZIP 举报
baidu_16213385
- 粉丝: 0
- 资源: 1
最新资源
- 基于keras+fasterRCNN,在VOC格式的口罩数据集上训练,检测人群中有无戴口罩python源码+模型
- 基于opencv+qt5机器视觉的传统缺陷检测, 即采用标准图片和待测图片进行pixel to pixel的XOR操作源码+文档
- 管道内检测缺陷数据库管理系统源码+文档说明+sln
- 毕业设计-低功耗STM32F411开发板(原理图+PCB源文件+官方例程+驱动等)源码+文档说明+截图
- 基于yolov5-tensorRT检测+发动机缸体内壁缺陷检测系统源码+文档说明
- 基于C++实现的锂电池缺陷检测源码+文档说明
- push_version
- 软件自制图像批量压缩工具
- 经典缺陷检测算法源码整理包含PaDiM(2020ICPR)、PatchCore(2022CVPR)、SimpleNet+文档说明
- 基于深度学习的抗梯度噪声的缺陷检测器python源码+文档说明+模型的预训练
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈