htmlcss3D轮播图<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<link href="maxcdn.bootstrapcdn/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="cdn.jsdelivr/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.demo {
position: relative;
height: 320px;
/*margin-top: 1rem;*/
width: 100%
}
.demo .item {
position: absolute;
left: 50%;
bottom: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
-webkit-transition: all 0.6s;
transition: all 0.6s;
width: 222px;
height: 300px;
/*border: 1px solid #ccc;*/
text-align: center;
line-height: 300px;
z-index: 1;
font-size: 74px;
color: #fff;
}
.demo .item_cur {
z-index: 3
}
.demo .item_0 {
-webkit-transform: translate3d(-104%, 12%, 0) scale3d(0.5, 0.5, 1);
transform: translate3d(-104%, 12%, 0) scale3d(0.5, 0.5, 1)
}
.
demo .item_1 {
-webkit-transform: translate3d(-81%, 9%, 0) scale3d(0.7, 0.7, 1);
transform: translate3d(-81%, 9%, 0) scale3d(0.7, 0.7, 1);
z-index: 2
}
.demo .item_3 {
-webkit-transform: translate3d(-20%, 9%, 0) scale3d(0.7, 0.7, 1);
transform: translate3d(-20%, 9%, 0) scale3d(0.7, 0.7, 1);
z-index: 2
}
.demo .item_4 {
-
webkit-transform: translate3d(4%, 12%, 0) scale3d(0.5, 0.5, 1);
transform: translate3d(4%, 12%, 0) scale3d(0.5, 0.5, 1)
}
.demo_btn {
text-align: center;
}
</style>
<body>
<div class="demo">
<div class="item item_0">1</div>
<div class="item item_1">2</div>
<div class="item item_cur">3</div>
<div class="item item_3">4</div>
<div class="item item_4">5</div>
</div>
<div class="demo_btn">
<a href="javascript:;" class="left" title="向左移动"><<</a>
<a href="javascript:;" class="right" title="向右移动">>></a>
<p>(PC下可点击按钮切换,移动端可左右滑动切换)</p>
</div>
</body>
<script>
(function () {
var getRandomColor = function () {
return '#' + Math.floor(Math.random() * 16777215).toString(16);        }
var egg_change = function (type) {
var $demo = $('.demo'),
index = parseInt($demo.attr('index_cur') || 2),
$item = $('.demo .item'),
len = $item.length;
if (type == 'left') {
index = (index + 1) % len;
} else {
index = (index - 1 + len) % len;
}
$demo.attr('index_cur', index);
$veClass('item_0 item_1 item_3 item_4 item_cur');            $item.eq((index - 2 + len) % len).addClass('item_0');
$item.eq((index - 1 + len) % len).addClass('item_1');
$item.eq(index).addClass('item_cur');
$item.eq((index + 1) % len).addClass('item_3');
$item.eq((index + 2) % len).addClass('item_4');
}
$('.item').each(function () {
$(this).css('background-color', getRandomColor());
})
$('.demo').on('swipeLeft', function () {
egg_change('left');
}).on('swipeRight', function () {
egg_change('right');
});
$('.demo_btn').on('click', '.left', function () {
egg_change('left');
}).on('click', '.right', function () {
js实现轮播图最简代码egg_change('right');
})
})();
</script>
</html>

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。