First on a simple carousel chart for everyone to see the effect:
1, analysis Carousel Figure principles: 1) principle five Carousel Figure 6 is the use of images as a carousel, the first and the last one easy integration, giving users a better experience effect
2) When the images broadcast to the revolver, where the image is moved to the right, the same way when the picture to the right position carousel when the picture is moved to the left
3) When the carousel to the last one when we need to quickly switch to first 
2, the implementation process: click event, automatically rotate the event, and switch the index display
Click into the event including a visual display area, click the button, and clear automatic carousel timer button disappears after removal of the viewing area, and automatically rotate, and click the left button click event, and click the small dot below pictures switching event.
Automatic carousel event is automatically plays without clickable image, the default carousel to the right, set the timer playback using the move function.
When the event is to change the index display shows the current picture will show the current index point, and it turns red
3, to achieve
1, HTML and CSS styles simple point
In the HTML body is as follows:
<div class="wrapper">
<ul class="imgs">
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/4.jpg" alt=""></li>
<li><img src="./img/5.jpg" alt=""></li>
<li><img src="./img/1.jpg" alt=""></li>
</ul>
<div class="btn leftBtn"><</div>
<div class="btn rightBtn">></div>
<ul class="dot">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script src="./js/jquery-3.3.1.js"></script>
<script src="./js/demo.js"></script>
css style:
*{
margin:0px;
padding: 0px;
list-style: none;
}
.wrapper{
position: relative;
width:400px;
height:350px;
border:1px solid #eee;
margin:100px auto;
overflow: hidden; // set the hidden, because that is the position of .imgs, out of the viewing area will make it invisible
}
.wrapper .imgs{
position: absolute;
left:0px;
width:2400px;
height: 350px;
font-size: 0px;
}
.wrapper .imgs li{
display: inline-block; / * row level between block elements have a tab indentation, the size of the font-size value is * /
width:400px;
height:350px;
}
.wrapper .imgs li img{
width:100%;
height:100%;
}
.btn {
width:40px;
height:30px;
position: absolute;
top:50%;
margin-top: -15px;
background: yellow;
opacity: 0.4;
text-align: center;
line-height: 30px;
display: none; // initialized to none, convenience hover events show function initial display.
}
.leftBtn{
left:0px;
}
.rightBtn{
right:0px;
}
/* .wrapper .rings{
width:100%;
position: absolute;
bottom: 30px;
text-align: center;
} */
.wrapper .dot{
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -65px;
width:130px;
height: 20px;
text-align: center;
}
.wrapper .dot li{
float: left;
width:20px;
height:20px;
border-radius: 50%;
background: #fff;
font-size: 0px; // the text disappears li
margin-left: 4px;
}
jQuery implementation:
// click click events before and after the moving carousel before and after pictures
// automatically move the event no click event to automatically rotate images
// change the index value of the event
was nowIndex = 0;
was hours = null,
num = $('.imgs li').length - 1,
len = $('.imgs li').width(),
lock = true;
// console.log (num, s);
function init () {// init () initialization function, as a function of the entry function
Event Volume ();
access ();
changeIndex();
}
init();
Function Event Volume () {
$ ( '. Wrapper'). Hover (function () {// moved out mouse events
$('.btn').show();
clearInterval(timer);
}, function() {
$('.btn').hide();
access ();
})
$ ( '. Wrapper'). On ( 'click', '. Btn', function () {// button click event about
if($(this).hasClass('leftBtn')){
move('prev');
}else if($(this).hasClass('rightBtn')) {
move('next');
}
})
$ ( '. Dot'). On ( 'click', 'li', function () {// index value of a click event
var index = $(this).index();
// console.log(index)
move(index);
})
}
function move(dir) {
if (lock) {// set the lock to prevent conflicts automatically rotate and click event occurs, the picture display position is changed
lock = false;
if(dir == 'prev'){
if(nowIndex == 0){
nowIndex = a;
$ ( 'Imgs.') Css ( 'left', -nowIndex * len);. // When the picture on the far left, the picture position back at -nowIndex * len
}
nowIndex --;
$ ( 'Imgs.') Animate ({ 'left': -nowIndex * len}., 1000, function () {// set the animation mutant
changeIndex();
lock = true;
});
}else if(dir == 'next'){
if(nowIndex == num){
nowIndex = 0;
$ ( 'Imgs.') Css ( 'left', -nowIndex * len);. // The same right
}
nowIndex ++;
$('.imgs').animate({'left': -nowIndex * len},1000, function(){
changeIndex();
lock = true;
});
}else{
nowIndex = dir;
$('.imgs').animate({'left': -nowIndex * len},400, function(){
changeIndex();
lock = true;
});
}
}
}
function changeIndex() {
$('.dot li').css('background','#fff');
if (nowIndex == num) {// index value 0--4
$('.dot li').eq(0).css('background','#f40');
}else{
$('.dot li').eq(nowIndex).css('background','#f40');
}
}
function autoMove() {
if(lock){
clearInterval(timer);
timer = setInterval(function(){
move('next');
},2000);
}
}
The small carousel figure shows the effect of:
I hope we have a good idea of finishing under, to win carousel map.
