5张图片在3秒内会自动向右跳转，一直循环。求代码，用ASP或者HTML写。

Question

如题所述

Answer 1

   <div id="pic" class="slides">
    <ul class="slide-pic">
<li class="cur"><img src="images/01.jpg" ></li>
<li class="cur"><img src="images/02.jpg" ></li>
<li class="cur"><img src="images/03.jpg" ></li>
<li class="cur"><img src="images/04.jpg" ></li>

<li class="cur"><img src="images/05.jpg" ></li>
 
</ul>
  <ul class="slide-li slide-txt">
    <li class="cur"><a href="#"></a></li>
    <li class=""><a href="#"></a></li>
    <li class=""><a href="#"></a></li>
  <li class=""><a href="#"></a></li>
    <li class=""><a href="#"></a></li>
 
  </ul>
</div>

<script language="javascript" type="text/javascript">

    var defaultOpts = {

        interval: 3000,

        fadeInTime: 400,

        fadeOutTime: 300

    };

    //Iterate over the current set of matched elements

    var _titles = $("ul.slide-txt li");

    var _titles_bg = $("ul.op li");

    var _bodies = $("ul.slide-pic li");

    var _count = _titles.length;

    var _current = 0;

    var _intervalID = null;

    var stop = function () {

        window.clearInterval(_intervalID);

    };

    var slide = function (opts) {

        if (opts) {

            _current = opts.current || 0;

        } else {

            _current = (_current >= (_count - 1)) ? 0 : (++_current);

        };

        _bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime,

    function () {

        _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);

        _bodies.removeClass("cur").eq(_current).addClass("cur");

    });

        _titles.removeClass("cur").eq(_current).addClass("cur");

        _titles_bg.removeClass("cur").eq(_current).addClass("cur");

    }; //endof slide

    var go = function () {

        stop();

        _intervalID = window.setInterval(function () {

            slide();

        },

    defaultOpts.interval);

    }; //endof go

    var itemMouseOver = function (target, items) {

        stop();

        var i = $.inArray(target, items);

        slide({

            current: i

        });

    }; //endof itemMouseOver

    _titles.hover(function () {

        if ($(this).attr('class') != 'cur') {

            itemMouseOver(this, _titles);

        } else {

            stop();

        }

    },

go);

    //_titles_bg.hover(function() { itemMouseOver(this, _titles_bg); }, go);

    _bodies.hover(stop, go);

    //trigger the slidebox

    go();

    var slideX = {

        _this: $('.catalog .imgbox'),

        _btnLeft: $('.catalog .left'),

        _btnRight: $('.catalog .right'),

        init: function () {

            slideX._btnLeft.click(slideX.slideLeft);

            slideX._btnRight.click(slideX.slideRight);

        },

        slideLeft: function () {

            slideX._btnLeft.unbind('click', slideX.slideLeft);

            for (i = 0; i < 2; i++) {

                slideX._this.find('li:last').prependTo(slideX._this);

            }

            slideX._this.css('marginLeft', -224);

            slideX._this.animate({

                'marginLeft': 0

            },

        500,

        function () {

            slideX._btnLeft.bind('click', slideX.slideLeft);

        });

            return false;

        },

        slideRight: function () {

            slideX._btnRight.unbind('click', slideX.slideRight);

            slideX._this.animate({

                'marginLeft': -224

            },

        500,

        function () {

            slideX._this.css('marginLeft', '0');

            for (i = 0; i < 2; i++) {

                slideX._this.find('li:first').appendTo(slideX._this)

            }

            slideX._btnRight.bind('click', slideX.slideRight);

        });

            return false;

        }

    }

    $(document).ready(function () {

        slideX.init();

    })

    $(document).ready(function () {

        var newTime = new Date();

        var newTime = newTime.getTime();

        var $imgTmp = $('#topromotion').find('img:first');

        var osrc = $imgTmp.attr('src');

        $imgTmp.attr('src', osrc + '?' + newTime);

    });

</script>

追问

大哥，表示看不懂，初学者。就会一点ASP。

追答

这是html+js的图片切换效果，你加上样式就可以用了

追问

第一部分写在哪里？第二部分写在哪里？可以说具体一点吗，谢谢。