效果图
思路
box溢出隐藏,ul定时器左移动
注意:
box:{
width: 176px;
overflow: hidden;
height: 225px;
position: relative;
}
ul {
width: 538px;
position: absolute;
top: 0;
}
li: {
width: 110px;
height: 161px;
}
参考代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<title>单图轮播</title>
<style>
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
.clear {
clear: both;
overflow: hidden;
}
.lunboBox {
width: 232px;
height: 225px;
position: relative;
margin: 20px auto;
}
.lunbo {
width: 176px;
overflow: hidden;
height: 225px;
margin: 0 auto;
position: relative;
}
.lunbo ul {
width: 538px;
position: absolute;
top: 0;
}
.lunbo ul li {
float: left;
width: 176px;
}
.lunBo_img {
width: 110px;
height: 161px;
margin: 0 auto;
}
.lunBo_img img {
display: inline-block;
width: 110px;
height: 161px;
}
.lunboBox a.leftArrow,
.lunboBox a.rightArrow {
cursor: pointer;
display: inline-block;
width: 23px;
height: 37px;
position: absolute;
top: 64px;
}
.leftArrow {
left: 0;
}
.rightArrow {
right: 0;
}
</style>
</head>
<body>
<div class="lunboBox">
<a class="leftArrow">
<img src="images/left_arrow.png">
</a>
<div class="lunbo">
<ul class="clear">
<li>
<div class="lunBo_img">
<a href="" class="lunboTitle">
<img src="images/3-1.jpg" onerror="">
</a>
</div>
</li>
<li>
<div class="lunBo_img">
<a href="" class="lunboTitle">
<img src="images/3-2.jpg" onerror="">
</a>
</div>
</li>
<li>
<div class="lunBo_img">
<a href="" class="lunboTitle">
<img src="images/3-3.jpg" onerror="">
</a>
</div>
</li>
</ul>
</div>
<a class="rightArrow">
<img src="images/right_arow.png">
</a>
</div>
<script src="http://libs.baidu.com/jquery/1.5.2/jquery.min.js"></script>
<script>
// 单图轮播js
var currentPositon = 0, // 点击之后要跳转的位置
currentPage = 0, // 点击之后要跳转到的页面(0, 1, 2)
imgLength = $('.lunBo_img img').length, // 轮播图片数量
step = $(".lunbo ul li").width(); // 移动的距离
isClick = 0; // 是否点击箭头进行跳转
// 点击左箭头
$(".leftArrow").click(function () {
currentPage--;
isClick = 1;
if(currentPage < 0) {
currentPage = imgLength - 1;
//移动到最后一张
currentPositon = -step * (imgLength - 1);
} else {
currentPositon += step;
}
//清除定时器
clearInterval(autoPlay);
changeTo(currentPositon);
});
// 点击右箭头
$(".rightArrow").click(function () {
currentPage++;
isClick = 1;
if(currentPage > imgLength - 1) {
currentPage = 0;
//移动到第一张
currentPositon = 0;
} else {
currentPositon += -step;
}
//清除定时器
clearInterval(autoPlay);
changeTo(currentPositon);
});
//移动位置
function changeTo(position) {
$(".lunbo ul").animate({
left: position + "px"
}, 500, function() {
console.log('进来了')
})
//如果当前是点击,则继续自动播放
if(isClick == 1) {
isClick = 0;
autoPalyAgain();
}
}
// 定时器自动变换3秒每次
var autoPlay = setInterval(function() {
currentPage++;
if(currentPage > imgLength - 1) {
currentPage = 0;
currentPositon = 0;
} else {
currentPositon += -step;
}
changeTo(currentPositon);
}, 3000);
//再次自动播放
function autoPalyAgain() {
autoPlay = setInterval(function() {
currentPage++;
if(currentPage > imgLength - 1) {
currentPage = 0;
currentPositon = 0;
} else {
currentPositon += -step;
}
changeTo(currentPositon);
}, 3000);
}
</script>
</body>
</html>