效果图：此处的效果点击左右按钮切换图片，点击图片下方小圆点切换图片，鼠标不进入图片自动更换，悬停在图片上停止切换，这种效果是几乎所有的网站都会在首页用到的功能。
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"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/main.css"> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/slide2.js"></script> <title>天天生鲜-首页</title> </head> <body> <div class="center_con2"> <div class="slide fl"> <ul class="slide_list"> <li><a href="javascript:;"><img src="images/slide.jpg" alt="专题图片" /></a></li> <li><a href="javascript:;"><img src="images/slide02.jpg" alt="专题图片" /></a></li> <li><a href="javascript:;"><img src="images/slide03.jpg" alt="专题图片" /></a></li> <li><a href="javascript:;"><img src="images/slide04.jpg" alt="专题图片" /></a></li> </ul> <div class="prev"></div> //左右点击的>和< <div class="next"></div> <ul class="points"> //底下的小圆点，通过jQuery动态添加 <!-- <li class="active"></li> <li></li> <li></li> <li></li> --> </ul> </div> </div> </body> </html>css代码
.slide{
width:760px;
height:270px;
background-color:gold;
position:relative; //定位到常见用法：父类设置相对定位不给位置值，子类设置绝对定位。
overflow:hidden; //将图片隐藏，其他作用：清除浮动和margin-top塌陷
margin: 100px auto; //左右居中
}
.slide_list{
position:absolute; //子类设置绝对定位，不偏移
left:0;
top:0;
width:760px;
height:270px;
}
.slide_list li{
width:760px;
height:270px;
position:absolute;
left:0;
top:0;
}
.prev{
position:absolute;
left:11px;
top:122px;
width:15px;
height:23px;
background:url(../images/icons.png) -1px -450px no-repeat;
cursor:pointer;
}
.next{
position:absolute;
right:11px;
top:122px;
width:15px;
height:23px;
background:url(../images/icons.png) -1px -500px no-repeat;
cursor:pointer;
}
.points{
position:absolute;
left:0;
bottom:9px;
width:100%;
height:11px;
font-size:0;
text-align:center; //父类设置，子类居中
}
.points li{
display:inline-block; //转换块元素为行类块，可以设置属性，在一行显示，没有小间隙
width:11px;
height:11px;
background-color:#9f9f9f;
margin:0 5px;
border-radius:50%; //默认是方形的，通过设置四个角度的弧度可以转换成圆形
cursor:pointer;
}
.points .active{
background-color:#cecece;
}
jQuery代码：
$(function(){
var $slide = $('.slide'), //通过选择器获取对象
$li = $('.slide_list li'),
$points = $('.points'),
$prev = $('.prev'),
$next = $('.next');
// 定义变量，存储动画的运动状态，如果幻灯片在运动，那么它的值是true
var bIsmove = false;
// 定义变量，存储当前显示的并且马上要离开的幻灯片的索引值
var iPrevli = 0;
// 定义变量，存储当前要运动过来的幻灯片的索引值
var iNowli = 0;
// 存储幻灯片的个数
var iLen = $li.length;
// 除了第一张幻灯片，其他的幻灯片放到右边去
$li.not(':first').css({'left':760});
// 根据幻灯片的个数动态创建小圆点
for(var i=0;i<iLen;i++)
{
var $pli = $('<li>');
if(i==0)
{
$pli.addClass('active'); //动态添加类，高亮显示
}
$pli.appendTo($points); //将li标签添加到ul标签的内部的前面，主谓对调用append等价于此写法的appendto
}
// 获取小圆点
var $pointsli = $('.points li');
// 点击小圆点
$pointsli.click(function(){
iNowli = $(this).index(); //获取当前点击元素的索引
fnMove();
$(this).addClass('active').siblings().removeClass('active'); //链式调用：当前点击元素添加高亮，同级其他移除高亮显示。
})
// 点击向左的箭头
$prev.click(function(){
if(bIsmove) //防止快速重复点击造成的记忆切换
{
return;
}
bIsmove = true;
iNowli--; //每次只能向右切换一张
fnMove();
$pointsli.eq(iNowli).addClass('active').siblings().removeClass('active');
})
// 点击向右的箭头
$next.click(function(){
if(bIsmove)
{
return;
}
bIsmove = true;
iNowli++;
fnMove();
$pointsli.eq(iNowli).addClass('active').siblings().removeClass('active');
})
function fnAutoplay(){ //自动播放幻灯片
iNowli++;
fnMove();
$pointsli.eq(iNowli).addClass('active').siblings().removeClass('active');
}
var oTimer = setInterval(fnAutoplay,3000); //每隔3秒钟执行一次播放
$slide.mouseenter(function(){ //鼠标进入事件，清除动画
clearInterval(oTimer);
})
$slide.mouseleave(function(){
oTimer = setInterval(fnAutoplay,3000);
})
function fnMove(){
if(iNowli==iPrevli) //如果点击的是同一个小圆点，无动作切换
{
return;
}
// 当在第一张幻灯片，点击向左的箭头的时候
if(iNowli<0)
{
iNowli = iLen-1; //最右（后）的图片
iPrevli = 0;
$li.eq(iNowli).css({'left':-760}); //将最右的图片定位到显示框的左边
$li.eq(iNowli).animate({'left':0}); //动画事件：向右移动到显示框，占领第一张图片的位置
$li.eq(iPrevli).animate({'left':760},function(){ //上一张图片移动到右边
bIsmove = false; //更改状态，只有false的时候才可以点击下一次事件
});
iPrevli = iNowli; //当前的索引值成为先一个的上一个
return;
}
// 当在最后一张幻灯片，点击向右的箭头的时候
if(iNowli>iLen-1)
{
iNowli = 0;
iPrevli = iLen-1;
$li.eq(iNowli).css({'left':760});
$li.eq(iNowli).animate({'left':0});
$li.eq(iPrevli).animate({'left':-760},function(){
bIsmove = false;
});
iPrevli = iNowli;
return;
}
if(iNowli>iPrevli) //如果点击的是当前显示页的右面的
{
$li.eq(iNowli).css({'left':760}); //不管是哪张图片，直接定位到显示框的右边
$li.eq(iPrevli).animate({'left':-760}); //显示的图片移动到显示框的左边
}
else
{
$li.eq(iNowli).css({'left':-760});
$li.eq(iPrevli).animate({'left':760});
}
$li.eq(iNowli).animate({'left':0},function(){ //当前的图片动画移动到显示框，执行回调函数
bIsmove = false;
});
iPrevli = iNowli;
}
})
结语：此案例是所有的网站经常用到的显示效果，经常出现在首页，称为幻灯片效果，一般会将重要的信息显示在此幻灯片中，起到明示显示的效果，用户更容易看到。其中用到很多结合的知识点，是一个很好的练习案例。网络中也有已经封装好的，直接调用比较方便，但是缺点就是因为是别人的东西，一但想要修改比较困难，容易出现错误。作为一个基础知识的提升练习是一个很好的选择！！！
时间飞快，让人来不及怀念，只能疯狂向前，外面的世界比你聪明的比你努力，没有理由懒惰成性！！！