简单的图片轮播,支持按钮控制
软源LOGO
讲述咱程序员自己的故事

位置:软源 »编程 »文章

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

coolapp;2012-05-31 11:22:43;浏览:4524

关键步骤:

  • 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;/*delay这里可以更改间隔时间;单位毫秒*/
  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>

分享到:
(转载→)