图片轮播

linyang1987 2011-06-21 10:25:03

我想请教下各位，下面这个代码怎么改能实现图片自动轮播呢？


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

</SCRIPT>

...全文

236 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

freemangod 2011-06-22

打赏
举报

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

燥动的心 2011-06-22

打赏
举报

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

zousir18 2011-06-22

打赏
举报

我也写过，这个东西要慢慢的调一下，这个逻辑不仅仅在图片轮转里用到，其实所有的循环都基于这个理论，lz但码是多了点，你慢慢的调，很容易的。

风中叶 2011-06-22

打赏
举报

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

小辛、 2011-06-22

打赏
举报





<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");                //更改样式

}