First of all, since jquery is used, the production method is no longer the most basic kind of changing the position of the picture list, for example: cutting the second picture left:-100px, cutting the third picture left:-200px and so on. This method will quickly rewind and rotate from the last picture to the first picture (certainly not what you want, right)
Secondly, the production target is the three basic functions of the carousel: automatic playback; the cursor moves in to stop playing, and moves away to continue playing; button operation before/after picture switching.
Then, there are many ways to make a picture carousel on the Internet. You can do it with a few lines of code in a plug-in, but you can't see the code and don't understand it, so I understand and organize the code myself.
html code
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>banner图</title>
<link href="111.css" rel="stylesheet"/>
<script src="jquery-3.1.1.min.js"></script>
<script src="111.js"></script>
</head>
<body>
<div class="wrap">
<div class="banner">
<div class="bannerCon">
<ul class="imgList">
<li><a href="#"><img src="images/banner01.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/banner02.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/banner03.jpg" alt=""/></a></li>
</ul>
<ul class="btnList clearfix">
<li class="cur"><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
<span class="pre-nex prev"><</span>
<span class="pre-nex next">></span>
</div>
</div>
</div>
</body>
</html>
In fact, my principle is simple. First, display the pictures side by side, and hide the overflow part (float: left; visibility: hidden ;) or use JQuery
code writing
css code:
.banner {
position: relative;
height: 400px;
overflow: hidden;
}
.banner .bannerCon {
position: absolute;
top: 0;
left: 50%;
width: 800px;
height: 400px;
margin-left: -400px;
overflow: hidden;
}
.bannerCon .imgList {
position: absolute;
top: 0;
left: 0;
width: 99999px;
height: 400px;
}
.bannerCon .imgList li {
float: left;
width: 800px;
height: 400px;
}
.bannerCon .imgList li a {
position: relative;
display: block;
height: 100%;
}
.bannerCon .imgList li img {
width: 800px;
height: 400px;
}
.bannerCon .pre-nex {
display: none;
position: absolute;
top: 50%;
width: 40px;
height: 60px;
margin-top: -40px;
font: bold 40px/60px Simsun;
color: #ccc;
text-align: center;
border:none;
background: rgba(0,0,0,.30);
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000, endColorStr=#4c000000);
cursor: pointer;
z-index: 3;
}
.bannerCon .pre-nex.show { display: inline-block; }
.bannerCon .prev { left: 13%; }
.bannerCon .next { right: 13%; }
.bannerCon .btnList {
position: absolute;
left: 0;
bottom: 20px;
width: 100%;
height: 12px;
text-align:center;
z-index: 2;
overflow: hidden;
}
.bannerCon .btnList li { display: inline; }
.bannerCon .btnList li span {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
border-radius: 6px;
background-color:#14829e;
cursor: pointer;
}
.bannerCon .btnList li.cur span { background-color: #f30; }
First, the animate custom animation in jquery moves the first column of the picture list to the left by 120px, which takes 1000 milliseconds. After the left shift is completed, the next function is executed: clone the first column of the picture list and store it in a variable named temp, put The first column is deleted. At this time, the cloned temp still maintains the css style of marginLeft: "-120px", first return it to 0, otherwise it will be overlaid on the previous one when it is inserted to the end of the queue. Finally, the cloned column is inserted into the end of the queue through append().
First clone the last column of the image list and remove the last column. Set the cloned temp style to -120px, otherwise it will cover the first one when inserted at the head of the queue.
Move right: insert the cloned temp into the head of the queue through prepend. Note that the first picture in the picture list is no longer the original first picture but the temp that was just inserted at the head of the queue. Since the marginLeft of the temp is -120px, insert it becomes 0. The entire picture list will naturally move to the right to display the previous one.
$btnPreNex.click(function(){ //Left and right button click events
var index = $btnLi.index(this);
if($(this).hasClass('next')){
if(!$imgUl.is(":animated")){
k += 1;
$imgUl.animate({left:-width},speed,function(){
$imgUl.css("left",0);
$imgUl.children("li:first").appendTo($(this));
if(k >= n){
k = 0;
}
$btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
});
}
}
else {
if(!$imgUl.is(":animated")){
k += -1;
$imgUl.css("left",-width);
$imgUl.children("li:last").prependTo($imgUl);
$imgUl.stop().animate({left:0},speed);
if(k < 0){
k = n-1;
}
$btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
}
}
});