用户信息
帖子内容
1 楼
shadoweb
钻石会员
积分 1590
注册 2014-11-27
     
asp版添加js幻灯片功能

1.幻灯片功能幻灯片功能分两种

1.1文章幻灯片功能

1.1.1定位到:后台>系统管理>模板管理>调用模板,添加节点

name:slide_focus_news

tpl_default: 

{$}{$$}

<li><a href="{$baseurl}redir.asp?id={$id}" target="_blank"><img src="{$baseurl}{$=split('{$content_images_list}', '|')(0)}" alt="{$topic}" /></a></li>

{$$}{$} 

1.1.2定位到:后台>系统管理>模板管理>首页模板,添加节点

name:focus_news

tpl_default:

<div class="focus_news" id="focus_news">

    <ul>{$=get_lrstr(itransfer('top', 'slide_focus_news', 'topx=5;tnum=40;genre=news;osql= and n_content_images_list <> """"'), '|', 'leftr')}

  </ul>

</div>

1.1.3在首页模板中调用代码:

{$=ireplace('module.focus_news', 'tpl')}

1.1.4 定位到:后台>系统管理>模板管理>头尾模板

找到节点 default_head

在</head>前添加以下代码

<style type="text/css">

/* 仿QQ商城点击左右滚动jquery焦点图特效插件 */

.focus_news {width:200px;height:200px; overflow:hidden; position:relative;}

.focus_news ul {position:absolute;}

.focus_news ul li {float:left; width:200px;height:200px; overflow:hidden; position:relative; background-color: rgba(0,0,0,.05);/*background: url(/common/images/fuwu/bx1.png) repeat-x left 0px; */}

.focus_news ul li a img{width:200px;height:200px;}

.focus_news ul li div {position:absolute; overflow:hidden;}

