焦点幻灯实现的几种方法整理

用于收藏精华贴子、网友共享的资料等。可以回复,不能发新贴。

版主: Jack

版面规则
本版面不能发新贴,可以回复

焦点幻灯实现的几种方法整理

帖子kira » 2010-09-14 15:08

默认的Zencart没有焦点幻灯功能
需要自己添加 社区里以经提供几种实现方式
像 这位朋友提供 的 Flash+XML 形式的

topic85544.html

和 J老大 提供的 Flash+JS 形式的

topic10687.html

这里再提供两种 JS 实现的方式 来凑个全家福儿吧

第一种 纯JS脚本 实现的 幻灯效果 具体的配置参数 见代码中的注释说明
(这段脚本本来是从百度联盟上扒下来的 个人感觉效果挺不错 实现代码相对又简洁 只是这小家子气的百度 不知是不是因为扒了他的代码 现在具然又换成 Flash幻灯了 所以 演示也就没了 自己保存下 看效果吧 :mrgreen: :mrgreen: :mrgreen: )

代码: 全选
<script>
var links = new Array();                    //修改点1: 设置多少个链接 与下面的图片个数对应
links[1] = "http://blog.kpa7.net";  //广告图1 对应的超链接
links[2] = "http://blog.kpa7.net";  //广告图2 对应的超链接
links[3] = "http://blog.kpa7.net";  //广告图3 对应的超链接
links[4] = "http://blog.kpa7.net";  //广告图4 对应的超链接

var imgs = new Array();                                                      //修改点2: 设置图片个数
for(var n = 1; n <= 5; n++) imgs[n] = new Image();
imgs[1].src = "images/AD/FocusAD/focus001.png";  //广告图片1
imgs[2].src = "images/AD/FocusAD/focus002.jpg";  //广告图片2
imgs[3].src = "images/AD/FocusAD/focus003.jpg";  //广告图片3
imgs[4].src = "images/AD/FocusAD/focus004.jpg";  //广告图片4

var tits = new Array();              //修改点3: 设置标题的个数 与上面的图片个数对应 因扒丢了标题样式 所以此处可忽略
tits[1] = "广告图片1 标题";       //图片1 标题
tits[2] = "广告图片2 标题";       //图片2 标题
tits[3] = "广告图片3 标题";       //图片3 标题
tits[4] = "广告图片4 标题";       //图片4 标题

//修改点3: 设置图片显示的高度
var imgwidth = 580;               //图片宽度
var imgheight = 315;              //图片宽度
var str = "<style type='text/css'>";
str += "#imgnv{display:none;position:absolute;bottom:-1px;right:0;height:16px;}#imgnv div{float:left;margin-right:1px;}";
str += "#imgnv div.on,#imgnv div.off{margin-bottom:1px;width:30px;height:15px;line-height:18px!important;line-height:15px;font-size:9px;text-align:center;cursor:pointer;cursor:hand}";
str += "#imgnv div.on{background:#CE0609;color:#FFF;font-weight:bold}";
str += "#imgnv div.off{background:#323232;color:#FFF;text-decoration:none}";
str += "#titnv{margin-top:3px;color:#000;text-align:center;display:none;}";
str += "</style>";
str += "<div style='position:relative'>";
str += "<div><a id='dlink' href='" + links[1] + "' target='_blank'><img id='dimg' src='" + imgs[1].src + "' border='0' width='" + imgwidth + "' height='"+imgheight+"' style='filter:Alpha(opacity=100)' onmouseover='Pause(true)' onmouseout='Pause(false)'></a></div>";

//修改点4:循环添加内层div内容以增加个数 与图片个数对应
str += "<div id='imgnv'><div id='it1' class='on' onmouseover='ImgSwitch(1, true)' onmouseout='Pause(false)'>1</div><div id='it2' class='off' onmouseover='ImgSwitch(2, true)' onmouseout='Pause(false)'>2</div><div id='it3' class='on' onmouseover='ImgSwitch(3, true)' onmouseout='Pause(false)'>3</div><div id='it4' class='off' onmouseover='ImgSwitch(4, true)' onmouseout='Pause(false)'>4</div></div>";
str += "<div id='titnv'><b>" + tits[1] + "</b></div>";
str += "</div>";

