swiper自定义图片轮播按钮、分页器
2024-05-27 09:21:35
1 (c) Copyright 2018 Web牧马人. All Rights Reserved.
2 <!DOCTYPE html>
3 <html lang="zh">
4 <head>
5 <meta charset="UTF-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8 <link href="https://cdn.bootcss.com/Swiper/4.2.2/css/swiper.min.css" rel="stylesheet">
9 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
10 <script src="https://cdn.bootcss.com/Swiper/4.2.2/js/swiper.min.js"></script>
11 <title>swiper自定义图片轮播按钮、分页器</title>
12 <style type="text/css">
13 *{
14 margin: 0;
15 padding: 0;
16 }
17 html{
18 width: 100%;
19 height: 100%;
20 }
21 body{
22 width: 100%;
23 height: 100%;
24 }
25 .wrap{
26 width: 100%;
27 height: 100%;
28 position: relative;
29 }
30 .logo{
31 width: 100%;
32 height: 12%;
33 overflow: hidden;
34 text-align: center;
35 vertical-align:middle;
36 }
37 .logo span{
38 height: 100%;
39 vertical-align: middle;
40 display: inline-block;
41 }
42 .logo img{
43 width: 150px;
44 vertical-align: middle;
45 }
46 .swiper-container{
47 width: 100%;
48 height: 35%;
49 }
50 .swiper-slide img{
51 width: 100%;
52 height: 100%;
53 }
54 .videoBox{
55 width: 100%;
56 height: 53%;
57 overflow: hidden;
58 position: relative;
59 }
60 .video-content{
61 width: 95%;
62 height: 70%;
63 overflow: hidden;
64 position: absolute;
65 top: 50%;
66 left: 50%;
67 -webkit-transform: translateX(-50%) translateY(-50%);
68 -moz-transform: translateX(-50%) translateY(-50%);
69 -ms-transform: translateX(-50%) translateY(-50%);
70 transform: translateX(-50%) translateY(-50%);
71 }
72 dl{
73 width: 32%;
74 height: 100%;
75 float: left;
76 margin-right: 2%;
77 }
78 dl:last-child{
79 margin-right: 0;
80 }
81 dl dt{
82 width: 100%;
83 height: 80%;
84 overflow: hidden;
85 }
86 dl dt img{
87 width: 100%;
88 height: 100%;
89 }
90 dl dd{
91 width: 100%;
92 height: 20%;
93 overflow: hidden;
94 line-height: 35px;
95 }
96 /*自定义按钮样式*/
97 /*.mySwiperBtn{
98 background-image: none;
99 width: 30px;
100 height: 60px;
101 background: rgba(0,0,0,0.4);
102 color: #fff;
103 font-size: 30px;
104 line-height: 60px;
105 text-align: center;
106 display: none;
107 }
108 .swiper-button-prev,.swiper-container-rtl .swiper-button-next{
109 left: 10px;
110 }
111 .swiper-button-next,.swiper-container-rtl .swiper-button-prev{
112 right: 10px;
113 }
114 .mySwiperBtn:hover{
115 background: rgba(0,0,0,0.8)
116 }
117 .swiper-container:hover .mySwiperBtn{
118 display: block;
119 }*/
120 /*自定义分页器样式*/
121 .swiper-pagination-bullet{
122 width: 12px;
123 height: 12px;
124 display: inline-block;
125 border-radius: 100%;
126 background: #fff;
127 opacity: 1;
128 margin: 0 10px;
129 }
130 .swiper-pagination-bullet-active{
131 background-color: red;
132 }
133 #myVideo{
134 position: absolute;
135 right: 0px;
136 bottom: 0px;
137 min-width: 100%;
138 min-height: 100%;
139 background: black;
140 z-index: 999;
141 }
142
143 </style>
144 </head>
145 <body>
146 <div class="wrap">
147 <!--logo-->
148 <div class="logo">
149 <span></span>
150 <img src="img/logo.jpg" title="Audi logo.jpg"/>
151 </div>
152
153 <!--banner-->
154 <div class="swiper-container mySwiper1">
155 <div class="swiper-wrapper">
156 <div class="swiper-slide">
157 <a href="#">
158 <img src="img/1.jpg" title="">
159 </a>
160 </div>
161 <div class="swiper-slide">
162 <a href="#">
163 <img src="img/2.jpg" title=""/>
164 </a>
165 </div>
166 <div class="swiper-slide">
167 <a href="#">
168 <img src="img/3.jpg" title=""/>
169 </a>
170 </div>
171 </div>
172 <!-- 如果需要分页器 -->
173 <div class="swiper-pagination"></div>
174
175 <!-- 如果需要导航按钮 -->
176 <div class="swiper-button-prev mySwiperBtn"></div>
177 <div class="swiper-button-next mySwiperBtn"></div>
178 <!--自定义导航按钮-->
179 <!--<div class="swiper-button-prev mySwiperBtn"><</div>
180 <div class="swiper-button-next mySwiperBtn">></div>-->
181 </div>
182
183 <!--img_video-->
184 <div class="videoBox">
185 <div class="video-content">
186 <dl>
187 <dt class="img_video">
188 <img src="img/15.jpg"/>
189 </dt>
190 <dd>THE NEW DESIGN</dd>
191 </dl>
192 <dl>
193 <dt class="img_video">
194 <img src="img/13.jpg"/>
195 </dt>
196 <dd>INTERIOR</dd>
197 </dl>
198 <dl>
199 <dt class="img_video">
200 <img src="img/11.jpg"/>
201 </dt>
202 <dd>INSPIRATION</dd>
203 </dl>
204 </div>
205 </div>
206
207 <!--video-->
208 </div>
209
210 <script type="text/javascript">
211 $(function(){
212 var mySwiper = new Swiper ('.mySwiper1', {
213 loop: true,
214 effect : 'slide',//slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
215 autoplay : {
216 delay:3000,
217 disableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay。默认为true：停止。
218 },
219 // 如果需要分页器
220 pagination: {
221 el: '.swiper-pagination',
222 clickable :true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
223 },
224 // 如果需要前进后退按钮
225 navigation: {
226 nextEl: '.swiper-button-next',
227 prevEl: '.swiper-button-prev',
228 },
229 })
230
231 var img_video = $('.img_video');
232 var videoList = [
233 'video/00001_cn.mp4',
234 'video/00002_cn.mp4',
235 'video/00191_cn.mp4'
236 ]
237
238 $.each(img_video, function(index,value) {
239 var click_img_video = $(this);
240 click_img_video.click(function(){
241 creatVideo(videoList[index]);
242 })
243 });
244
245 function creatVideo(video_url){
246 var str = '';
247 str += '<video src="'+video_url+'" id="myVideo" autoplay="autoplay">'
248 str += '抱歉，您当前的播放器暂不支持该格式的视频播放！'
249 str += '</video>'
250 $(".wrap").append(str);
251 $('#myVideo').click(function(){
252 $('#myVideo').remove();
253 })
254 //视频停止时间
255 $('#myVideo').on("ended",function(){
256 $('#myVideo').remove();
257 });
258 }
259 })
260 </script>
261 </body>
262 </html>效果图：
转载于:https://www.cnblogs.com/webwrangler/p/8864062.html
swiper自定义图片轮播按钮、分页器相关推荐
- PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
- marquee做文字滚动、图片轮播
HTML中marquee 元素做文字的滚动 <marquee></marquee> 这个标签已经废弃了,只是尝试一下.不支持代码中使用. 主要用来做公示公告 就像是这种新闻轮播 ...
- 造轮子之图片轮播组件(swiper)
图片轮播是种很常见的场景和功能,一般移动网站首页的轮播 banner,商品详情页的商品图片等位置都会用到此功能 像这种常用的场景功能肯定是有人早就写好插件了的,所以遇到这种场景,一般都遵循以下三步: ...
- 非常优秀的swiper插件————幻灯片播放、图片轮播
非常优秀的swiper插件----幻灯片播放.图片轮播 http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 S ...
- 淘宝店铺装修之一怎样在自定义内容区做个商品图片轮播展示
<wbr><span style="font-size:24px"><strong>店铺装修之一怎样在自定义内容区做个商品图片轮播展示</ ...
- swiper图片轮播（左中右） （含源码）- 案例篇
swiper图片轮播(左中右) (含源码) - 案例篇 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head ...
- php图片轮换功能,微信小程swiper组件实现图片轮播切换功能教程
本文主要介绍了微信小程使用swiper组件实现图片轮播切换显示功能,涉及swiper组件相关属性使用技巧,希望能帮助到大家. 1.效果展示 2.关键代码 index.wxml: swiper组件属性说 ...
- Swiper全屏自适应图片轮播代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- android设计轮播功能按钮,Android TV HorizontalScrollView 图片轮播 遥控器上下按键的处理...
当前位置:我的异常网» Android » Android TV HorizontalScrollView 图片轮播 遥控器 Android TV HorizontalScrollView 图片轮播 ...
最新文章
- Linux下Gcc生成和使用静态库和动态库详解
- python单例_Python - 单例模式(Singleton)
- 我并不想劝人创业当老板
- java数据类型的转换函数_JAVA中常用数据类型转换函数
- 2、python的print函数格式化输出
- ubuntu 版安裝mysql8
- centos mysql源_CentOS 使用国内源安装 MySQL
- Ubuntu16.04安装truffle时的一些错误
- 串口读取gps信息php,Linux串口读取GPS数据
- MATLAB--求一个矩阵中所有元素的平均值
- 席慕容的诗歌——《我愿为莲》
- 同一个电脑安装多个jdk版本
- efcore 批量_EF批量插入（转）
- OpenEuler 会长久吗
- asp.net调用飞信免费发短信
- autojs之控制台
- 强化学习（二）：动态规划与蒙特卡洛方法
- 软件测试是什么？我如果要学的话都该学哪些技能？
- hta 窗口,如何获取HTA窗口的大小？
- 《Head First设计模式》读书笔记