• 懒鸟飞:精品网站源码、帝国cms模板专业分享平台

网页制作常用幻灯片集合

    网站制作时,有时需要很多样式多变的幻灯片,高手可以自己写,而懒人菜鸟们,可以直接用网上别人的代码,这里懒鸟飞分享一下平时积累的幻灯片代码,供大家学习使用。

一、左右移动幻灯片

这个幻灯片也是懒鸟飞现在正在用的幻灯片,如下图:

这个幻灯片是左右移动的,特点是,本幻灯片是jquery代码,所以在手机上也可以照常显示。下面是使用方法:

      最近建站时发现一个问题,手机网站已经成为大趋势,所以在做pc站时也要考虑是否兼容手机终端。以前用织梦建站时,用到幻灯片的地方就用织梦默认的幻灯片js代码,很方便,但最近发现用手机访问时,织梦的默认幻灯片代码不能显示。
      而手机显示jquery幻灯片,在网上找了一些后,找了一个比较通用的jquery幻灯片代码。在这里分享给大家。

jquery幻灯片代码下载:http://yunpan.cn/cfkwCEbI9krvV  提取码 5635

代码使用方法:
1、在<head>标签中添加下面代码:
<!--新jquery幻灯片-->
<script src="{dede:global.cfg_templets_skin/}/js/jquery-1.4a2.min.js" type="text/javascript"></script>
<script src="{dede:global.cfg_templets_skin/}/js/jquery.KinSlideshow-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#KinSlideshow").KinSlideshow();
})
</script>
<style type="text/css">
 
#KinSlideshow{
visibility:hidden;
margin:0px auto 0px auto;}
 
</style>
<!--/新jquery幻灯片-->

2、在织梦模板幻灯片位置添加下面代码:
<!--新jquery幻灯片-->
<div id="KinSlideshow" >
        <a href="" target="_blank"><img src="{dede:global.cfg_templets_skin/}/images/banner1.jpg" alt="" width="1000" height="360"  /></a>
        <a href="" target="_blank"><img src="{dede:global.cfg_templets_skin/}/images/banner2.jpg" alt=""  width="1000" height="360"/></a>
        <a href="" target="_blank"><img src="{dede:global.cfg_templets_skin/}/images/banner3.jpg" alt="" width="1000" height="360" /></a>
       
    </div>
 
<!--/新jquery幻灯片-->

注意:幻灯片宽高,可以通过调整上面的图片宽高来控制。

在模板中,也可以用织梦的文章列表标签调用上面的代码,调用方法如下:
<!--新jquery幻灯片-->
<div id="KinSlideshow" >
{dede:arclist row='5' flag ='f' typeid='' }
        <a href="[field:arcurl/]" target="_blank"><img src="[field:picname/]" alt="[field:title/]" width="1000" height="360"  /></a>
{/dede:arclist}
    </div>
<!--/新jquery幻灯片-->

备注:typeid='' 用来指定调用文章列表的栏目id。


3、把下载的代码中的jquery-1.4a2.min.js和jquery.KinSlideshow-1.2.1.min.js放到模板的js文件夹中。

4、在模板的images文件夹中,添加幻灯片中调用的图片。

这样就完成了幻灯片的调用,用手机访问一下,也可以正常显示。

新手站长朋友在给网站添加幻灯片时,尽量用jquery幻灯片。

 

二、左右控制图片滚动的幻灯片

示意图如下:

本幻灯片,点击两侧的按钮,图片滚动,突出中间的图片。
幻灯片二下载地址:http://yunpan.cn/QIaTi32Rb8RuF

三、左右平行滚动的幻灯片

示意图如下:

幻灯片三下载地址:http://yunpan.cn/QI7UAZM9DtNKB

 
QQ在线咨询
QQ客服
淘宝官网