左右滑动换显示插件
html
<div class="c-box-bottom">
<div class="cbox-title-bottom"> 题目 </div>
<div class="cbox-content">
<div class="turn-left full-height parent"><</div>
<div class="full-height changeArea">
<div class="full-height">
<div class="full-height parent">
<dl class="no-marin">
<dt class="parent"><img src="" alt=""></dt>
<dt class="text-center">钢铁质量优化管理</dt>
</dl>
</div>
<div class="full-height parent">
<dl class="no-marin">
<dt class="parent"><img src=" alt=""></dt>
<dt class="text-center">石化生产执行系统优化</dt>
</dl>
</div>
</div>
</div>
<div class="turn-right full-height parent">></div>
</div>
</div>
css
.c-box-bottom{
background: rgba(0, 0, 0, 0.2);
box-shadow: inset 0px -2px 35px #000;
border-radius: 3px;
width: calc( 100% - 15px);
height: calc( 100% - 15px );
overflow: hidden;
}
.cbox-title-bottom{
padding:4px 0 1px 0;
text-align: center;
color: #fff;
font-weight: bold;
border-bottom: 2px solid #fff;
border-top: none;
border-left: none;
border-right: none;
border-image: -webkit-linear-gradient(right,rgba(0,0,0,0),#fff,rgba(0,0,0,0)) 30 30;;
}
.cbox-content{
height: calc( 100% - 27px );
color: #fff;
padding: 5px 40px 0 40px;
position: relative;
}
.cbox-content img{
width: 65px;
}
.cbox-content .turn-left,.cbox-content .turn-right{
position: absolute;
top: 0;
width: 40px;
font-size: 23px;
cursor: pointer;
}
.cbox-content .turn-left{
left: 0;
}
.cbox-content .turn-right{
right: 0;
}
.bottomArea .changeArea{
overflow: auto;
}
.bottomArea .changeArea>div{
width:300%;
overflow: hidden;
}
.changeArea>div>div{
width:16.66%;
float:left;
}
js
function turnPage(dom, num, len) {
var domW = dom.width();
var onePiece = domW;
var w = dom.scrollLeft() + num * onePiece;
dom.animate({scrollLeft: w + 'px'}, 400);
}
$('.turn-left').click(function () {
var allBoxs = $(this).next().children().children().length;
turnPage($(this).next(), -1, allBoxs);
});
$('.turn-right').click(function () {
var allBoxs = $(this).prev().children().children().length;
turnPage($(this).prev(), 1, allBoxs);
});