????????????????????????????????????????????????HTML
<!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>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/slide.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/slide.js"></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">
<!-- 動(dòng)態(tài)創(chuàng)建小圓點(diǎn)
<li class="active"></li>
<li></li>
<li></li>
<li></li> -->
</ul>
</div>
</div>
</body>
</html>
......................................................................................................................................................................
????????????????????????????????????????????????????????????????CSS
body,ul{
margin:0;
padding:0;
}
ul{list-style:none;}
.pages_con{
position:fixed;
left:0;
top:0;
width:100%;
overflow:hidden;
}
.pages{
height:600px;/*每個(gè)屏幕高度都不相同，先給個(gè)預(yù)設(shè)值600*/
position:relative;
}
.page1{ background-color:orange;}
.page2{ background-color:lightgreen;}
.page3{ background-color:cyan;}
.page4{ background-color:pink;}
.page5{ background-color:lightblue;}
.points{
width:16px;
height:176px;
position:fixed;
right:20px;
top:50%;
margin-top:-88px;
}
.points li{
width:13px;
height:13px;
margin:16px 0;
border-radius:50%;
border:1px solid #666;
cursor:pointer;
}
.points li.active{
background-color:#666;
}
.main_con{
width:900px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin-left:-450px;
margin-top:-200px;
}
.main_con .left_img{
width:363px;
height:400px;
float:left;
position:relative;
left:-50px;
opacity:0;
filter:alpha(opacity=0);
/*css3過(guò)渡動(dòng)畫(huà)：所有屬性同時(shí)變 時(shí)長(zhǎng) 運(yùn)動(dòng)曲線 延遲*/
transition:all 1000ms ease 300ms;
}
.main_con .right_info{
width:500px;
height:300px;
margin-top:50px;
float:right;
font-family:'Microsoft Yahei';
font-size:20px;
line-height:50px;
color:#666;
text-indent:2em;
text-align:justify;
position:relative;
right:-50px;
opacity:0;
filter:alpha(opacity=0);
transition:all 1000ms ease 300ms;
}
.moving .main_con .left_img{
left:0;
opacity:1;
filter:alpha(opacity=100);
}
.moving .main_con .right_info{
right:0;
opacity:1;
filter:alpha(opacity=100);
}
.main_con .right_img{
width:522px;
height:400px;
float:right;
position:relative;
top:-50px;
opacity:0;
filter:alpha(opacity=0);
transition:all 1000ms ease 300ms;
}
.main_con .left_info{
width:350px;
height:300px;
margin-top:50px;
float:left;
font-family:'Microsoft Yahei';
font-size:20px;
line-height:50px;
color:#666;
text-indent:2em;
text-align:justify;
position:relative;
bottom:-50px;
opacity:0;
filter:alpha(opacity=0);
transition:all 1000ms ease 300ms;
}
.moving .main_con .right_img{
top:0;
opacity:1;
filter:alpha(opacity=100);
}
.moving .main_con .left_info{
bottom:0;
opacity:1;
filter:alpha(opacity=100);
}
.main_con .center_img{
width:611px;
height:337px;
position:absolute;
left:50%;
margin-left:-305px;
bottom:-50px;
opacity:0;
filter:alpha(opacity=0);
transition:all 1000ms ease 300ms;
}
.moving .main_con .center_img
{
bottom:0;
opacity:1;
filter:alpha(opacity=100);
}
......................................................................................................................................................................
????????????????????????????????????????????????????????????????????JS
$(function(){
var $li = $('.slide_pics li');
var $prev = $('.prev');
var $next = $('.next');
// alter($li.)
var len = $li.length;
// 當(dāng)前是4張圖片
var nextli = 0;
// 將要運(yùn)動(dòng)過(guò)來(lái)的li
var nowli = 0;
//將要離開(kāi)的li
var timer = null;
// 定時(shí)器循環(huán)播放
$li.not(':first').css({left:600});
// 除第一個(gè)li，都是定位到右側(cè)
// 動(dòng)態(tài)創(chuàng)建小圓點(diǎn)
$li.each(function(index(){
// 創(chuàng)建li
var $sli = $('<li></li>');
// 第一個(gè)li添加選中的樣式
if(index == 0){
$sli.addClass('active');
}
// 將i添加到ul中
$sli.appendTo('.points');
})
$points = $('.points li');
$points.click(function(){
nextli = $($(this).index();
// 當(dāng)點(diǎn)擊當(dāng)前張的小圓點(diǎn)時(shí)，不做任何操作，防止跳變得Bug
if(nextli == nowli){
return;
}
move();
$(this).addClass('active').siblings().removeClass('active')
})
$prev.click(function() {
nextli--;
move();
// 改變圓點(diǎn)樣式
$points.eq(nextli).addClass('active').siblings().removeClass('active')
});
$next.click(function() {
nextli++;
move();
// 改變圓點(diǎn)樣式
$points.eq(nextli).addClass('active').siblings().removeClass('active')
});
$('.slide').mouseenter(function(event) {
ClearInterval(timer);
});
$('.slide').mouseleave(function(event) {
timer = setInterval(autoplay,3000);
});
// 定時(shí)器循環(huán)自動(dòng)播放
timer = setInterval(autoplay,3000);
// 自動(dòng)播放的邏輯與點(diǎn)擊下一張是相同的
function autoplay(){
nextli++;
move();
// 改變圓點(diǎn)樣式
$points.eq(nextli).addClass('active').siblings().removeClass('active')
}
function move(){
// 走到第一張，再繼續(xù)走時(shí)
if(nextli < 0){
nextli = len -1;
// 將要來(lái)的是最后一張
nowli = 0;
$li.eq(nextli).css({left:-600})
// 把最后一張定位到左側(cè)，準(zhǔn)備
$li.eq(nowli).stop().animate({left:600});
//離開(kāi)地第一張走到右側(cè)
$li.eq(nextli).stop().animate({left:600});
// 進(jìn)入的最后一張走進(jìn)來(lái)
nowli = nextli;
return;
// 小邊代碼是正常情況的，極端情況下不執(zhí)行，直接返回
}
// 走到最后一張，再繼續(xù)走時(shí)
if(nextli >len -1){
nextli =0;
// 將要來(lái)的是第一張
nowli = len -1;
// 要離開(kāi)的最后一張
$li.eq(nextli).css({left:600})
// 把第一張定位到右側(cè)，準(zhǔn)備
$li.eq(nowli).stop().animate({left:-600});
//離開(kāi)地最后一張走到左側(cè)
$li.eq(nextli).stop().animate({left:600});
// 進(jìn)入的最后一張走進(jìn)來(lái)
nowli = nextli;
return;
// 小邊代碼是正常情況的，極端情況下不執(zhí)行，直接返回
}
if(nextli>nowli){
$li.eq(nextli).css({left:600});
// 當(dāng)前張要離開(kāi)
$li.eq(nowli).stop().animate({left:-600});
}else{
$li.eq(nextli).css({left:-600});
$li.eq(nextli).stop().animate({left:600});
nowli = nextli;
}
//要進(jìn)入
$li.eq(nextli).stop().animate({left:0});
nowli = nextli;
}
})
