图片轮播

Question

我想请教下各位，下面这个代码怎么改能实现图片自动轮播呢？ <!-- 焦点图切换开始  -->
          <DIV id=nav>
            <UL>
              <LI><IMG src="<?{$arrGWeb.templats_root}?>/images/01.jpg" text="健全的法律制度是现代社会的基石|陆欣律师事务所" pic="1">
                <DIV>一个海岛</DIV>
              </LI>
              <LI><IMG src="<?{$arrGWeb.templats_root}?>/images/02.jpg" text="美景如画的海景|天蓝海蓝" pic="2">
                <DIV>一片麦穗</DIV>
              </LI>
              <LI><IMG src="<?{$arrGWeb.templats_root}?>/images/03.jpg" text="郁郁葱葱的生命|生生不息的生命" pic="3">
                <DIV>一树绿叶</DIV>
              </LI>
              <LI><IMG src="<?{$arrGWeb.templats_root}?>/images/04.jpg" text="孤独的一棵老树|等谁呢？" pic="4">
                <DIV>一棵大树</DIV>
              </LI>
              <LI><IMG src="<?{$arrGWeb.templats_root}?>/images/05.jpg" text="明媚的向日葵花|生生不息的生命" pic="5">
                <DIV>一地葵花</DIV>
              </LI>
            </UL>
            <DIV id=BG></DIV>
            <DIV id=mask></DIV>
            <DIV id=back><IMG height=255 src="" width=685></DIV>
          </DIV>
          <p>
            <SCRIPT type=text/javascript>
 <!--
 var num = 0;
 $("#nav").hide();
$("li img").load(function(){
num++;
if (num==4)
{
$("#nav").show();
}
})
.click(function(){

//如果已经处于active状态，return
if (this.className.indexOf("active")!=-1) return;

//正文文字渐隐
$("#frontText").fadeOut();
$("#frontTextBack").fadeOut();
$("#frontTextSub").fadeOut(); //active状态的图片恢复原样
$("li img.active").fadeTo(200,0.6)
.removeClass("active")
.animate({top:5,width:70,left:1},300)
.parent().css({"color":"#aaa"});  //

//获取数据
var i = $(this).attr("pic");
var t = $(this).attr("text").split("|");

//当前
$(this).animate({top:-5,width:70,height:40,left:1},100)
.addClass("active")
.fadeTo(200,1)
.parent().css({"color":"white"}); $("#back").children().addClass("gray").end()
.fadeTo(500,0.1,function(){
//var IMG = new Image();
//IMG.s
$(this).children("img").attr("src","<?{$arrGWeb.templats_root}?>/images/"+i+".jpg").removeClass("gray");   //更改图片
$(this).fadeTo(500,1,function(){
$("#frontText").html(t[0]).fadeIn(200); //更改正文文字
$("#frontTextBack").html(t[0]).fadeIn(200); //阴影文字
$("#frontTextSub").html(t[1]).fadeIn(200)} //副标题
);
})
}) //初始第一张图片

var i =0; show(); function show(){
if (i==$("li img").size()) i = 0
$("li img").eq(i).click();
i++;
//setTimeout(show(),1000);
} document.oncontextmenu   =  function(e){return false}

if (self.location.search!=""){
var V = self.location.search;
V = V.substr(1,V.length);
eval(V);
var json ="{";
if (option.skin==0)
$("#mask").hide();
if (option.animate == 0){
$("#nav ul").hide();
}
$("#nav").width(option.width?option.width:685);
$("#nav").height(option.height?option.height:255);
$("#back img").width($("#nav").width());
$("#back img").height($("#nav").height());
$(self.parent.document.getElementById("splash")).children().height($("#nav").height()).width($("#nav").width());
}

 //-->
  </SCRIPT>
            <!-- 焦点图切换结束-->

Answer 1

这是.click事件 触发的，把它改成 setInterval("函数名"，1000)，这样的形式，自动触发。 

Answer 2

jquery插件 方便快捷一些  有时间的时候再研究自己写

Answer 3

十个jQuery的幻灯片图片轮播切换插件

Answer 4

<div class="content_right">
                        <div class="ad">
                            <ul class="slider">
                                <%
                                    //实现广告的效果   动态的生成页面上广告图
                                    List<Bean.ProductAD> listProductAD = getProduct();
                                    string src = string.Empty;
                                    string url = string.Empty;
                                    for (int i = 0; i < list.Count; i++)
                                    {                                        src = listProductAD[i].PicSrc;
                                        url = listProductAD[i].URL;   
                                %>
                                <li><a href="<%=url %>">
                                    <img src="<%=src %>" /></a></li>
                                <% }
                                %>
                            </ul>
                            <ul class="num">
                                <%
                                    for (int i = 0; i < list.Count; i++)
                                    { 
                                %><li>
                                    <%=i+1 %></li><%
                                                      }
                                    %>
                            </ul>
                        </div>
                    </div>
.content_right .ad { 
margin-bottom:10px;
    width: 539px;
    height: 307px;
overflow:hidden;
position:relative;
    top: 0px;
    left: 0px;
}
.content_right .slider,.content_right .num{
position:absolute;
}
.content_right .slider li{ 
list-style:block;
display:inline;
}
.content_right .slider img{ 
    width: 539px;
    height: 307px;
display:block;
}
.content_right .num{ 
right:-30px; 
bottom:8px;
    height: 22px;
    width: 100px;
}
.content_right .num li{
float: left;
color: #069;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #63a9dd;
background-color: #fff;
}
.content_right .num li.on{
color: #fff;
line-height: 16px;
width: 16px;
height: 16px;
font-size: 14px;
margin: 3px 1px;
border: 1px solid #63a9dd;
background-color: #63a9dd;
font-weight: bold;
}
/*首页广告效果*/
var rowTime = 1000;
var waitTime = 4000; //广告轮换时间
function logo() {
    var len = $(".num > li").length;                                        //获取num下存在几个li
    var index = 0;
    var adTimer;
    $(".num li").mouseover(function () {                                    //广告上的数字点击事件
        index = $(".num li").index(this);                                   //判断点击的是哪个
        showImg(index);                                                     //根据点击的数字来显示出广告
    }).eq(0).mouseover();
    //滑入 停止动画，滑出开始动画.
    if ($(".num li").index(this) != index) {
        $('.ad').hover(function () {                                        //鼠标滑动到广告中停止广告滚动
            clearInterval(adTimer);
        }, function () {
            adTimer = setInterval(function () {                             //鼠标移出时开始广告滚动
                if (++index == len) { index = 0; }
                showImg(index);                                             //显示方法
            }, waitTime);
        }).trigger("mouseleave");
    }
}// 通过控制top ，来显示不同的图片
function showImg(index) {
    $(".slider img").hide();                                                //隐藏广告
    var adHeight = $(".content_right .ad").height();
    var le = 0;
    le = (-adHeight * index);                                               //根据广告的高度来动态的改变广告显示
    $(".slider").animate({ bottom: le }, 1);
    $(".slider img").fadeIn("slow");                                        //显示广告,渐入效果
    $(".num li").removeClass("on").eq(index).addClass("on");                //更改样式
}正在用的.  基于jquery