<div class="picnews">   <dl class="tbox light">    <dt class=‘light‘><strong>图文资讯</strong></dt>    <dd class=‘light‘>     <div class="infiniteCarousel">      <div class="wrapper">       <ul id=‘imgscroll‘>        {dede:arclist row=10 orderby=pubdate type=‘image.‘ imgwidth=‘143‘ imgheight=‘106‘}        <li><a href="[field:arcurl/]">[field:image/]<span class="title">[field:title/]</span></a></li>        {/dede:arclist}       </ul>      </div>     </div>    </dd>   </dl>  </div>

/********测试****success***图片轮播的css样式***/.index .picnews{    width:712px;    float:left;    clear:both;    overflow:hidden;/**溢出隐藏******重要的***/    margin-top:9px;/***属性设置元素的上外边距****不太重要**/    *margin-top:12px;/*****不太重要**/    _margin-top:0px;/****不太重要**/}

<!------控制图片轮播-----><script language="javascript" type="text/javascript" src="http://www.mamicode.com/{dede:global.cfg_cmspath/}/images/js/j.js" ></script><script language="javascript" type="text/javascript" src="http://www.mamicode.com/{dede:global.cfg_templets_skin/}/js/pic_scroll.js"></script>

(function () {    $.fn.infiniteCarousel = function () {        function repeat(str, n) {            return new Array( n + 1 ).join(str);        }                return this.each(function () {            // magic!            var $wrapper = $(‘> div‘, this).css(‘overflow‘, ‘hidden‘),                $slider = $wrapper.find(‘> ul‘).width(9999),                $items = $slider.find(‘> li‘),                $single = $items.filter(‘:first‘)                                singleWidth = $single.outerWidth(),                visible = Math.ceil($wrapper.innerWidth() / singleWidth),                currentPage = 1,                pages = Math.ceil($items.length / visible);                            /* TASKS */                        // 1. pad the pages with empty element if required            if ($items.length % visible != 0) {                // pad                $slider.append(repeat(‘<li class="empty" />‘, visible - ($items.length % visible)));                $items = $slider.find(‘> li‘);            }                        // 2. create the carousel padding on left and right (cloned)            $items.filter(‘:first‘).before($items.slice(-visible).clone().addClass(‘cloned‘));            $items.filter(‘:last‘).after($items.slice(0, visible).clone().addClass(‘cloned‘));            $items = $slider.find(‘> li‘);                        // 3. reset scroll            $wrapper.scrollLeft(singleWidth * visible);                        // 4. paging function            function gotoPage(page) {                var dir = page < currentPage ? -1 : 1,                    n = Math.abs(currentPage - page),                    left = singleWidth * dir * visible * n;                                $wrapper.filter(‘:not(:animated)‘).animate({                    scrollLeft : ‘+=‘ + left                }, 500, function () {                    // if page == last page - then reset position                    if (page > pages) {                        $wrapper.scrollLeft(singleWidth * visible);                        page = 1;                    } else if (page == 0) {                        page = pages;                        $wrapper.scrollLeft(singleWidth * visible * pages);                    }                                        currentPage = page;                });            }                        // 5. insert the back and forward link            $wrapper.after(‘<a href="http://www.mamicode.com/#" class="arrow back">&lt;</a><a href="http://www.mamicode.com/#" class="arrow forward">&gt;</a>‘);                        // 6. bind the back and forward links            $(‘a.back‘, this).click(function () {                gotoPage(currentPage - 1);                return false;            });                        $(‘a.forward‘, this).click(function () {                gotoPage(currentPage + 1);                return false;            });                        $(this).bind(‘goto‘, function (event, page) {                gotoPage(page);            });                        // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL            $(this).bind(‘next‘, function () {                gotoPage(currentPage + 1);            });        });    };})(jQuery);$(document).ready(function () {    // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL    var autoscrolling = true;    if($(‘#imgscroll > li‘).length>0)    {        $(‘.infiniteCarousel‘).infiniteCarousel().mouseover(function () {            autoscrolling = false;        }).mouseout(function () {            autoscrolling = true;        });        setInterval(function () {            if (autoscrolling) {                $(‘.infiniteCarousel‘).trigger(‘next‘);            }        }, 5000);    }    });