<!doctype html>
<html lang="en">
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.fl {
float: left;
}
.fr {
float: right;
}
ul {
list-style: none;
}
#showOuter {
height: 200px;
width: 400px;
overflow: hidden;
position: relative;
border: 1px red solid;
margin: 0 auto;
}
#bigContenter {
height: 200px;
width: 1200px;
position: absolute;
}
#first {
background: red;
height: 200px;
width: 400px;
float: left;
}
#sencond {
background: yellow;
height: 200px;
width: 400px;
float: left;
}
#third {
background: blue;
height: 200px;
width: 400px;
float: left;
}
#num {
height: 20px;
width: 100%;
border-bottom: 1px solid black;
border-top: 1px solid black;
position: absolute;
bottom: 20px;
}
#num li {
line-height: 20px;
text-align: center;
height: 18px;
width: 20px;
float: left;
color: white;
border-radius: 10px;
border: 1px white solid;
margin-left: 10px;
cursor: pointer;
}
#num li:first-child {
margin-left: 50px;
}
#num .act {
background: gray;
color: orange;
}
.swi {
height: 40px;
width: 20px;
position: absolute;
top: 90px;
background: grey;
text-align: center;
line-height: 40px;
display: none;
cursor: pointer;
}
.btnL {
left: 20px;
}
.btnR {
right: 20px;
}
</style>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.fl {
float: left;
}
.fr {
float: right;
}
ul {
list-style: none;
}
#showOuter {
height: 200px;
width: 400px;
overflow: hidden;
position: relative;
border: 1px red solid;
margin: 0 auto;
}
#bigContenter {
height: 200px;
width: 1200px;
position: absolute;
}
#first {
background: red;
height: 200px;
width: 400px;
float: left;
}
#sencond {
background: yellow;
height: 200px;
width: 400px;
float: left;
}
#third {
background: blue;
height: 200px;
width: 400px;
float: left;
}
#num {
height: 20px;
width: 100%;
border-bottom: 1px solid black;
border-top: 1px solid black;
position: absolute;
bottom: 20px;
}
#num li {
line-height: 20px;
text-align: center;
height: 18px;
width: 20px;
float: left;
color: white;
border-radius: 10px;
border: 1px white solid;
margin-left: 10px;
cursor: pointer;
}
#num li:first-child {
margin-left: 50px;
}
#num .act {
background: gray;
color: orange;
}
.swi {
height: 40px;
width: 20px;
position: absolute;
top: 90px;
background: grey;
text-align: center;
line-height: 40px;
display: none;
cursor: pointer;
}
.btnL {
left: 20px;
}
.btnR {
right: 20px;
}
</style>
</head>
<body>
<div id="showOuter">
<div id="bigContenter">
<div id="first">
<ul>
<li></li>
</ul>
</div>
<div id="sencond">
<ul>
<li></li>
</ul>
</div>
<div id="third">
<ul>
<li></li>
</ul>
</div>
</div>
<ul id="num"></ul>
<div class="swi btnL">
<</div>
<div class="swi btnR">></div>
</div>
<script type="text/javascript" src="../jquery/jquery-3.1.0.js"></script>
<script>
$(document).ready(function() {
var num = $('#bigContenter>div').length;
for(var i = 1; i <= num; i++) {
var li = '<li>' + i + '</li>';
$('#num').append(li);
}
var s = 0;
$('#num li:first-child').addClass('act')
<div id="showOuter">
<div id="bigContenter">
<div id="first">
<ul>
<li></li>
</ul>
</div>
<div id="sencond">
<ul>
<li></li>
</ul>
</div>
<div id="third">
<ul>
<li></li>
</ul>
</div>
</div>
<ul id="num"></ul>
<div class="swi btnL">
<</div>
<div class="swi btnR">></div>
</div>
<script type="text/javascript" src="../jquery/jquery-3.1.0.js"></script>
<script>
$(document).ready(function() {
var num = $('#bigContenter>div').length;
for(var i = 1; i <= num; i++) {
var li = '<li>' + i + '</li>';
$('#num').append(li);
}
var s = 0;
$('#num li:first-child').addClass('act')
function moveR() {
s++;
if(s == num) {
s = 0;
$('#num li').eq(s).addClass('act').siblings().removeClass('act');
$('#bigContenter').animate({
left: '0'
}, 600, 'swing')
} else {
$('#num li').eq(s).addClass('act').siblings().removeClass('act');
$('#bigContenter').animate({
left: '-=400px'
}, 600, 'swing')
}
s++;
if(s == num) {
s = 0;
$('#num li').eq(s).addClass('act').siblings().removeClass('act');
$('#bigContenter').animate({
left: '0'
}, 600, 'swing')
} else {
$('#num li').eq(s).addClass('act').siblings().removeClass('act');
$('#bigContenter').animate({
left: '-=400px'
}, 600, 'swing')
}
}
function moveL() {
s--;
var sun=num*400-400;
if(s == -1) {
s = num - 1;
$('#num li').eq(s).addClass('act').siblings().removeClass('act');
for(var i=0;i<num-1;i++)
{$('#bigContenter').animate({
left: '-=400px'
}, 600/(num-1), 'swing')}
} else {
$('#num li').eq(s).addClass('act').siblings().removeClass('act');
$('#bigContenter').animate({
left: '+=400px'
}, 600, 'swing')
}
}
var t = setInterval(moveR, 3000);
$('#showOuter').mouseover(function() {
$('.swi').fadeIn(2000);
s--;
var sun=num*400-400;
if(s == -1) {
s = num - 1;
$('#num li').eq(s).addClass('act').siblings().removeClass('act');
for(var i=0;i<num-1;i++)
{$('#bigContenter').animate({
left: '-=400px'
}, 600/(num-1), 'swing')}
} else {
$('#num li').eq(s).addClass('act').siblings().removeClass('act');
$('#bigContenter').animate({
left: '+=400px'
}, 600, 'swing')
}
}
var t = setInterval(moveR, 3000);
$('#showOuter').mouseover(function() {
$('.swi').fadeIn(2000);
})
$('#showOuter').mouseleave(function() {
$('.swi').fadeOut(2000)
})
$('#showOuter').hover(function(){
clearInterval(t);
},function(){
t=setInterval(moveR, 3000);
})
$('.btnL').click(function(){
moveL();
})
$('.btnR').click(function(){
moveR();
})
$('#showOuter').mouseleave(function() {
$('.swi').fadeOut(2000)
})
$('#showOuter').hover(function(){
clearInterval(t);
},function(){
t=setInterval(moveR, 3000);
})
$('.btnL').click(function(){
moveL();
})
$('.btnR').click(function(){
moveR();
})
})
</script>
</body>
</script>
</body>
</html>