Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
#wrap {
width: 600px;
height: 300px;
border: 1px solid #e15671;
margin: auto;
position: relative;
}
#box {
margin: 50px 100px;
width: 400px;
height: 200px;
position: relative;
background: red;
overflow: hidden;
}
#wrap .ul1 {
width: 1600px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
#wrap .ul1 li {
float: left;
width: 400px;
height: 200px;
}
#wrap .ul1 img {
width: 100%;
height: 100%;
}
#wrap .sp {
position: absolute;
top: 95px;
display: block;
width: 30px;
height: 60px;
text-align: center;
line-height: 60px;
color: #fff;
background-color: rgba(0, 0, 0, .6);
}
#wrap .sp1 {
left: 20px;
}
#wrap .sp2 {
right: 20px;
}
#wrap .p {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
height: 50px;
line-height: 50px;
}
#wrap .p a {
display: inline-block;
width: 30px;
height: 2px;
margin-left: 10px;
background-color: #e15671;
}
#wrap .p .active {
background-color: #000;
}
</style>
</head>
<body>
<div id="wrap">
<div id="box">
<ul class="ul1">
<li><img src="imgs/1.jpg" /></li>
<li><img src="imgs/2.jpg" /></li>
<li><img src="imgs/3.jpg" /></li>
<li><img src="imgs/4.jpg" /></li>
</div>
<span class="sp sp1"><</span> I = 0 ;
var oBtn = to true ;
var width = $ ( 'li') width ();. // Get the width of a li
@ cloning the first and the last picture, the convenient later seamless carousel achieve
$ ( '. UL1' ) .prepend (last.clone ());
$ ( '.ul1' ) .append (first.clone ());
// width dynamically calculated ul of
$ ( ' .ul1 '.) width ($ (' li ') size () *. width);
// let ul beginning of the width -width
$ (' UL1 ') CSS (.' left ', -. width);
// Click the Next button to move to the right so that ul
$ ( '. Sp2'). Click (function () {
IF (oBtn) {
Next ();
}
});
// click a button, ul integrally moved leftward
$ ( 'SP1.') the Click (. function () {
IF (oBtn) {
PREV ();
}
});
$ ( 'P') Find ( 'A') the Click (.. function () {
I = $ ( the this ) .index ();
$ ( '.ul1' ) .animate ({
left : -width * (I +. 1 )
}, 1000, function() {
$('.p').find('a').attr('class', '');
$('.p').find('a').eq(i).attr('class', 'active');
});
});
function prev() {
oBtn = false;
$('.ul1').animate({
left: '-=' + width
}, 1000, function() {
i++;
if(i == len) {
$('.ul1').css('left', -width);
i = 0;
}
$('.p').find('a').attr('class', '');
$('.p').find('a').eq(i).attr('class', 'active');
oBtn = true;
});
}
function next() {
oBtn = false;'.Ul1'
$ () .animate ({
left: '+=' + width
}, 1000, function() {
if(i == 0) {
i = len;
$('.ul1').css('left', -width * len);
}
i--;
$('.p').find('a').attr('class', '');
$('.p').find('a').eq(i).attr('class', 'active');
oBtn = true;
});
}
});
</script>
</body>
</html>