【jQuery插件】slideImg-广告轮播,焦点图效果

感谢 留痕 网友提交的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‘+(i+1)+”:$selItemHTML+=’

  • ‘+(i+1)+’
  • ‘;
    }
    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/

    赞(0) 打赏
    未经允许不得转载:WEB前端开发 » 【jQuery插件】slideImg-广告轮播,焦点图效果

    评论 13

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    1. #-49

      这个效果很好 学习了

      iSayme8年前 (2011-07-11)回复
    2. #-48

      楼主,如果一个页面上存在2个甚至多个幻灯片的时候,应该如何去做?

      命名新的ID然后按照现在这样使用吗?貌似不行

      留痕8年前 (2011-07-12)回复
      • @留痕, 感谢 您 提交的bug,bug主要原因是我忽视了多个广告轮播和样式重名的问题;经简单的修改已经修复该问题。谢谢 您。

        8年前 (2011-07-12)回复
    3. #-47

      像淘宝首页那种从最后一张图回到第一张图很连贯的效果 不知道是怎么做的

      jefferydu8年前 (2011-07-12)回复
    4. #-46

      楼上的,淘宝的和这个的原理不太一样

      按你所说,淘宝的应该是每次都做一次dom操作,把firstChild删除并移动到末尾

      留痕8年前 (2011-07-13)回复
    5. #-45

      楼主,之前做的几个效果仿佛也存在这样的问题,就是不能够在一个页面上多次使用一个效果。

      留痕8年前 (2011-07-13)回复
    6. #-44

      加点注解就好了。

      7年前 (2011-10-11)回复
    7. #-43

      不兼容谷歌浏览器的!!!

      7年前 (2011-10-29)回复
    8. #-42

      ie6 和 ie7 图片显示不完整,上面截了一块

      韩万里7年前 (2011-11-09)回复
    9. #-41

      如果要向左滚动,是不是从showBox.animate({ “top”: -i * slideH }, settings.speed);中的TOP改为LEFT,我改了,但向左时,不能一屏过去的,只是过去三分之二,请问是不是还要改CSS部分?

      扬眉7年前 (2012-02-03)回复

    前端开发相关广告投放 更专业 更精准

    联系我们

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信扫一扫打赏