您的位置：首页 > Web前端 > JQuery

jQuery图片轮播

2017-11-05 00:00 363 查看

主要原理：利用绝对定位+overflow+CSS3动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>

.bg{
width: 20.5em;
min-height: 10em;
margin: 0 auto;
position: relative;
overflow: hidden;
background-color: white;
}
#picBox{
position: absolute;
min-height: 10em;
min-width: 150em;
left: -40em;
}
.picBoxR{
animation: spinR 1s linear;
}
.picBoxL{
animation: spinL 1s linear;
}

#picBox div{

margin-right: 2px;
float: left;
text-align: center;
background-color: darkblue;
color: white;
/*margin-right: 0.2em;*/
width: 20em;
height: 10em;
line-height: 10em;

}
.act{
position: absolute;
top: 3.5em;
background: rgba(0,0,0,0);
}
.act a{
color: yellow;
outline: none;
text-decoration: none;
font-size: 2em;
margin-left: 4px;
}
.act a:active{
color: white;
background: rgba(0,0,0,0.3);
}
.act a:hover{
color: white;
background: rgba(0,0,0,0.3);
}
.act:last-child{
left: 18em;
}

@keyframes spinR{
0% {
transform:translateX(0em);
}100%{
transform:translateX(-20em);
}
}
@keyframes spinL{
0% {
transform:translateX(0em);
}100%{
transform:translateX(20em);
}
}
</style>
</head>
<body>
<div class="bg">
<div id="picBox">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<!--两个方向箭头-->
<div class="act"><a href="javascript:;" >⇦</a></div>
<div class="act"><a href="javascript:;" >⇨</a></div>

</div>

<script src="../js/jquery-3.2.1.js"></script>
<script>
$('.act').click(function () {

var  curL =  $('#picBox').css('left');
var animator = document.getElementById('picBox');
console.log('\n curL = ' + curL);
var  curlN = '';
if($(this).text() == '\u21E8' ){
//                点击向右
//            动态添加动画
//等待动画完成之后进行位移变换
animator.className = '';
setTimeout(function () {
animator.className = 'picBoxR';
}, 0);

setTimeout(function () {
curlN = parseInt(curL)/16 - 20 + 'em';

$('#picBox').css('left',curlN);

var  curL2 =  $('#picBox').css('left');
console.log('\n curL2 = ' + curL2);

var $one_li = $("#picBox div:first-child");
var $four_li = $("#picBox div:last-child");
$one_li.insertAfter($four_li);
$('#picBox').css('left','-40em');
}, 1000);

}else if($(this).text() == '\u21E6'){
//点击向左
//动态添加动画
animator.className = '';
setTimeout(function () {
animator.className = 'picBoxL';
}, 0);
//等待动画完成之后进行位移变换
setTimeout(function () {
//进行位移计算 并 位移
curlN = parseInt(curL)/16 + 20 + 'em';
$('#picBox').css('left',curlN);

//位移完成之后立即进行前后调换
var last = $("#picBox div:last-child");
var first = $("#picBox div:first-child");
last.insertBefore(first);
//回到起始位置
$('#picBox').css('left','-40em');
}, 1000);

}else
return false;
});

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图片轮播 javascript jQuery css3动画插件

相关文章推荐

新的分享

章节导航