<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>幻燈片</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<style type="text/css">
/* 將標簽默認的間距設為0 */
body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,select,form{
margin: 0;
padding: 0;
}
/* 讓h標簽繼承body內設置的字體大小 */
h1,h2,h3,h4,h5,h6{
font-size: 100%;
}
/* 去掉默認的項目圖標 */
ul{
list-style: none;
}
/* 強調文字去掉傾斜 */
em{
font-style: normal;
}
/* 去掉超鏈接的下劃線 */
a{
text-decoration: none;
}
/* 去掉IE下圖片做鏈接的時候產生的邊框 */
img{
border: none;
}
/* 清除margin-top塌陷、清除浮動 */
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
/* 兼容IE下清除浮動 */
.clearfix{
zoom: 1;
}
/* 浮動 */
.fl{
float: left;
}
.fr{
float: right;
}
body{
font-family: 'Microsoft Yahei';
color: #666;
font-size: 12px;
}
.center_con{
width: 600px;
height: 400px;
/*background-color: cyan;*/
margin: 50px auto 0;
}
/* ----------幻燈片樣式---------- */
.slide{
width: 600px;
height: 400px;
position: relative;/* 父容器要設置定位，才能讓子元素相對父容器定位 */
overflow:hidden;
}
.slide .slide_pics{
width: 600px;
height: 400px;
left:0;
top:0;
position:relative;
}
.slide .slide_pics li{
width: 600px;
height: 400px;
left:0;
top:0;
position:absolute;
}
/* 左右翻頁箭頭樣式 */
.prev,.next{
width: 20px;
height: 24px;
position: absolute;/* 相對父容器進行絕對定位 */
left:10px;
top:188px;
cursor: pointer;/* 鼠標指針成手形 */
background: url(../images/icons.png) 0px -450px no-repeat;
}
.next{
left: 570px;
background: url(../images/icons.png) 0px -500px no-repeat;
}
/* 小圓點樣式 */
.points{
position: absolute;/* 塊元素默認寬度為父寬度的100%，定位之后就變成行內塊了，它不能繼承父的寬度，如果沒有設置寬高，就由內容決定，所以也必須給它一個寬度 */
width: 100%;
height: 11px;
/*background-color: red;*/
left: 0;
bottom: 9px;
text-align: center;/* 行內塊的居中方式 */
font-size: 0px;/* 去掉行內塊間隙，它引起小圓點沒有挨緊，并且向下超出高度范圍 */
}
.points li{
width: 11px;
height: 11px;
display: inline-block;
background-color: #9f9f9f;
margin: 0 5px;
border-radius: 50%;/* 設置圓角，優雅降級，更好效果請升級瀏覽器，不兼容IE */
}
.points .active{
background-color: #cecece;
}
</style>
<script type="text/javascript">
$(function(){
var $li = $('.slide_pics li');
var len = $li.length;//4張
var $prev = $('.prev');//左按鈕
var $next = $('.next');//右按鈕
var nextli = 0;//將要運動過來的li
var nowli = 0;//當前要離開的li
var timer = null;
//除第一個li，都定位到右側
$li.not(':first').css({left:600});
//動態創建小圓點
$li.each(function(index){
//創建li
var $sli = $('<li></li>');
//第一個li添加選中樣式
if(index == 0){
$sli.addClass('active');
}
//將小圓點的li添加到ul中
$sli.appendTo('.points');
})
$points = $('.points li');
// alert($points.length);//4個小圓點
//小圓點的點擊事件
$points.click(function() {
nextli = $(this).index();
//當點擊當前張的小圓點時，不做任何操作，防止跳變的Bug
if(nextli == nowli){
return;
}
move();
$(this).addClass('active').siblings().removeClass('active');
});
//左按鈕的點擊事件
$prev.click(function() {
nextli--;
move();
//改變圓點樣式
$points.eq(nextli).addClass('active').siblings().removeClass('active');
});
//右按鈕的點擊事件
$next.click(function() {
nextli++;
move();
//改變圓點樣式
$points.eq(nextli).addClass('active').siblings().removeClass('active');
});
//針對外層的slide做鼠標進入和離開事件，因為鼠標指針有可能進入到左右翻頁和小圓點的范圍
//mouseenter使鼠標進入子元素也能清除定時器
$('.slide').mouseenter(function() {
clearInterval(timer);
});
$('.slide').mouseleave(function() {
timer = setInterval(autoplay, 3000);
});
//定時器循環自動播放
timer = setInterval(autoplay, 3000);
//自動播放的邏輯與點擊下一張是相同的
function autoplay(){
nextli++;
move();
//改變圓點樣式
$points.eq(nextli).addClass('active').siblings().removeClass('active');
}
function move(){
//向右走到第一張，再繼續走時
if(nextli < 0){
nextli = len - 1;//將要來的是最后一張
nowli = 0;//要離開的是第一張
$li.eq(nextli).css({left:-600});//把最后一張定位到左側，準備進入
$li.eq(nowli).stop().animate({left: 600});//離開的第一張走到右側
$li.eq(nextli).stop().animate({left: 0});//馬上要進來的最后一張走進來
nowli = nextli;//要離開的賦值為剛進入的最后一張
return;//下邊是正常情況的，不執行，直接返回
}
//向左走到最后一張，再繼續走時
if(nextli > len - 1){
nextli = 0;//將要來的是第一張
nowli = len - 1;//要離開的是最后一張
$li.eq(nextli).css({left:600});//把第一張定位到右側，準備進入
$li.eq(nowli).stop().animate({left: -600});//離開的最后一張走到左側
$li.eq(nextli).stop().animate({left: 0});//馬上要進來的第一張走進來
nowli = nextli;//要離開的賦值為剛進入的第一張
return;//下邊是正常情況的，不執行，直接返回
}
if(nextli > nowli){
//馬上要進來的這張瞬間移動到右邊
$li.eq(nextli).css({left:600});
//當前這張離開
$li.eq(nowli).stop().animate({left: -600});
}else{
//馬上要進來的這張瞬間移動到左邊
$li.eq(nextli).css({left:-600});
//當前這張離開
$li.eq(nowli).stop().animate({left: 600});
}
//馬上要進來的這張走到0的位置
$li.eq(nextli).stop().animate({left: 0});
nowli = nextli;
}
})
</script>
</head>
<body>
<div class="center_con">
<div class="slide fl">
<ul class="slide_pics">
<li><a href=""><img src="images/slide01.jpg" alt="幻燈片" /></a></li>
<li><a href=""><img src="images/slide02.jpg" alt="幻燈片" /></a></li>
<li><a href=""><img src="images/slide03.jpg" alt="幻燈片" /></a></li>
<li><a href=""><img src="images/slide04.jpg" alt="幻燈片" /></a></li>
</ul>
<div class="prev"></div>
<div class="next"></div>
<ul class="points">
<!-- 動態創建小圓點
<li class="active"></li>
<li></li>
<li></li>
<li></li> -->
</ul>
</div>
</div>
</body>
</html>
