Recent study JavaScript, want to do with a rolling effect of the carousel map, try to start doing a lot of the results are not quite right, then looked at other people's ideas, and he made an imitation out, the code is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
ul {
list-style: none;
width: 1200px;
height: 600px;
padding: 0px;
}
li {
float: left;
}
li img {
width: 400px;
height: 600px;
}
.keep {
width: 400px;
height: 600px;
position: absolute;
overflow: hidden;
margin-left: 30%;
}
.left {
font-size: 25px;
color: rgba(187, 187, 187, 0.5);
border: 1px solid #bf9999;
border-radius: 100%;
width: 30px;
height: 30px;
padding-bottom: 3px;
font-weight: bold;
text-align: center;
vertical-align: middle;
position: absolute;
top: 250px;
left: 20px;
}
.right {
font-size: 25px;
color: rgba(187, 187, 187, 0.5);
border: 1px solid #bf9999;
border-radius: 100%;
padding-bottom: 3px;
width: 30px;
height: 30px;
font-weight: bold;
text-align: center;
vertical-align: middle;
position: absolute;
top: 250px;
left: 350px;
}
</style>
</head>
<body>
<div class="keep">
<ul>
<li><a href="#"><img src="img/1.png"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.png"></a></li>
</ul>
<!-- 左边移动 -->
<a href="###" onclick="left();">
<span class="left">
<
</span>
</a>
<!-- 右边移动 -->
<a href="###" onclick="right();">
<span class="right">
>
</span>
</a>
</div>
<script>
// 图片现在的位置
var nowImgPosition = 0;
// 需要移动的位置
var movePosition = 0;
// 按下左边按钮
function left() {
// 如果图片已经在最左边 - 回到最后一张
movePosition += 400;
if (movePosition > 0) {
movePosition = -800;
return;
}
}
// 按下右边按钮
function right() {
// 如果图片已经在最右边 - 回到第一张
movePosition -= 400;
if (movePosition < -800) {
movePosition = 0;
return;
}
}
// 每隔30毫秒图片移动一段距离
setInterval(function() {
nowImgPosition = nowImgPosition + (movePosition - nowImgPosition) / 10;
document.querySelector('ul').style.marginLeft = nowImgPosition + 'px';
}, 30);
</script>
</body>
</html>
The code can achieve the effect of a rolling carousel figure, but if you want the Carousel Figure embedded into a page or there is a little problem, I ended up ul row, will share more location if you want ul around in the add text, then the position will not, so here it is best to not occupy ul floating position.
I was dead set here as a direct picture of wide, unified 400px. If you need to adjust the size of the picture, the above code can be changed to any image size 400px width they need, and remember to change JS code 800 Width (a picture of * (carousel number pictures - 1) ), height of the image directly to the above code 600px height can be changed to the picture. Doing so would be too much trouble to change a lot of places, you can set a unified picture of the size of variable width and height in JS code, then use the JS code can be set, so that later modified, then only need to change the size of two variable that is can.
If you find bug can also discuss what the comments section with the look (* ╹ ▽ ╹ *)
