<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
</head>
<body>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>3d左右旋转轮播图</title>
<link rel="stylesheet" type="text/css" href="http://guangzhou.auto.qq.com/css/swiper-4.1.6.min.css"/>
<script src="http://guangzhou.auto.qq.com/js/swiper-4.1.6.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
html,body{width: 100%;height: 100%;}
#leRiSwiper{width: 100%;height: 388px;border: 1px solid transparent;}
.swiper-slide-active{width:70%!important;z-index: 10!important;}
/*修改3级*/
/*.swiper-slide-duplicate{width: 25%!important;}*/
/*修改2级左边*/
.swiper-slide-prev,.swiper-slide-next{width: 15%!important;}
/*.swiper-slide-next{z-index: 1!important;}*/
/*.swiper-slide-next{z-index: 1!important;}*/
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{right: 14%;background-image: url(http://mat1.gtimg.com/autoguangzhou/images/ri-black.png);background-size: 100%;}
.swiper-button-next, .swiper-button-prev{width: 34px;height: 60px;opacity: 0.9;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{left: 14%;background-image: url(http://mat1.gtimg.com/autoguangzhou/images/le-black.png);background-size: 100%;}
</style>
</head>
<body>
<div class="swiper-container " id="leRiSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(https://www.lincoln.com.cn/content/dam/lincoln/cn/l_cn_zh/nameplate/continental/overview/feature-billboard/continental-3-5-billboard-carousel-1440x720.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://www.lincoln.com.cn/content/dam/lincoln/cn/l_cn_zh/homepage/billboard-caurosel/homepage-billboard-1-12-desktop-1440x720.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://www.lincoln.com.cn/content/dam/lincoln/cn/l_cn_zh/nameplate/continental/overview/billboard-carousel/Continental_Homepage-billboard_desktop_20171031.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://www.lincoln.com.cn/content/dam/lincoln/cn/l_cn_zh/nameplate/2018navigator/Teaser/trigger/Navigator-Billboard-1440x720.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://www.lincoln.com.cn/content/dam/lincoln/cn/l_cn_zh/nameplate/mkx/overview/media-carousel/MKX-1-1-Media-Carousel-1440x780.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://www.lincoln.com.cn/content/dam/lincoln/cn/l_cn_zh/nameplate/MKX_2018/Homepage_Desktop_multidrawer-safety-new-1440X720.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://www.lincoln.com.cn/content/dam/lincoln/cn/l_cn_zh/nameplate/MKZ-2018/overview/AEM_Lincoln_Nameplate-Homepage_Desktop_Billboard21.jpg)"></div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</body>
<script type="text/javascript">
var swiper = new Swiper('#leRiSwiper', {
autoplay:true,
loop : true,
initialSlide :1,
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
coverflowEffect: {
rotate: 0,// 旋转的角度
stretch: 0,// 拉伸 图片间左右的间距和密集度
depth: 400,// 深度 切换图片间上下的间距和密集度
modifier: 0.5,// 修正值 该值越大前面的效果越明显
slideShadows : false// 页面阴影效果
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</html>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
</head>
<body>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>3d左右旋转轮播图</title>
<link rel="stylesheet" type="text/css" href="http://guangzhou.auto.qq.com/css/swiper-4.1.6.min.css"/>
<script src="http://guangzhou.auto.qq.com/js/swiper-4.1.6.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
html,body{width: 100%;height: 100%;}
#leRiSwiper{width: 100%;height: 388px;border: 1px solid transparent;}
.swiper-slide-active{width:70%!important;z-index: 10!important;}
/*修改3级*/
/*.swiper-slide-duplicate{width: 25%!important;}*/
/*修改2级左边*/
.swiper-slide-prev,.swiper-slide-next{width: 15%!important;}
/*.swiper-slide-next{z-index: 1!important;}*/
/*.swiper-slide-next{z-index: 1!important;}*/
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{right: 14%;background-image: url(http://mat1.gtimg.com/autoguangzhou/images/ri-black.png);background-size: 100%;}
.swiper-button-next, .swiper-button-prev{width: 34px;height: 60px;opacity: 0.9;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{left: 14%;background-image: url(http://mat1.gtimg.com/autoguangzhou/images/le-black.png);background-size: 100%;}
</style>
</head>
<body>
<div class="swiper-container " id="leRiSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(https://www.lincoln.com.cn/content/dam/lincoln/cn/l_cn_zh/nameplate/continental/overview/feature-billboard/continental-3-5-billboard-carousel-1440x720.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://www.lincoln.com.cn/content/dam/lincoln/cn/l_cn_zh/homepage/billboard-caurosel/homepage-billboard-1-12-desktop-1440x720.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://www.lincoln.com.cn/content/dam/lincoln/cn/l_cn_zh/nameplate/continental/overview/billboard-carousel/Continental_Homepage-billboard_desktop_20171031.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://www.lincoln.com.cn/content/dam/lincoln/cn/l_cn_zh/nameplate/2018navigator/Teaser/trigger/Navigator-Billboard-1440x720.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://www.lincoln.com.cn/content/dam/lincoln/cn/l_cn_zh/nameplate/mkx/overview/media-carousel/MKX-1-1-Media-Carousel-1440x780.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://www.lincoln.com.cn/content/dam/lincoln/cn/l_cn_zh/nameplate/MKX_2018/Homepage_Desktop_multidrawer-safety-new-1440X720.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://www.lincoln.com.cn/content/dam/lincoln/cn/l_cn_zh/nameplate/MKZ-2018/overview/AEM_Lincoln_Nameplate-Homepage_Desktop_Billboard21.jpg)"></div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</body>
<script type="text/javascript">
var swiper = new Swiper('#leRiSwiper', {
autoplay:true,
loop : true,
initialSlide :1,
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
coverflowEffect: {
rotate: 0,// 旋转的角度
stretch: 0,// 拉伸 图片间左右的间距和密集度
depth: 400,// 深度 切换图片间上下的间距和密集度
modifier: 0.5,// 修正值 该值越大前面的效果越明显
slideShadows : false// 页面阴影效果
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</html>
</body>
</html>