<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.wrap{
position: relative;
width: 500px;
height: 375px;
margin: 0 auto;
border: 1px solid #333;
}
ul{list-style: none;}
ul>li{
display: none;
}
img{
display: block;
width: 500px;
}
#num{
position: absolute;
top: 0;
width: 100%;
text-align: center;
background-color: rgba(0,0,0,.4);
}
button{
width: 40px;
height: 50px;
font-size: 40px;
opacity: .6;
}
button:first-of-type{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
button:last-of-type{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.men{
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
}
.men>span{
display: inline-block;
width: 15px;
height: 15px;
background-color: #eee;
border-radius: 50%;
border: 2px solid #fff;
}
#txt{
position: absolute;
bottom: 0;
left: 50%;
font-size: 20px;
transform: translateX(-50%);
}
.wrap .ac{
display: block;
}
.wrap .active{
background: red;
}
</style>
<script src="./js/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function(){
//聲明一個數組 記錄所有圖片的地址
var img = ['./images/1.jpg','./images/2.jpg','./images/3.jpg','./images/4.jpg',];
var n = 0;
$('#left').click(function(){
n--;
if(n<0){
n = 3;
}
ck(n);
})
$('#right').click(function(){
n++;
if(n>3){
n = 0;
}
ck(n);
})
function ck(n){
$('img').attr('src',img[n]);
$('#num').text((n+1)+'/4');
$('#txt').text('美女'+(n+1));
$('span').removeClass('active');//jQuery對象有隱式迭代 在做操作的時候不需要我們手動循環，jQuery會自動的偷偷地幫我們循環所有的元素，並逐一做操作
// $('span')[n].className = 'active';
$('span:nth-child('+(n+1)+')').addClass('active');
}
})
</script>
</head>
<body>
<div class="wrap">
<p id="num">1/4</p>
<ul>
<li class="ac"><img src="images/1.jpg" ></li>
<!-- <li><img src="images/2.jpg" ></li>
<li><img src="images/3.jpg" ></li>
<li><img src="images/4.jpg" ></li> -->
</ul>
<button type="button" id="left"><</button>
<button type="button" id="right">></button>
<div class="men">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
<p id="txt">美女1</p>
</div>
</body>
</html>
![]()
$(function(){
var n = 0;
$('#right').click(function(){
// $('li').removeClass("ac");
// $('span').removeClass("active");
n++;
if(n>=4){
n=0;
}
ck(n);
// $('li')[n].className= 'ac';
// $('span')[n].className= 'active';
// $('#num').html((n+1)+'/4');
// $('#txt').text('美女'+(n+1));
});
$('#left').click(function(){
// $('li').removeClass("ac");
// $('span').removeClass("active");
n--;
if(n<=-1){
n=3;
}
ck(n);
// $('li')[n].className= 'ac';
// $('span')[n].className= 'active';
// $('#num').html((n+1)+'/4');
// $('#txt').text('美女'+(n+1));
});
function ck(n){
$('li').removeClass("ac");
$('span').removeClass("active");
$('li')[n].className= 'ac';
$('span')[n].className= 'active';
$('#num').html((n+1)+'/4');
$('#txt').text('美女'+(n+1));
}
})