document.write(str);
var oi = document.getElementById("dimg");
var pause = false;
var curid = 1;
var lastid = 1;
var sw = 1;
var opacity = 100;
var speed = 15;
var delay = (document.all)? 400:700;
function SetAlpha(){
if(document.all){
if(oi.filters && oi.filters.Alpha) oi.filters.Alpha.opacity = opacity;
}else{
oi.style.MozOpacity = ((opacity >= 100)? 99:opacity) / 100;
}
}
function ImgSwitch(id, p){
if(p){
pause = true;
opacity = 100;
SetAlpha();
}
oi.src = imgs[id].src;
document.getElementById("dlink").href = links[id];
document.getElementById("it" + lastid).className = "off";
document.getElementById("it" + id).className = "on";
document.getElementById("titnv").innerHTML = "<b>" + tits[id] + "</b>";
curid = lastid = id;
}
function ScrollImg(){
if(pause && opacity >= 100) return;
if(sw == 0){
opacity += 2;
if(opacity > delay){ opacity = 100; sw = 1; }
}
if(sw == 1){
opacity -= 3;
if(opacity < 10){ opacity = 10; sw = 3; }
}
SetAlpha();
if(sw != 3) return;
sw = 0;
curid++;

//修改点5:这里的4也是个数 与图片个数对应
if(curid > 4) curid = 1;
ImgSwitch(curid, false);
}
function Pause(s){
pause = s;
}
function StartScroll(){
setInterval(ScrollImg, speed);
}
function CheckLoad(){
if (imgs[1].complete == true && imgs[2].complete == true) {
clearInterval(checkid);
setTimeout(StartScroll, 2000);
}
}
var checkid = setInterval(CheckLoad, 10);
</script>


第二种方法 JQuery 实现焦点幻灯效果
(这个效果 个人感觉倒蛮适合放在 本站首页的吗 :lol: :lol: :lol: 现在这个变换的太快了 太晃眼睛了 J大可以考虑下哦)
废话不多说 直接上码

第一步 在网站头部导入JQ库 这里以Google的JQ库托管为例
代码: 全选
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


第二部 在当前模板全局CSS文件中 加入下面的样式定义 放在最后面就行 省的以后不起来了
高手可以自己更改 选择器
低手可以自己更改样式 但避免出错 最好不要修改 选择器
菜鸟儿吗 就改大小颜色来适应自己的模板需要吧

代码: 全选
/*  自定义焦点容器 样式 大小 随自己的网站整体风格自定义调整  */
.CustomSlide {
    width: 98%;
    height: 252px;
    position:relative;
    left: -5px;
}