.focus_news .btnBg {position:absolute;width:200px;height:20px; left:0; bottom:0; background:#000;color:#000; display:none;}

.focus_news .btn {position:absolute; width:200px; height:23px; padding:0px 10px 0px 10px; right:0; bottom:6px; text-align:center;}

.focus_news .btn span {display:inline-block; _display:inline; _zoom:1; width:15px; height:15px; line-height:15px; text-align:center; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;color:#000;}

.focus_news .btn span.on {background:#fff;color:#f00;}

.focus_news .preNext {width:45px; height:100px; position:absolute; top:110px; /*background:url({$global.images}theme/{$=nskin}/sprite.png) no-repeat 0 0;*/ cursor:pointer;}

.focus_news .pre {left:0;}

.focus_news .next {right:0; background-position:right top;}

</style>

<script type="text/javascript" src="{$global.images}theme/{$=nskin}/js/jquery.min.js"></script>

<script type="text/javascript" src="{$global.images}theme/{$=nskin}/js/focus.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $.focus("#focus_news");

});

</script>

1.1.5 本地新建redir.asp文件,添加以下代码

<%

response.redirect "./?type=detail&id=" & request("id")

%>

保存,上传到news目录中

1.1.6下载js文件和图片并上传

下载地址:

http://www.shadoweb.cn/common/images/theme/default/js/jquery.min.js

http://www.shadoweb.cn/common/images/theme/default/js/focus.js

http://www.shadoweb.cn/common/images/theme/default/sprite.png

上传位置:

common/images/theme/default/js/    如果没有js文件夹,自己添加哈!

1.1.7 记得添加文章时,上传图片,这样清除缓存就可以看到幻灯片了。

本例是以news模块进行添加幻灯片功能,如果是用文章,对应的修改就可以了。

用js主要是避免flash幻灯片不适用性,现在都h5时代了,同时flash也影响网站,万一有访客没装,那就会显示一个空白,多不好。

 1.2网站大图幻灯片功能

1.2.1复制一个图片链接模块,修改模块文件夹名slide。上传到原位置。

如果想简单些就修改一下模块名和数据库就成。

本例子只分享方法,细节自行处理!

下面的步骤和上面1.1中文章幻灯片的类似,如果上面的弄明白了,下面的可以简单看一下,在这里我把代码全部整理一下吧,给复制党省些事。

1.2.2调用模板添加节点:

slide_focus

{$}{$$}

<li><a href="{$url}" target="_blank"><img src="/support/slide/{$image}" alt="{$topic}" /></a></li>

{$$}{$}

1.2.3首页模板添加节点:

focus

<div class="focus" id="focus">

    <ul>{$=itransfer('all', 'slide_focus', 'topx=5;tnum=30;genre=support/slide')}

  </ul>

</div>

1.2.4首页模板调用代码:

{$=ireplace('module.focus', 'tpl')}

1.2.5头尾模板找到节点 default_head

在</head>前添加以下代码 

<style type="text/css">

/* 仿QQ商城点击左右滚动jquery焦点图特效插件 */

.focus {width:100%;height:318px; overflow:hidden; position:relative;}

.focus ul {position:absolute;}

.focus ul li {float:left; width:100%;height:318px; overflow:hidden; position:relative; background-color: rgba(0,0,0,.05);/*background: url(/common/images/fuwu/bx1.png) repeat-x left 0px; */}

.focus ul li a img{width:100%;max-width:980px;height:auto;min-height:318px;}

.focus ul li div {position:absolute; overflow:hidden;}

.focus .btnBg {position:absolute;width:100%;height:20px; left:0; bottom:0; background:#000;color:#000; display:none;}

.focus .btn {position:absolute; width:100%; height:23px; padding:0px 10px 0px 10px; right:0; bottom:6px; text-align:center;}

.focus .btn span {display:inline-block; _display:inline; _zoom:1; width:50px; height:10px; line-height:24px; text-align:center; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;color:#fff;overflow: hidden;}

.focus .btn span.on {background:#fff;color:#fff;}

.focus .preNext {width:45px; height:100px; position:absolute; top:110px; background:url({$global.images}theme/{$=nskin}/sprite.png) no-repeat 0 0; cursor:pointer;}

.focus .pre {left:0;}

.focus .next {right:0; background-position:right top;}

</style>

<script type="text/javascript" src="{$global.images}theme/{$=nskin}/js/jquery.min.js"></script>

<script type="text/javascript" src="{$global.images}theme/{$=nskin}/js/focus.js"></script>

<script type="text/javascript"> $(document).ready(function(){   $.focus("#focus");//这个是本例中的大图幻灯ID   $.focus("#focus_news");//这个是1.1中的文章幻灯ID,如果只调用本例可以删除此行 });  </script>

请注意蓝色代码,调用两个的情况。

js文件和1.1中的一样,请自行下载和上传。

1.2.5后台定位到:公共管理>幻灯片管理,添加图片就可以了,注意图片的尺寸。

关于CSS和JS的细节本例就不详细说明了。

添加后,清除缓存,前台就能看到效果。

本帖由 shadoweb 于 2016-06-25 07:33:55 编辑过
2016-06-25 07:32:11 承接JTBC建站,功能开发,技术支持 QQ 925474725
2 楼
ryu8023
注册会员
积分 280
注册 2009-08-10
     
回复: asp版添加js幻灯片功能

http://www.shadoweb.cn/common/images/theme/default/js/jquery.min.js

http://www.shadoweb.cn/common/images/theme/default/js/focus.js

http://www.shadoweb.cn/common/images/theme/default/sprite.png

楼主这些【下载】都失效了。

2019-09-17 20:17:50
3 楼
shadoweb
钻石会员
积分 1590
注册 2014-11-27
     
回复: asp版添加js幻灯片功能

重新打包了这三个文件

下载地址

https://72k.us/file/16922972-403042606

2019-10-18 10:08:37 承接JTBC建站,功能开发,技术支持 QQ 925474725