简单的图片轮播，支持按钮控制
2012-05-31 金城 4722
关键步骤：
- html格式需要一个固定大小的容器
- 容器内输出<ul><li><a><img/>层级的内容；<a>可要可不要
- 设置css
- 设置脚本
- 需要JQuery支持
源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>幻灯片演示</title>
<script src="http://www.mycoolapp.net/jquery/jquery-1.7.1.min.js"type="text/javascript"></script>
<style type="text/css">
.slide{margin:0;padding:0;list-style-type:none;position:absolute;top:250px;right:80px;height:20px;}
.slide li{float:left;display:block;border:#666 1px solid;padding:3px;overflow:hidden;margin:0 8px 0 0;
font-size:7px;cursor:pointer;border-radius:6px;}
.slide li img{width:20px;}
.slide li.sel{border:1px dashed red;}
</style>
<script type="text/javascript">
var sHdl;
$(function(){
var delay=3000;
var $slide=$('.slide').css('z-index','2');
var $sdemo=$('<div></div>').css({'z-index':'1','width':'400','height':'300px','border':'1px solid #ddd'});
$slide.after($sdemo).parent().css('position','relative');
var liCount=$sLi.length;
var liIndex=0;
$sdemo.html($sLi.eq(0).html());
function play(){
var $cLi=$sLi.eq(liIndex).addClass('sel').fadeTo(50,.2).fadeTo(50,1).fadeTo(50,.2)
.fadeTo(50,1).fadeTo(50,.2).fadeTo(50,1);
$sLi.not($cLi[0]).removeClass('sel').fadeTo(50,.5);
$sdemo.find('img').fadeOut(200,function(){$sdemo.html($cLi.html());});
liIndex++;
if(liIndex>=liCount)liIndex=0;
$sdemo.css('background-image','url('+ $cLi.find('img').attr('src') +')');
};
$sLi.each(function(i){
$(this).click(function(){liIndex=i;clearInterval(sHdl);play();sHdl=setInterval(play,delay);});
});
clearInterval(sHdl);sHdl=setInterval(play,delay);
});
</script>
</head>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>幻灯片演示</title>
<script src="http://www.mycoolapp.net/jquery/jquery-1.7.1.min.js"type="text/javascript"></script>
<style type="text/css">
.slide{margin:0;padding:0;list-style-type:none;position:absolute;top:250px;right:80px;height:20px;}
.slide li{float:left;display:block;border:#666 1px solid;padding:3px;overflow:hidden;margin:0 8px 0 0;
font-size:7px;cursor:pointer;border-radius:6px;}
.slide li img{width:20px;}
.slide li.sel{border:1px dashed red;}
</style>
<script type="text/javascript">
var sHdl;
$(function(){
var delay=3000;
var $slide=$('.slide').css('z-index','2');
var $sdemo=$('<div></div>').css({'z-index':'1','width':'400','height':'300px','border':'1px solid #ddd'});
$slide.after($sdemo).parent().css('position','relative');
var liCount=$sLi.length;
var liIndex=0;
$sdemo.html($sLi.eq(0).html());
function play(){
var $cLi=$sLi.eq(liIndex).addClass('sel').fadeTo(50,.2).fadeTo(50,1).fadeTo(50,.2)
.fadeTo(50,1).fadeTo(50,.2).fadeTo(50,1);
$sLi.not($cLi[0]).removeClass('sel').fadeTo(50,.5);
$sdemo.find('img').fadeOut(200,function(){$sdemo.html($cLi.html());});
liIndex++;
if(liIndex>=liCount)liIndex=0;
$sdemo.css('background-image','url('+ $cLi.find('img').attr('src') +')');
};
$sLi.each(function(i){
$(this).click(function(){liIndex=i;clearInterval(sHdl);play();sHdl=setInterval(play,delay);});
});
clearInterval(sHdl);sHdl=setInterval(play,delay);
});
</script>
</head>
<body>
<div style="width:400px;margin:0 auto;"><!--这个DIV是容器-->
<ul class="slide"><!--这个UL内是幻灯片数据，同时被脚本设置为控制按钮-->
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif"alt="demo 2"/></li>
<li><img src="http://www.google.com.hk/images/srpr/logo3w.png"alt="demo 2"/></li>
<li><img src="http://img3.cache.netease.com/www/logo/logo_png.png"alt="demo 3"/></li>
</ul>
</div>
</body>
</html>