感谢 留痕 网友提交的bug,bug主要原因是我忽视了多个广告轮播和样式重名的问题;经简单的修改已经修复该问题。谢谢 留痕 网友。
==============华丽的分割线================
广告轮播,焦点图效果反反复复写了好几个插件,https://www.html.cn/?s=%E5%B9%BF%E5%91%8A%E8%BD%AE%E6%92%AD,https://www.html.cn/archives/2455
这次这个插件主要解决了两个问题:
1.当焦点图只有一张的时候不滚动;
2.当鼠标经过右下角图片选择的控制点上加了延时,避免在用户不经意划过这些控制点的时候切换图片。
具体插件代码:
[code=”javascript”]
/**
* @author
* User: feiwen
* Date: 11-7-11
* Time: 下午4:30
* Settings:{
* speed:滚动速度
* timer:滚动的时间间隔
* }
*/
(function($) {
$.fn.slideImg = function(settings) {
settings = jQuery.extend({
speed: “normal”,
timer: 1000
}, settings);
return this.each(function() {
$.fn.slideImg.scllor($(this), settings);
});
};
$.fn.slideImg.scllor = function($this, settings) {
var index = 0;
var scllorer=$(“.img-box li”,$this);
var size=scllorer.size();
var slideH=scllorer.outerHeight();
var $selItem=$(“
“,{
“class”:”flash_item”,
html:function(){
var $selItemHTML=””;
if(size==1){
return;
}else if(size>1){
for(var i=0;i
‘;
}
return $selItemHTML;
}
}
}).appendTo($this);
var li = $(“.flash_item li”,$this);
var showBox = $(“.img-box”,$this);
var intervalTime=null;
li.hover(function() {
var that=this;
if (intervalTime) {
clearInterval(intervalTime);
}
intervalTime = setTimeout(function() {
index = li.index(that);
ShowAD(index);
}, 200);
}, function() {
clearInterval(intervalTime);
interval();
});
showBox.hover(function() {
if (intervalTime) {
clearInterval(intervalTime);
}
}, function() {
clearInterval(intervalTime);
interval();
});
function interval(){
intervalTime = setInterval(function() {
ShowAD(index);
index++;
if (index == size) {
index = 0;
}
}, settings.timer);
}
interval();
var ShowAD = function(i) {
showBox.animate({ “top”: -i * slideH }, settings.speed);
li.eq(i).addClass(“on”).siblings().removeClass(“on”);
};
};
})(jQuery);
[/code]
demo演示地址:https://www.html.cn/demo/slide1/
这个效果很好 学习了
楼主,如果一个页面上存在2个甚至多个幻灯片的时候,应该如何去做?
命名新的ID然后按照现在这样使用吗?貌似不行
@留痕, 感谢 您 提交的bug,bug主要原因是我忽视了多个广告轮播和样式重名的问题;经简单的修改已经修复该问题。谢谢 您。
像淘宝首页那种从最后一张图回到第一张图很连贯的效果 不知道是怎么做的
楼上的,淘宝的和这个的原理不太一样
按你所说,淘宝的应该是每次都做一次dom操作,把firstChild删除并移动到末尾
楼主,之前做的几个效果仿佛也存在这样的问题,就是不能够在一个页面上多次使用一个效果。
@留痕, https://www.html.cn/archives/2455这里的文本滚动效果,就是把firstChild删除并移动到末尾,条数多的话其实就是耗一点cpu
加点注解就好了。
不兼容谷歌浏览器的!!!
ie6 和 ie7 图片显示不完整,上面截了一块
如果要向左滚动,是不是从showBox.animate({ “top”: -i * slideH }, settings.speed);中的TOP改为LEFT,我改了,但向左时,不能一屏过去的,只是过去三分之二,请问是不是还要改CSS部分?