<！DOCTYPE HTML><meta charset="utf-8">图片轮播演示<style type="text/css">* {margin: 0px;padding: 0px;font-size: 14px;}div.LunBo {position: relative;list-style-type: none;height: 170px;width: 490px;}div.LunBo ul li {position: absolute;height: 170px;width: 490px;left: 0px;top: 0px;display: none;}div.LunBo ul li.CurrentPic {display: block;}div.LunBo div.LunBoNum {position: absolute;left: 374px;bottom: 11px;width: 83px;text-align: right;background-color: #999;padding-left: 10px;}div.LunBo div.LunBoNum span {height: 20px;width: 15px;display: block;line-height: 20px;text-align: center;margin-top: 5px;margin-bottom: 5px;float: left;cursor: pointer;}div.LunBo div.LunBoNum span.CurrentNum {background-color: #3F6;}</style><body>
10.怎样用jquery做图片轮播这种简单的幻灯片是使用索引匹配的 。一个思路如下：
写一个函数，这个函数可以实现图片的切换；
function flipSlide(int){
//横向滑动
$('#slideContent .sc_wrap:first').animate({'left' : '-'+ int*960 +'px'});
//纵向滑动
$('#slideContent .sc_wrap:first').animate({'top' : '-'+ int*200 +'px'});
}然后，大致有3种切换方法，分别是：左右控制（上一个下一个），指示控制（1,2,3,4）和自动播放；
左右控制比较简单，点击按钮+1-1即可 。
var startInt = 0；//默认显示第一个
//上翻
$('#prev').click(function(){
//上一个，就是当前元素的上一个元素，要做判断的不会有-1的索引 。
startInt = startInt-1;
//调用切换函数
flipSlide(startInt );
}）指示控制更简单，直接适应其index索引即可 。
$('#slideNav ul li').click(function(){
//获取当前的索引
var thisId = $(this).index();
//执行播放函数
flipSlide(thisId );
}）自动播放需要写一个自动播放函数，然后调用，比如：
function autoPlay(){
if(startInt >；= 幻灯片个数){
startInt = 0;
}else{
startInt = startInt + 1;
}
//执行播放函数
flipSlide(thisId );
}
//定时播放，3秒切换
setInterval(autoPlay,3000)；这样，一个简单的幻灯片就写好了 。
如果你希望它更智能，那么你就需要多下点功夫了 。其实，道理都是一样的，只不过做成什么样的效果更好看而已 。这个效果和滑动门tab是一样的原理 。
文章插图