/* 幻灯容器 这里的样式 选择器 除高手外不要随便更改 样式随自己的网站风格调整  */
.slides div,ul, ol, li, h1,h2, p{margin:0;padding:0}
.slides div{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑"; line-height:1.2; padding:0 2px 0 0;}
.slides a{color:#047;text-decoration:none}
.slides a:hover{color:#a40000;text-decoration:none}
.slides h1{font-size:1em; font-weight:normal; line-height:1.8em}
.slides h1 a{background:#CFF; padding:2px 3px; text-decoration:none}
.slides h1 a:hover{background:#eee; text-decoration:underline}
.slides h2{font-size:1em; font-weight:normal; color:#a40000; margin:1em auto}
.slides ul,li{list-style:none}

/* 幻灯样式 同上 选择器 不要随便更改 样式 自定义 */
.slides { position:relative; overflow:hidden; width:990px; height:250px; border:3px solid #eee; margin:0; }
.slide-pic{ overflow:hidden;width:990px}
.slide-pic img{ width:988px; height:248px;border:1px solid #E4E4E4}
.slide-pic li { display:none}
.slide-pic li.cur { display:block}
.slide-li { position:absolute; left:0; bottom:0; }
.slide-li li { float:left; width:197px; height:30px; line-height:30px; margin-right:1px; text-align:center}
.slide-li a:visited,.slide-li a:link { display:block; width:196px; height:30px; font-size:14px; color:#FFF}
.slide-li .cur a:visited, .slide-li .cur a:link, .slide-li a:hover { color:#333; text-decoration:none}
.op li { background:#666; opacity: 0.6; filter:alpha(opacity=60)}
.op li.cur { background:#99C914}
.slide-txt span { display:none}


第三步 支持环境 样式都搞定了 现在该主角上场了 掌声呱叽呱叽 :shock: :shock: :shock:
在自己模板想要显示这个幻灯的区域内加入下面的代码 上面的样式中 不建议随便修改选择器 主要原因就是因为下面代码中的样式控制选择器 都对应好了 如果要改就要 对应的全改 不然 显示出乱七八糟的 可没我啥事儿

代码: 全选
<!--*幻灯开始*-->
<div class="CustomSlide">
 <div class="slides" align="center">
  <ul class="slide-pic">
    <li><a href="http://blog.kpa7.net/">
        <img src="images/ad/slides/slide1.jpg" alt="火星花园" /></a></li>
    <li class="cur"><a href="http://blog.kpa7.net/">
        <img src="images/ad/slides/slide2.jpg" alt="火星花园" /></a></li>
    <li><a href="http://blog.kpa7.net/">
        <img src="images/ad/slides/slide3.jpg" alt="火星花园" /></a></li>
        <li><a href="http://blog.kpa7.net/">
        <img src="images/ad/slides/slide4.jpg" alt="火星花园" /></a></li>
    <li><a href="http://blog.kpa7.net/">
        <img src="images/ad/slides/slide5.jpg" alt="火星花园" /></a></li>
  </ul>
  <ul class="slide-li op">
    <li></li>
    <li class="cur"></li>
    <li></li>
    <li></li>
        <li></li>
  </ul>
  <ul class="slide-li slide-txt">
    <li><a href="http://blog.kpa7.net/">标题一</a></li>
    <li class="cur"><a href="http://blog.kpa7.net/">标题二</a></li>
    <li><a href="http://blog.kpa7.net/">标题三</a></li>
    <li><a href="http://blog.kpa7.net/">标题四</a></li>
        <li><a href="http://blog.kpa7.net/">标题五</a></li>
  </ul>
</div>     
</div>
<!--//end--> 

<!-- 如果网站头部没有导入JQ库 也要以在这句注释的位置上导入 但同样要注意JQ多次导入的问题 见下面的说明 -->

<script>
//幻灯渐隐开始
var defaultOpts = {
    interval: 8000,         //当前画面停留时间
    fadeInTime: 1000,  //新画面切入时间
    fadeOutTime: 800  //当前画面离开时间  两张图片过渡时间为 切入和离开的总和
};
//Iterate over the current set of matched elements
var _titles = $("ul.slide-txt li");
var _titles_bg = $("ul.op li");
var _bodies = $("ul.slide-pic li");
var _count = _titles.length;
var _current = 0;
var _intervalID = null;
var stop = function() {
    window.clearInterval(_intervalID);
};
var slide = function(opts) {
    if (opts) {
        _current = opts.current || 0;
    } else {
        _current = (_current >= (_count - 1)) ? 0 : (++_current);
    };
    _bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime,
    function() {
        _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
        _bodies.removeClass("cur").eq(_current).addClass("cur");
    });
    _titles.removeClass("cur").eq(_current).addClass("cur");
    _titles_bg.removeClass("cur").eq(_current).addClass("cur");
}; //endof slide
var go = function() {
    stop();
    _intervalID = window.setInterval(function() {
        slide();
    },
    defaultOpts.interval);
}; //endof go
var itemMouseOver = function(target, items) {
    stop();
    var i = $.inArray(target, items);
    slide({
        current: i
    });
}; //endof itemMouseOver
_titles.hover(function() {
    if ($(this).attr('class') != 'cur') {
        itemMouseOver(this, _titles);
    } else {
        stop();
    }
},
go);
//_titles_bg.hover(function() { itemMouseOver(this, _titles_bg); }, go);
_bodies.hover(stop, go);
//trigger the slidebox
go();
var slideX = {
    _this: $('.catalog .imgbox'),
    _btnLeft: $('.catalog .left'),
    _btnRight: $('.catalog .right'),
    init: function() {
        slideX._btnLeft.click(slideX.slideLeft);
        slideX._btnRight.click(slideX.slideRight);
    },
    slideLeft: function() {
        slideX._btnLeft.unbind('click', slideX.slideLeft);
        for (i = 0; i < 2; i++) {
           slideX._this.find('li:last').prependTo(slideX._this);
       }
       slideX._this.css('marginLeft', -224);
       slideX._this.animate({
           'marginLeft': 0
       },
       500,
       function() {
           slideX._btnLeft.bind('click', slideX.slideLeft);
       });
       return false;
   },
   slideRight: function() {
       slideX._btnRight.unbind('click', slideX.slideRight);
       slideX._this.animate({
           'marginLeft': -224
       },
       500,
       function() {
           slideX._this.css('marginLeft', '0');
           for (i = 0; i < 2; i++) {
               slideX._this.find('li:first').appendTo(slideX._this)
           }
           slideX._btnRight.bind('click', slideX.slideRight);
       });
       return false;
   }
}
$(document).ready(function() {
   slideX.init();
})
$(document).ready(function() {
   var newTime = new Date();
   var newTime = newTime.getTime();
   var $imgTmp = $('#topromotion').find('img:first');
   var osrc = $imgTmp.attr('src');
   $imgTmp.attr('src', osrc + '?' + newTime);
});
</script>


使用JQ幻灯的同学 需要注意 一点

如果使用JQZOOM或JQLightbox模块或其他引用了JQ库的 要注意下 被多次导入的问题
这个于实际中没什么影响 但多次导入JQ这个说大不大说小不小的东西 会对网站的打开速度有影响

对于JQZoom 和JQLightbox 的解决方法是 进入当前模板目录下的 auto_loaders 文件夹下
把 loader_jqzoom.php loader_lightbox.php 和 loader_sample.php.sample 这三个文件中的

代码: 全选
'jquery/jquery-1.3.2.min.js'       => 1,


这句删除掉 可能有的同学 这里 的JQ库版不一样 有的是 1.2.6 有的是 1.4.2的 这都无所谓 删掉就是
怕有闪失 可以先备份一下 再修改

这样 基本上目前 实现焦点幻灯的这几种方法 就全乎儿了
其实这玩意儿可有可无 网上资源也多的是 全在于一个灵活运用
可以当焦点用 也可以当广告用 东西是死的 用法是活的 全在于你怎么去掌握
头像
kira
VIP会员
VIP会员
 
帖子: 1398
注册: 2010-03-06 11:38
QQ 帐号: 6171718

Re: 焦点幻灯实现的几种方法整理

帖子kira » 2010-09-14 15:10

至于 放置的位置吗 哪就随便了 可以利用Zencart的广告位 实现 也可以在后台的 页面编辑中 添加上
或者干脆直接改模板文件 放在自己任为合适的位置上 全在你的想像力

效果展示
Slide Demo.zip
(704.66 KiB) 被下载 1199 次
头像
kira
VIP会员
VIP会员
 
帖子: 1398
注册: 2010-03-06 11:38
QQ 帐号: 6171718

Re: 焦点幻灯实现的几种方法整理

帖子zyzlee » 2010-11-05 23:48

第四种方法我发现删掉那行代码还是用阵列方式排列呢。?
zyzlee
新手上路
新手上路
 
帖子: 19
注册: 2010-07-08 14:03
QQ 帐号: 53584321

Re: 焦点幻灯实现的几种方法整理

帖子agogo_2009 » 2010-11-12 15:25

还没用过,过几天新站试下!!!
agogo_2009
中级会员
中级会员
 
帖子: 68
注册: 2010-09-29 6:59
地址: http://www.uggbootss.ca
QQ 帐号: 604443273

Re: 焦点幻灯实现的几种方法整理

帖子a14114792 » 2011-02-24 0:53

有用
a14114792
中级会员
中级会员
 
帖子: 81
注册: 2010-10-28 17:46
QQ 帐号: 14828959

Re: 焦点幻灯实现的几种方法整理

帖子yahui870718 » 2011-03-20 12:26

收藏了,谢谢!
yahui870718
普通会员
普通会员
 
帖子: 49
注册: 2011-03-15 22:16
QQ 帐号: 493908654

Re: 焦点幻灯实现的几种方法整理

帖子ldcr138 » 2011-04-10 14:37

幻灯 我一直没有找到理想的方案
ldcr138
中级会员
中级会员
 
帖子: 56
注册: 2009-09-07 15:06

Re: 焦点幻灯实现的几种方法整理

帖子xiao_min » 2011-04-14 11:06

这个好.
头像
xiao_min
VIP会员
VIP会员
 
帖子: 355
注册: 2010-06-08 11:17

Re: 焦点幻灯实现的几种方法整理

帖子kawi505 » 2011-05-27 22:20

第一種方法成功在首頁加了入
但請問圖片能否改成橫向滑動形式?
謝謝!
kawi505
普通会员
普通会员
 
帖子: 22
注册: 2011-05-27 17:22

Re: 焦点幻灯实现的几种方法整理

帖子yhd6381 » 2011-06-28 23:01

太好了
yhd6381
高级会员
高级会员
 
帖子: 133
注册: 2011-02-14 14:43

下一页

  • 相关话题
    回复总数
    阅读次数
    最新文章

回到 精华共享



在线用户

正在浏览此版面的用户:没有注册用户 和 1 位游客