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">
<!-- 动态创建小圆点
<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;/*每个屏幕高度都不相同，先给个预设值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过渡动画：所有属性同时变 时长 运动曲线 延迟*/
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;
// 当前是4张图片
var nextli = 0;
// 将要运动过来的li
var nowli = 0;
//将要离开的li
var timer = null;
// 定时器循环播放
$li.not(':first').css({left:600});
// 除第一个li，都是定位到右侧
// 动态创建小圆点
$li.each(function(index(){
// 创建li
var $sli = $('<li></li>');
// 第一个li添加选中的样式
if(index == 0){
$sli.addClass('active');
}
// 将i添加到ul中
$sli.appendTo('.points');
})
$points = $('.points li');
$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(function(event) {
ClearInterval(timer);
});
$('.slide').mouseleave(function(event) {
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:600});
// 进入的最后一张走进来
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:600});
// 进入的最后一张走进来
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(nextli).stop().animate({left:600});
nowli = nextli;
}
//要进入
$li.eq(nextli).stop().animate({left:0});
nowli = nextli;
}
})
