幻灯片

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

</ul>

<!-- 动态创建小圆点

</ul>

</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;

}

})

HTML

CSS

JS

推荐阅读更多精彩内容