需要自己添加 社区里以经提供几种实现方式
像 这位朋友提供 的 Flash+XML 形式的
topic85544.html
和 J老大 提供的 Flash+JS 形式的
topic10687.html
这里再提供两种 JS 实现的方式 来凑个全家福儿吧
第一种 纯JS脚本 实现的 幻灯效果 具体的配置参数 见代码中的注释说明
(这段脚本本来是从百度联盟上扒下来的 个人感觉效果挺不错 实现代码相对又简洁 只是这小家子气的百度 不知是不是因为扒了他的代码 现在具然又换成 Flash幻灯了 所以 演示也就没了 自己保存下 看效果吧
)- 代码: 全选
<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 实现焦点幻灯效果
(这个效果 个人感觉倒蛮适合放在 本站首页的吗
现在这个变换的太快了 太晃眼睛了 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}
第三步 支持环境 样式都搞定了 现在该主角上场了 掌声呱叽呱叽
在自己模板想要显示这个幻灯的区域内加入下面的代码 上面的样式中 不建议随便修改选择器 主要原因就是因为下面代码中的样式控制选择器 都对应好了 如果要改就要 对应的全改 不然 显示出乱七八糟的 可没我啥事儿
- 代码: 全选
<!--*幻灯开始*-->
<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的 这都无所谓 删掉就是
怕有闪失 可以先备份一下 再修改
这样 基本上目前 实现焦点幻灯的这几种方法 就全乎儿了
其实这玩意儿可有可无 网上资源也多的是 全在于一个灵活运用
可以当焦点用 也可以当广告用 东西是死的 用法是活的 全在于你怎么去掌握
News
Site map
SitemapIndex
RSS Feed