debug

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

追踪css

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

寻找js

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

查看j.js

代码压缩的太严重了

查看pic_scroll.js

(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="#" class="arrow back">&lt;</a><a href="#" 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); } });

移植性,并没有对属性的特别要求

测试

备份 D:\php\www\dede\uploads\images\js\j.js

备份 D:\php\www\dede\uploads\templets\default\js\pic_scroll.js

安装不带轮播的模板

添加一篇文章检验模板的可靠性

漏掉了这些css样式

<div class="picnews">
<dl class="tbox light">
<dt class='light'><strong>图文资讯</strong></dt>
<dd class='light'>
<div class="infiniteCarousel">
<div class="wrapper">

所以没有显示出来

原来的css和js要尽量不和现在的混合在一起,要单独写成一个文件

 

原文链接:https://www.cnblogs.com/hellowzd/p/4242765.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注