1、好兄弟，看一下是否是你需要的

2、废话不多说 直接上代码，复制粘贴一下 自己引用一下swiper.js和css 然后就可以开始玩儿了

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  7. 		<title></title>
  8. 		<link rel="stylesheet" type="text/css" href="swiper.min.css" />
  9. 		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  10. 		<script src="swiper.min.js" type="text/javascript" charset="utf-8"></script>
  11. 		<!-- 阿里高清方案 -->
  12. 		<script>
  13. 			(function(doc, win) {
  14. 				var docEl = doc.documentElement,
  15. 					resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  16. 					recalc = function() {
  17. 						var clientWidth = docEl.clientWidth;
  18. 						if(!clientWidth) return;
  19. 						docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
  20. 					};
  21. 				if(!doc.addEventListener) return;
  22. 				win.addEventListener(resizeEvt, recalc, false);
  23. 				doc.addEventListener('DOMContentLoaded', recalc, false);
  24. 			})(document, window);
  25. 		</script>
  26. 		<style type="text/css">
  27. 			html,
  28. 			body {
  29. 				width: 100%;
  30. 				height: 100%;
  31. 				font-family: " Microsoft YaHei";
  32. 				position: relative;
  33. 				font-size: 14px;
  34. 				margin: 0;
  35. 			}
  36.  
  37. 			a {
  38. 				text-decoration: none;
  39. 				outline: none;
  40. 				-webkit-tap-highlight-color: transparent;
  41. 			}
  42.  
  43. 			.header {
  44. 				position: fixed;
  45. 				width: 100%;
  46. 				height: 0.45rem;
  47. 				z-index: 99;
  48. 			}
  49.  
  50. 			.header .back {
  51. 				position: absolute;
  52. 				top: 0.06rem;
  53. 				left: 0.1rem;
  54. 				z-index: 9;
  55. 				width: 0.3rem;
  56. 				height: 0.3rem;
  57. 				font-size: 0.14rem;
  58. 				line-height: 0.3rem;
  59. 				text-align: center;
  60. 				border-radius: 0.15rem;
  61. 				background: rgba(0, 0, 0, 0.3);
  62. 				color: rgb(255, 255, 255);
  63. 				display: none;
  64. 			}
  65.  
  66. 			.header>div {
  67. 				width: 100%;
  68. 				background: #fff;
  69. 				opacity: 0;
  70. 			}
  71.  
  72. 			.headertitle {
  73. 				width: 50%;
  74. 				height: 0.45rem;
  75. 				line-height: 0.45rem;
  76. 				margin: auto;
  77. 				display: flex;
  78. 				justify-content: space-between;
  79. 				/*display: inline-block;*/
  80. 			}
  81.  
  82. 			.headertitle a {
  83. 				width: 0.5rem;
  84. 				height: calc(100% - 0.03rem);
  85. 				text-align: center;
  86. 				display: inline-block;
  87. 				cursor: pointer;
  88. 				border-bottom: 0.03rem solid transparent;
  89. 				box-sizing: border-box;
  90. 			}
  91.  
  92. 			.headertitle a.active {
  93. 				border-bottom: 0.03rem solid #FC3F78;
  94. 			}
  95.  
  96. 			.case .swiper-slide img {
  97. 				width: 100%;
  98. 				height: 100%;
  99. 			}
  100.  
  101. 			.swiper-container {
  102. 				width: 100%;
  103. 				height: 3.57rem;
  104. 			}
  105.  
  106. 			.tit-lunbo {
  107. 				width: 2.31rem;
  108. 				height: .272rem;
  109. 				box-sizing: border-box;
  110. 				padding-left: 5%;
  111. 				background: #606060;
  112. 				/*position: absolute;*/
  113. 				border-radius: 17.5px;
  114. 				opacity: 0.5;
  115. 				margin-left: 0.1rem;
  116. 			}
  117.  
  118. 			.banner {
  119. 				height: .22rem;
  120. 				line-height: .22rem;
  121. 			}
  122.  
  123. 			.carousel {
  124. 				margin-bottom: .13rem;
  125. 				width: 100%;
  126. 				height: 3.57rem;
  127. 				position: relative;
  128. 			}
  129.  
  130. 			.sc-text {
  131. 				color: #666666;
  132. 				font-size: 0.1rem;
  133. 			}
  134.  
  135. 			.swiper-pagination-bullet {
  136. 				background: none;
  137. 				opacity: 1;
  138. 				border: 1px solid #FF4C81;
  139. 			}
  140.  
  141. 			.swiper-pagination-bullet-active {
  142. 				background: #FF4C81;
  143. 			}
  144. 			/*视频*/
  145.  
  146. 			.swiper-slideVideo {
  147. 				width: 100%;
  148. 				height: 100%;
  149. 				position: relative;
  150. 			}
  151.  
  152. 			.video_btn {
  153. 				width: 0.6rem;
  154. 				height: 0.6rem;
  155. 				position: absolute;
  156. 				left: 0;
  157. 				top: 0;
  158. 				bottom: 0;
  159. 				right: 0;
  160. 				margin: auto;
  161. 			}
  162.  
  163. 			.video_btn>img {
  164. 				width: 100%;
  165. 				height: 100%;
  166. 			}
  167.  
  168. 			.swiper-slideVideo>video {
  169. 				width: 100%;
  170. 				height: 100%;
  171. 			}
  172. 			/*图片/视频切换*/
  173.  
  174. 			.vAndi {
  175. 				width: 1rem;
  176. 				height: 0.2rem;
  177. 				position: absolute;
  178. 				left: 0;
  179. 				right: 0;
  180. 				margin: auto;
  181. 				bottom: 0.11rem;
  182. 				z-index: 9999;
  183. 				display: none;
  184. 			}
  185.  
  186. 			.vAndiCont {
  187. 				width: 1rem;
  188. 				height: 0.2rem;
  189. 				display: flex;
  190. 				align-items: center;
  191. 				justify-content: space-between;
  192. 			}
  193.  
  194. 			.vAndiCont>div {
  195. 				width: 0.42rem;
  196. 				height: 0.2rem;
  197. 				border-radius: 0.1rem;
  198. 				line-height: 0.2rem;
  199. 				background: #fff;
  200. 				color: #444444;
  201. 				font-size: 0.09rem;
  202. 				text-align: center;
  203. 			}
  204.  
  205. 			.videoBtn:before {
  206. 				content: "";
  207. 				display: inline-block;
  208. 				width: 0;
  209. 				height: 0;
  210. 				border-left: 0.07rem solid #444444;
  211. 				border-top: 0.035rem solid transparent;
  212. 				border-bottom: 0.035rem solid transparent;
  213. 			}
  214.  
  215. 			.videoBtn.SWactive:before {
  216. 				border-left: 0.07rem solid #fff;
  217. 				border-top: 0.035rem solid transparent;
  218. 				border-bottom: 0.035rem solid transparent;
  219. 			}
  220.  
  221. 			.videoBtn.SWactive {
  222. 				background: #FE3F47;
  223. 				color: #fff;
  224. 			}
  225.  
  226. 			.imgBtn.SWactive {
  227. 				background: #FE3F47;
  228. 				color: #fff;
  229. 			}
  230.  
  231. 			.carousel .swiper-pagination {
  232. 				font-size: 0.2rem;
  233. 			}
  234.  
  235. 			.carousel .swiper-pagination-custom {
  236. 				position: static !important;
  237. 				display: inline-block;
  238. 				background: #000;
  239. 				float: right;
  240. 				color: white;
  241. 				width: 0.40rem;
  242. 				height: 0.20rem;
  243. 				opacity: 0.5;
  244. 				line-height: 0.20rem;
  245. 				margin-bottom: 0.10rem;
  246. 				font-size: 12px;
  247. 				border-radius: 0.1rem;
  248. 				margin-right: 0.109rem;
  249. 			}
  250.  
  251. 			body .rushtobuy {
  252. 				/*position: absolute;*/
  253. 				width: 100%;
  254. 				height: 0.41rem;
  255. 				background: url(../images/taoqianggou.png)0% 0% / 100% no-repeat;
  256. 				/*background-size:100% 100%*/
  257. 				color: #FFFFFF;
  258. 				font-size: 0.2rem;
  259. 				/*z-index: 10;*/
  260. 				/*margin-top: 10px;*/
  261. 			}
  262.  
  263. 			body #rushtobuyjhs {
  264. 				background: url(../images/juhuasuan.png)0% 0% / 100% no-repeat;
  265. 			}
  266.  
  267. 			body .rushtobuy>p:nth-of-type(1) {
  268. 				line-height: 0.41rem;
  269. 				margin-left: 0.045rem;
  270. 				display: inline-block;
  271. 			}
  272.  
  273. 			body .rushtobuy>p:nth-of-type(2) {
  274. 				line-height: 0.41rem;
  275. 				font-size: 0.1rem;
  276. 				margin-left: 0.081rem;
  277. 				text-decoration: line-through;
  278. 				display: inline-block;
  279. 				vertical-align: top;
  280. 			}
  281.  
  282. 			.weizhi {
  283. 				position: absolute;
  284. 				bottom: 0;
  285. 				z-index: 10;
  286. 				width: 100%;
  287. 				display: none;
  288. 			}
  289.  
  290. 			#count-time {
  291. 				font-size: 0.1rem;
  292. 				float: right !important;
  293. 				display: block;
  294. 				width: 0.854rem;
  295. 				height: 100%;
  296. 				/*margin-right: 0.11rem;*/
  297. 			}
  298.  
  299. 			#count-time .distance {
  300. 				font-family: PingFangSC-Regular;
  301. 				font-size: 0.1rem;
  302. 				color: #F91646;
  303. 				margin-left: 0.091rem;
  304. 				margin-top: 0.03rem;
  305. 			}
  306.  
  307. 			#test span {
  308. 				/*vertical-align: top;*/
  309. 				display: inline-block;
  310. 				width: 0.145rem;
  311. 				height: 0.145rem;
  312. 				line-height: 0.145rem;
  313. 				background: #5C3410;
  314. 				color: white;
  315. 				margin-left: 0.01rem;
  316. 				margin-right: 0.01rem;
  317. 				text-align: center;
  318. 				border-radius: 0.02rem;
  319. 			}
  320.  
  321. 			#test .loadtime {
  322. 				margin-top: 0.04rem;
  323. 				color: #5C3410;
  324. 			}
  325.  
  326. 			.tqgorjhs {
  327. 				background: #f4f4f4;
  328. 			}
  329.  
  330. 			#tqgxq {
  331. 				width: 100%;
  332. 				height: 0.41rem;
  333. 				background: url(../images/tqgxq.png)0% 0% / 100% no-repeat;
  334. 				margin-top: 0.054rem;
  335. 				margin-bottom: 0.02rem;
  336. 			}
  337.  
  338. 			#jhsxq {
  339. 				width: 100%;
  340. 				height: 0.41rem;
  341. 				background: url(../images/jhsxq.png)0% 0% / 100% no-repeat;
  342. 				margin-top: 0.054rem;
  343. 				margin-bottom: 0.02rem;
  344. 			}
  345.  
  346. 			.line-top {
  347. 				background: #F4F4F4;
  348. 				width: 100%;
  349. 				height: 0.044rem;
  350. 			}
  351.  
  352. 			.line-top {
  353. 				background: #F4F4F4;
  354. 				width: 100%;
  355. 				height: 0.02rem;
  356. 			}
  357.  
  358. 			#test .testendtime {
  359. 				width: 100%;
  360. 				color: #F91646;
  361. 				height: 100%;
  362. 				line-height: 0.41rem;
  363. 				text-align: center;
  364. 			}
  365.  
  366. 			.go_down {
  367. 				font-size: 0.15rem;
  368. 				width: 100%;
  369. 				height: 0.46rem;
  370. 				background: rgba(0, 0, 0, 0.3);
  371. 				color: white;
  372. 				line-height: 0.46rem;
  373. 				padding: 0 0.09rem;
  374. 				position: absolute;
  375. 				top: 0;
  376. 				z-index: 2;
  377. 			}
  378.  
  379. 			.go_down_btn {
  380. 				width: 0.68rem;
  381. 				display: inline-block;
  382. 				height: 0.32rem;
  383. 				background: #FF4C81;
  384. 				color: 0.14rem;
  385. 				position: absolute;
  386. 				top: 0.07rem;
  387. 				right: 0.16rem;
  388. 				z-index: 3;
  389. 				line-height: 0.32rem;
  390. 				text-align: center;
  391. 				border-radius: 0.04rem;
  392. 				cursor: pointer;
  393. 			}
  394.  
  395. 			.lib-video {
  396. 				position: absolute;
  397. 				top: 0;
  398. 				height: 100%;
  399. 				width: 100%;
  400. 				z-index: 2;
  401. 			}
  402.  
  403. 			.qiege {
  404. 				width: 100%;
  405. 				height: 0.2rem;
  406. 				background: #eee;
  407. 			}
  408. 			/*店铺信息*/
  409.  
  410. 			.shopinfo {
  411. 				width: 100%;
  412. 				height: 1.1rem;
  413. 				background: #fff;
  414. 				padding-top: 0.15rem;
  415. 			}
  416.  
  417. 			.infotop {
  418. 				padding: 0 0.14rem;
  419. 				display: flex;
  420. 				align-items: center;
  421. 				justify-content: space-between;
  422. 				height: 0.45rem;
  423. 				margin-bottom: 0.15rem;
  424. 			}
  425.  
  426. 			.top_left {
  427. 				display: flex;
  428. 				align-items: center;
  429. 			}
  430.  
  431. 			.infobot {
  432. 				display: flex;
  433. 				padding: 0 0.14rem;
  434. 				justify-content: space-between;
  435. 				color: #999999;
  436. 				font-size: 0.12rem;
  437. 			}
  438.  
  439. 			.miaoshured {
  440. 				color: #FF5001;
  441. 				font-size: 0.14rem;
  442. 				margin: 0 0.05rem;
  443. 			}
  444.  
  445. 			.shoppf {
  446. 				display: inline-block;
  447. 				width: 0.15rem;
  448. 				height: 0.15rem;
  449. 			}
  450.  
  451. 			.top_img {
  452. 				width: 0.5rem;
  453. 				margin-right: 0.09rem;
  454. 				height: 0.5rem;
  455. 			}
  456.  
  457. 			.top_img img {
  458. 				width: 100%;
  459. 				height: 100%;
  460. 			}
  461.  
  462. 			.top_name p {
  463. 				color: #000000;
  464. 				font-size: 0.13rem;
  465. 			}
  466.  
  467. 			.top_name .tm {
  468. 				margin-top: 0.04rem;
  469. 			}
  470.  
  471. 			.top_right {
  472. 				color: #A0A0A0;
  473. 				font-size: 0.1rem;
  474. 			}
  475. 			/*相似推荐*/
  476.  
  477. 			.xiangsiwrap {
  478. 				width: 100%;
  479. 				height: 2rem;
  480. 				background: #fff;
  481. 				padding: 0.13rem 0.11rem 0;
  482. 			}
  483.  
  484. 			.xiangsiwrap div {
  485. 				width: 100%;
  486. 				height: 100%;
  487. 			}
  488.  
  489. 			.xiangsiwrap .swiper-slide {
  490. 				width: 1.1433rem !important;
  491. 				margin: 0 0.01667rem;
  492. 			}
  493.  
  494. 			.xiangsiwrap .swiper-slide .xsname {
  495. 				padding: 0 0.02rem;
  496. 				margin: 0.04rem 0;
  497. 				height: 0.14rem;
  498. 				display: -webkit-box;
  499. 				-webkit-box-orient: vertical;
  500. 				-webkit-line-clamp: 1;
  501. 				overflow: hidden;
  502. 			}
  503.  
  504. 			.xiangsiwrap .swiper-slide .xsquanjin {
  505. 				height: 0.14rem;
  506. 				padding: 0 0.02rem;
  507. 				color: #F13B3A;
  508. 				margin: 0.04rem 0 0.06rem 0;
  509. 				font-size: 0.09rem;
  510. 			}
  511.  
  512. 			.xiangsiwrap .swiper-slide .xsquan {
  513. 				padding: 0 0.02rem;
  514. 				color: #F13B3A;
  515. 				font-size: 0.09rem;
  516. 			}
  517.  
  518. 			.xiangsiwrap .swiper-slide img {
  519. 				width: 100%;
  520. 				height: 1rem;
  521. 				display: inline-block;
  522. 				border-radius: 0.05rem;
  523. 			}
  524. 			/*看了又看*/
  525.  
  526. 			.kanheader {
  527. 				width: 100%;
  528. 				height: 0.4rem;
  529. 				line-height: 0.4rem;
  530. 				background: #fff;
  531. 				padding: 0 0.14rem;
  532. 				font-size: 0.16rem;
  533. 				border-bottom: 1px solid #eee;
  534. 			}
  535.  
  536. 			.kanwrapper {
  537. 				display: flex;
  538. 				/*align-content: space-between;*/
  539. 				justify-content: space-between;
  540. 				flex-wrap: wrap;
  541. 				background: #eee;
  542. 			}
  543.  
  544. 			.kanwrapper .kanpro {
  545. 				width: 1.85rem;
  546. 				height: 2.32rem;
  547. 				background: #fff;
  548. 				margin-bottom: 0.05rem;
  549. 			}
  550.  
  551. 			.kanpro .pro_img {
  552. 				width: 1.85rem;
  553. 				height: 1.85rem;
  554. 			}
  555.  
  556. 			.kanpro .pro_img img {
  557. 				width: 100%;
  558. 				height: 100%;
  559. 			}
  560.  
  561. 			.kanpro .pro_top,
  562. 			.pro_bot {
  563. 				display: flex;
  564. 				padding: 0 0.04rem 0 0.07rem;
  565. 				justify-content: space-between;
  566. 			}
  567.  
  568. 			.kanpro .pro_top {
  569. 				margin: 0.02rem 0 0.09rem 0;
  570. 				color: #9A9A9A;
  571. 				font-size: 0.10rem;
  572. 			}
  573.  
  574. 			.kanpro .pro_bot {
  575. 				color: #F13B3A;
  576. 				font-size: 0.10rem;
  577. 			}
  578.  
  579. 			.kanpro .pro_bot .quanhou {
  580. 				font-size: 0.16rem;
  581. 			}
  582.  
  583. 			.coverback {
  584. 				display: none;
  585. 				position: fixed;
  586. 				width: 2rem;
  587. 				height: 1rem;
  588. 				background: #fff;
  589. 				border-radius: 5px;
  590. 				/*border: 1px solid gray;*/
  591. 				z-index: 1000;
  592. 				top: 0;
  593. 				left: 0;
  594. 				bottom: 0;
  595. 				right: 0;
  596. 				margin: auto;
  597. 			}
  598.  
  599. 			.coverback .backtitle {
  600. 				border-bottom: 1px solid #f4f4f4;
  601. 				padding: 0.12rem;
  602. 				line-height: 0.2rem;
  603. 			}
  604.  
  605. 			.coverback .goback {
  606. 				display: inline-block;
  607. 				width: 100%;
  608. 				height: 0.3rem;
  609. 				line-height: 0.3rem;
  610. 				text-align: center;
  611. 				/*color: #000;*/
  612. 			}
  613.  
  614. 		</style>
  615. 	</head>
  616.  
  617. 	<body>
  618. 		<div id="wrapper">
  619.  
  620. 			<div class="header">
  621. 				<a href="appfun:productdetail:pop" class="back iconfont icon-arrow-left "></a>
  622. 				<a href="rule.html" class="rules iconfont icon-arrow-right "></a>
  623. 			</div>
  624. 			<!--轮播-->
  625. 			<div class="carousel">
  626. 				<div class="swiper-container case">
  627. 					<div class="swiper-wrapper bsd load-div">
  628. 						<div class="swiper-slide">
  629. 							<div class="swiper-slideVideo">
  630. 								<video src="https://cloud.video.taobao.com/play/u/1699136323/p/2/e/6/t/1/50119750594.mp4?appKey=38829" id="slideVideo" webkit-playsinline="true" playsinline="true" width="100%" height="100%" type="video/mp4" preload="" x-webkit-airplay="true" x5-playsinline="true" poster="https://img.alicdn.com/i1/1699136323/O1CN01Rv0Rk91wZypQKwRH0_!!1699136323.jpg" x-webkit-airplay="true">
  631. 									<source type="video/mp4" src="https://cloud.video.taobao.com/play/u/1699136323/p/2/e/6/t/1/50119750594.mp4?appKey=38829">
  632. 								</video>
  633. 								<div class="video_btn">
  634. 									<img src="./playerBtn.png" />
  635. 								</div>
  636. 							</div>
  637. 						</div>
  638. 						<div class="swiper-slide"><img src="https://img.alicdn.com/i1/1699136323/O1CN01Rv0Rk91wZypQKwRH0_!!1699136323.jpg" alt="">
  639. 						</div>
  640. 						<div class="swiper-slide"><img src="https://img.alicdn.com/i1/1699136323/O1CN015JtrrY1wZyohly2Wi_!!1699136323.jpg" alt="">
  641. 						</div>
  642. 						<div class="swiper-slide"><img src="https://img.alicdn.com/i2/1699136323/O1CN01ZYvfAc1wZyoqp26ZU_!!1699136323.jpg" alt="">
  643. 						</div>
  644. 						<div class="swiper-slide"><img src="https://img.alicdn.com/i1/1699136323/O1CN01FfmkjV1wZyoh5C9rT_!!1699136323.jpg" alt="">
  645. 						</div>
  646. 					</div>
  647. 					<!--视频/图片按钮-->
  648. 					<div class="vAndi">
  649. 						<div class="vAndiCont">
  650. 							<div class="videoBtn SWactive">
  651. 								视频
  652. 							</div>
  653. 							<div class="imgBtn">
  654. 								图片
  655. 							</div>
  656. 						</div>
  657. 					</div>
  658. 					<div class="weizhi">
  659. 						<!--分页-->
  660. 						<div class="swiper-pagination"></div>
  661. 					</div>
  662. 				</div>
  663. 			</div>
  664. 		</div>
  665. 	</body>
  666.  
  667. </html>
  668. <script type="text/javascript">
  669. 	$(".video_btn").on("click", function() {
  670. 		$("#slideVideo").trigger('play');
  671. 		$(".video_btn").hide();
  672. 		return false;
  673. 	})
  674. 	$(".swiper-slideVideo").on("click", function() {
  675. 		$("#slideVideo").trigger('pause');
  676. 		$(".video_btn").show();
  677. 	})
  678. 	$("#slideVideo").on("ended", function() {
  679. 		$(".video_btn").show();
  680. 	})
  681. 	$(".vAndi").show();
  682. 	$(".videoBtn").on("click", function() {
  683. 		$(".videoBtn").addClass("SWactive");
  684. 		$(".imgBtn").removeClass("SWactive");
  685. 		swiper1.slideTo(0, 1000, false);
  686. 		$(".weizhi").hide();
  687. 		return false;
  688. 	})
  689. 	$(".imgBtn").on("click", function() {
  690. 		$(".imgBtn").addClass("SWactive");
  691. 		$(".videoBtn").removeClass("SWactive");
  692. 		swiper1.slideTo(1, 1000, false);
  693. 		$("#slideVideo").trigger('pause');
  694. 		$(".video_btn").show();
  695. 		$(".weizhi").show();
  696. 		return false;
  697. 	})
  698. 	var swiper1 = new Swiper('.case', {
  699. 		pagination: '.swiper-pagination',
  700. 		paginationType: 'custom',
  701. 		//修改显示数量的下标
  702. 		paginationCustomRender: function(swiper, current, total) {
  703. 			var current1 = current - 1;
  704. 			var total1 = total - 1;
  705. 			return current1 + ' / ' + total1;
  706. 		},
  707. 		paginationClickable: true,
  708. 		//							loop: true,
  709.  
  710. 		updateOnImagesReady: true,
  711. 		// autoplay : 3000,
  712. 		lazyLoading: true,
  713. 		lazyLoadingInPrevNext: true,
  714. 		lazyLoadingInPrevNextAmount: 2,
  715. 		onSlideChangeStart: function(swiper) {
  716. 			var sliderIndex = swiper.activeIndex;
  717. 			$("#slideVideo").trigger('pause');
  718. 			$(".video_btn").show();
  719. 			if(sliderIndex == 0) {
  720. 				$(".videoBtn").addClass("SWactive");
  721. 				$(".imgBtn").removeClass("SWactive");
  722. 				$(".weizhi").hide();
  723. 			} else {
  724. 				$(".imgBtn").addClass("SWactive");
  725. 				$(".videoBtn").removeClass("SWactive");
  726. 				$(".weizhi").show();
  727. 			}
  728. 		}
  729. 	});
  730. </script>

