滑块横幅轮播
<!-- banner -->
<div class="banner-wrap">
<div class="cai-slider">
<style>
.banner-wrap{
width: 1100px;
height:300px;
padding:0 10px;
margin: 0 auto;
margin-bottom: 35px;
}
.cai-slider-item {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.operation-left-btn, .operation-right-btn {
cursor: pointer;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 30px;
height: 50px;
z-index: 2;
}
.operation-right-btn {
background-image: url(https://s1.xmcdn.com/lib/xmweb/images/web_btn_r_n_08d5a51.png);
top: 50%;
right: 0;
}
.operation-left-btn {
background-image: url(https://s1.xmcdn.com/lib/xmweb/images/web_btn_l_n_2857418.png);
top: 50%;
left: 0;
}
.cai-slider-warp,
.cai-slider-list {
position: relative;
height: 300px;
}
.cai-slider-warp .pic {
width: 750px;
height: 300px;
}
.cai-slider-item {
width: 750px;
height: 300px;
}
.cai-slider-item.is-anim {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.cai-slider-item-0 {
-webkit-transform: translate(-164px, 0) scale(0.87);
-ms-transform: translate(-164px, 0) scale(0.87);
transform: translate(-164px, 0) scale(0.87);
z-index: -1;
opacity: 0;
}
.cai-slider-item-1 {
-webkit-transform: translate(0px, 0) scale(0.87);
-ms-transform: translate(0px, 0) scale(0.87);
transform: translate(0px, 0) scale(0.87);
transform-origin: 0% 50%;
opacity: 0.8;
}
.cai-slider-item-2 {
-webkit-transform: translate(165px, 0) scale(1.24);
-ms-transform: translate(165px, 0) scale(1);
transform: translate(165px, 0) scale(1);
z-index: 3;
}
.cai-slider-item-3 {
-webkit-transform: translate(331px, 0) scale(0.87);
-ms-transform: translate(331px, 0) scale(0.87);
transform: translate(331px, 0) scale(0.87);
transform-origin: 100% 50%;
z-index: 1;
opacity: 0.8;
}
.cai-slider-item-4 {
-webkit-transform: translate(496px, 0) scale(0.87);
-ms-transform: translate(496px, 0) scale(0.87);
transform: translate(496px, 0) scale(0.87);
z-index: -1;
opacity: 0;
}
.cai-slider-item-5 {
-webkit-transform: translate(661px, 0) scale(0.87);
-ms-transform: translate(661px, 0) scale(0.87);
transform: translate(661px, 0) scale(0.87);
z-index: -1;
opacity: 0;
}
.cai-slider-item-6 {
-webkit-transform: translate(826px, 0) scale(0.87);
-ms-transform: translate(826px, 0) scale(0.87);
transform: translate(826px, 0) scale(0.87);
z-index: -1;
opacity: 0;
}
.cai-slider-item-7 {
-webkit-transform: translate(991px, 0) scale(0.87);
-ms-transform: translate(991px, 0) scale(0.87);
transform: translate(991px, 0) scale(0.87);
z-index: -1;
opacity: 0;
}
</style>
<div class="cai-slider-warp"><i class="operation-left-btn"></i><i class="operation-right-btn"></i>
<ul class="cai-slider-list">
<li class="cai-slider-item cai-slider-item-0 is-anim" data-index="0">
<a href="" target="_blank">
<img class="pic"
src="https://imagev2.xmcdn.com/group60/M0B/B0/D4/wKgLeVzBUuvjuAUaAACvtZVhMmQ766.png!strip=1&quality=7&magick=jpg&op_type=5&upload_type=cover&name=large_pop&device_type=ios"
alt="" title="">
</a>
</li>
<li class="cai-slider-item cai-slider-item-1 is-anim" data-index="1">
<a href="">
<img class="pic"
src="https://imagev2.xmcdn.com/group62/M01/26/1B/wKgMcVz35AzR-2p3AAICsV0MJEc044.jpg!strip=1&quality=7&magick=jpg&op_type=5&upload_type=cover&name=large_pop&device_type=ios"
alt="" title="">
</a>
</li>
<li class="cai-slider-item cai-slider-item-2 is-anim" data-index="2">
<a href="">
<img class="pic"
src="https://imagev2.xmcdn.com/group53/M01/98/92/wKgLcVwImsHBD5vQAAe-xf_dCis681.png!strip=1&quality=7&magick=jpg&op_type=5&upload_type=cover&name=large_pop&device_type=ios"
alt="英语" title="英语">
</a>
</li>
<li class="cai-slider-item cai-slider-item-3 is-anim" data-index="3">
<a href="">
<img class="pic"
src="https://imagev2.xmcdn.com/group62/M0B/15/8E/wKgMcVz3H6fws53UAAHLbfDgR68624.jpg!strip=1&quality=7&magick=jpg&op_type=5&upload_type=cover&name=large_pop&device_type=ios"
alt="下班别跑" title="下班别跑">
</a>
</li>
</ul>
</div>
</div>
</div>
<script>
var caiSlider = $(".cai-slider-list li");
var caiListLength = caiSlider.length;
var initArray = [];
for(var a = 0; a < caiListLength; a++){
initArray.push(a);
}
$(".operation-right-btn").on("click", function () {
caiSlider.removeClass();
for (var i = 0; i < caiListLength; i++) {
initArray[i] = (initArray[i] + 1) < caiListLength ? (initArray[i] + 1) : 0;
$(caiSlider[i]).addClass("cai-slider-item cai-slider-item-" + initArray[i] + " is-anim")
}
})
$(".operation-left-btn").on("click", function () {
caiSlider.removeClass();
for (var i = 0; i < caiListLength; i++) {
initArray[i] = (initArray[i] - 1) < 0 ? (caiListLength - 1) : (initArray[i] - 1);
$(caiSlider[i]).addClass("cai-slider-item cai-slider-item-" + initArray[i] + " is-anim")
}
})
</script>