swiper自定义图片轮播按钮、分页器
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>
效果图：