　3、写的有点乱 但是很好用 swiper相关属性就不介绍了  自己看Api文档很详细

swiper 仿淘宝详情页面 视频图片切换的更多相关文章

  1. JS仿淘宝详情页菜单条智能定位效果

    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...

  2. 仿淘宝详情转场（iOS，安卓没有这功能）

    由于公司是做跨境电商的,所以对各大电商APP都有关注,最近看到淘宝iOS端(安卓没有)在商品详情点击加入购物车有一个动画效果特别赞,正好今天新版本上线,下午就抽了些时间研究了下. 主要思路是自定义转场 ...

  3. vue实现仿淘宝结账页面

    这个demo,是小颖基于之前的 vue2.0在table中实现全选和反选   文章进行更新后的demo,主要功能呢,是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面,具体页面效果请看下面的动图: ...

  4. JQuery仿淘宝滚动加载图片

    用 JQuery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第 ...

  5. jquery仿淘宝购物车页面商品结算（附源码）

    1.效果图如下: 2.源码如下: html部分: <!doctype html> <html lang="en"> <head> <met ...

  6. vue仿淘宝订单状态的tab切换效果

    <div class="navigation">  //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个 ...

  7. 转：：iOS 仿淘宝,上拉进入详情页面

    今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的 // // ViewCo ...

  8. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  9. 高仿淘宝和聚美优品商城详情页实现《IT蓝豹》

    高仿淘宝和聚美优品商城详情页实现 android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页. 使用ViewDragHelper, ...

