简单的图片轮播,支持按钮控制

2012-05-31  金城  4643

关键步骤:

源码:

<!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>

 

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