请选择 进入手机版 | 继续访问电脑版

我爱自学

 找回密码
 会员注册

QQ登录

只需一步,快速开始

DEDE织梦默认图片滚动代码 图片轮播

DEDE织梦默认图片轮播效果如下:

DEDE织梦默认图片滚动代码 图片轮播

DEDE织梦默认图片滚动代码 图片轮播


织梦默认的图片轮播效果,需要2个js文件,一个是DEDECMS images目录下的/js/j.js , 另一个是模板Templets目录下的js/pic_scroll.js

head头部文件中引入代码如下:
<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>

图片轮播HTML结构如下(div和ul Class/id不能变更,Js代码中有相关元素获取)

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

以上是织梦默认的图片滚动效果必要的代码,结构不能变更!其中类选择器infiniteCarousel控制滚动框的大小,网页源码中它的子元素会多出2行a标签代码,分别代表向左滚动和向右滚动。
<a class="arrow back" href="#"><</a>
<a class="arrow forward" href="#">></a>

织梦图片滚动代码关联的CSS代码模板Templets目录下default/style/dedecms.css
.infiniteCarousel{
width:600px;//宽度可以根据需求进行变更,但要兼顾Js代码
height:200px;
border:3px solid #999;
}
.infiniteCarousel .wrapper{
width:600px;
}
li{
float:left;
}

pic_scroll 图片滚动Js代码的部分说明:

//获取元素,计算单次显示的个数
var $wrapper = $('> div', this).css('overflow', 'hidden'),
                $slider = $wrapper.find('> ul').width(5000),
                $items = $slider.find('> li'),
                $single = $items.filter(':first'),

                singleWidth = $single.outerWidth(),
                visible = Math.floor($wrapper.innerWidth() / singleWidth),
                currentPage = 1,
                pages = Math.ceil($items.length / visible);

//当li元素,除以单次显示个数余数不等于0时,插入li元素
if ($items.length % visible != 0) {
                // pad
                $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
                $items = $slider.find('> li');
            }


点击阅读更多内容!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

手机版|小黑屋|我爱自学 ( 蜀ICP备19015358号-3 )

GMT+8, 2024-3-29 20:36 , Processed in 0.057538 second(s), 27 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

本站大部分教程是网站原创教程,一部分教程为我爱自学(http://www.5izixue.com)编辑收集整理。

如果您需要转载我爱自学网站教程,请注明“资料来源:我爱自学(5izixue)”字样并注明本站网址。

编辑收集整理的教程版权归原作者所有,本站只提供网友交流学习使用,请勿用于商业用途,如果该文章有任何侵犯您权益的地方,请联系我们(569705694@qq.com),我们将在第一时间进行处理!谢谢您的支持!

快速回复 返回顶部 返回列表