随机推荐

  1. 使用UITableView实现图片视差效果

    使用UITableView实现图片视差效果 视差效果如下: 原理: 根据偏移量计算不同的移动速度,so easy! // // RootTableViewController.h // TableVi ...

  2. hmac 算法模块

    Hmac算法:Keyed-Hashing for Message Authentication.它通过一个标准算法,在计算哈希的过程中,把key混入计算过程中 Python自带的hmac模块实现了标准 ...

  3. August 19th 2017 Week 33rd Saturday

    Live for today and stop stressing out about tomorrow. 为今天而活,不必为明天过分担心. Stop bewailing the past misfo ...

  4. January 12 2017 Week 2 Thursday

    Although it rains, throw not away your watering pot. 纵然天下雨,休把水壶丢. Don't throw away your watering pot ...

  5. ZT 打工者买彩票中1000万 5年后变逃犯身上剩80元

    打工者买彩票中1000万 5年后变逃犯身上剩80元   2014-01-07 08:22 来源:都市快报 我有话说 挥霍—— 从800万到80元 在湖南永州零陵区富家桥镇茶叶湾村,陈某是不折不扣的名人 ...

  6. 【Win10+eclipse+MinGW+QT安装教程】已有eclipse环境下配置QT插件出错详解

    (纪念一下装了一整天濒临绝望的自己[/doge]) (以下所有下载项一律使用32位) step1:下载安装eclipse.适配的jdk.MinGW和QT 1.下载32位eclipse for c++以 ...

  7. scala当中的Actor并发编程

    注:Scala Actor是scala 2.10.x版本及以前版本的Actor. Scala在2.11.x版本中将Akka加入其中,作为其默认的Actor,老版本的Actor已经废弃. 1.什么是Sc ...

  8. mysql之mof提权详解

    原理解读: Windows 管理规范 (WMI) 提供了以下三种方法编译到 WMI 存储库的托管对象格式 (MOF) 文件: 方法 1: 运行 MOF 文件指定为命令行参数将 Mofcomp.exe  ...

  9. CRITICAL **: Couldn't acquire global lock, snapshots will not be consistent: Access denied

    报错如下:** (mydumper:56288): CRITICAL **: Couldn't acquire global lock, snapshots will not be consisten ...

  10. Appfuse搭建过程（下源代码不须要maven，lib直接就在项目里（否则痛苦死！））

    什么是Appfuse:AppFuse是一个集成了众多当前最流行开源框架与工具(包含Hibernate.ibatis.Struts.Spring.DBUnit.Maven.Log4J.Struts Me ...