首页 / 脚本样式 / JavaScript / Jquery实现仿腾讯娱乐频道焦点图（幻灯片）特效

一个仿腾讯娱乐频道焦点图轮播的插件
ui3g.js
复制代码 代码如下:
/*
顶部大图滚动
*/
var slide = （function（） {
    var quadEaseOut;
    var doc = document;
    var $ = function（s）{
        return document.getElementById（s）;
    }
    /**
     获取索引值，工具类
     @param {Element} current 当前元素
     @param {Object} obj 元素集合
    **/
    var getIndex = function（current, obj） {
        for （var i=0; i<obj.length; i++） {
            if （obj[i] == current） {
                return i;
            }
        }
    };
    /**
     @param {Element} el 目标元素
    **/
    var siblings = function（el） {
        var r = [],
            n = el.parentNode.firstChild;
        for （ ; n; n = n.nextSibling ） {
            if （ n.nodeType === 1 && n ！== el ） {
                r.push（ n ）;
            }
        }
        return r;
    };
    /**
     设置 Slide 宽高
     @param {Element} el Slide 元素
     @param {Number} width Slide 宽度
     @param {Number} height Slide 高度
    **/
    var setSlideWH = function（el, width, height） {
        var styleW,
            styleH;
        if （width == "100%"） {      // 自适应宽度
            styleW = "100%";
        } else {                    // 定宽
            styleW = width + "px";
        }
        if （height == "100%"） {     // 自适应高度
            styleH = "100%";
        } else {                    // 定高
            styleH = height + "px";
        }
        el.style.width = styleW;
        el.style.height = styleH;
    };
    var readStyle = function（obj, name）{
        if（obj.style[name]）{
            return obj.style[name];
        }else if（obj.currentStyle）{
            return obj.currentStyle[name]
        }else if（document.defaultView && document.defaultView.getComputedStyle）{
            var d=document.defaultView.getComputedStyle（obj,null）;
            return d.getPropertyValue（name）
        }else{
            return null
        }
    };
    var style = {
        setOpacity : function（obj,opacity）{
            if（typeof（obj.style.opacity） ！= "undefined"）{
                obj.style.opacity = opacity;
            }else{
                obj.style.filter = "Alpha（Opacity=" + （opacity*100） + "）";
            };
        }
    };
    /* 动画 */
    var extend = {
        /**
         渐显元素
         @param {Element} target 目标元素
        **/
        fadeIn : function（obj,time）{
            if（readStyle（obj, "display"） == "none"）{
                obj.style.display = "block";
            };
            style.setOpacity（obj,0）;
            time = time || 200;
            var opacity = 0,step = time / 20;
            clearTimeout（obj.showT）;
            obj.showT = setTimeout（function（）{
                if（opacity >= 1） { style.setOpacity（obj,1）; return; }
                opacity +=1/step;
                style.setOpacity（obj,opacity）;
                obj.showT = setTimeout（arguments.callee,20）;
            },20）;
        },
        /**
         渐隐元素
         @param {Element} target 目标元素
        **/
        fadeOut : function（obj,time）{
            time = time || 200;
            style.setOpacity（obj,1）;
            var opacity = 1,step = time / 20;
            clearTimeout（obj.showT）;
            obj.showT = setTimeout（function（）{
                if（opacity <= 0）{
                    obj.style.display = "none";
                    style.setOpacity（obj,0）;
                    return;
                };
                opacity -= 1/step;
                obj.showT = setTimeout（arguments.callee,20）;
            },20）;
        },
        /**
         动画元素
         @param {Element} target 目标元素
         @param {String} key target样式
         @param {Number} start key初始值
         @param {Number} end key结束值
         @param {Number} speed 速度
         @param {Function} endFn 结束时的回调
         @param {String} u 样式单位
        **/
        actPX : function（obj,key,start,end,speed,endFn,u）{
          if（typeof（u） == "undefined"）{u = "px"};
          clearTimeout（obj["_extend_actPX" + key.replace（/-.=/,"_"） + "_timeOut"]）;
          if（start > end）{
            speed = - Math.abs（speed）;
          }else{
            speed = Math.abs（speed）;
          };
          var now = start;
          var length = end - start;
          obj["_extend_actPX" + key.replace（/-.=/,"_"） + "_timeOut"] = setTimeout（function（）{
            now += speed;
            var space = end - now;
            if（start < end）{
              if（space < length/3）{
                speed = Math.ceil（space/3）;
              };
              if（space <= 0）{
                obj[key] = end + u;
                if（endFn）{endFn（）};
                return;
              };
            }else{
              if（space > length/3）{
                speed = Math.floor（space/3）;
              };
              if（space >= 0）{
                obj[key] = end + u;
                if（endFn）{endFn（）};
                return;
              };
            };
            obj[key] = now + u;
            obj["_extend_actPX" + key.replace（/-.=/,"_"） + "_timeOut"] = setTimeout（arguments.callee,20）;
          },20）;
        }
    }
    /**
     配置
    **/
    var config = {
        imgData: [],                    // 初使化图片信息
        imgTargetId: "",                // 初使化 Slide 目标 ID
        imgWidth: "100%",               // 初使化图片宽度
        imgHeight: "100%",              // 初使化图片高度
        imgAuto: false,                 // 初使化自动播放
        imgInterval: 3000,              // 初使化间隔时间
        imgDataLen: 0,                  // 初使化图片数量
        goSwitch: true,                 // 鼠标悬停时切换状态
        index: 4,                       // 焦点所在索引值
        _index: 0,
        curImg: 5,
        indexShow : 5
    };
    /**
     生成并插入 Slide 结构
    **/
    var buildSlide = function（） {
        // 注入 Slide 结构
        var panelHtml  = $（"_slide"）.getElementsByTagName（"ul"）[0].innerHTML;
        var aLi = $（"_slide"）.getElementsByTagName（"ul"）[0].getElementsByTagName（"li"）;
        $（"_slide"）.getElementsByTagName（"ul"）[0].innerHTML = panelHtml + panelHtml;
        // 设置宽高
        setSlideWH（$（config.imgTargetId）, config.imgWidth, config.imgHeight）;
        $（"_slide"）.getElementsByTagName（"ul"）[0].style.left = "-" + aLi[0].offsetWidth * 4 + "px";
    };
    quadEaseOut = function （t, b, c, d, s） {
       return -c *（t/=d）*（t-2） + b;
    };
    var move = function（）{
        //var e = this;
        clearTimeout（config.timer）,
        config.t < 50 ? （boxMoveTo（Math.round（quadEaseOut（config.t += 3, config.b, config.c, 50）））, config.timer=setTimeout（function（）{move（）}, 30）） : boxMoveTo（config.target）
    }
    var boxMoveTo = function（e）{
        $（"slide_list"）.style.left = e+"px"
    }
    //var dotNum = 0;
    var d  = false;
    var run = function（e, t）{
        var slideList = $（"slide_list"）.getElementsByTagName（"li"）;
        dotList = $（"focus_dot"）.getElementsByTagName（"li"）;
            slideList[config._index].className = "";
            for（var i=0; i<config.imgData*2; i++）{
                slideList[i].className = "";
                slideList[i].getElementsByTagName（"p"）[0].style.display = "none";
                }
            for（var i=0; i<config.imgData; i++）{
                dotList[i].className = "";
                }
        e = e < 0 ? config.imgData - 1 : e > config.imgData ? 1 : e,
        config.target = -Math.abs（slideList[0].offsetWidth）*（config.index = e）,
        config.t = 0,
        config.b = t ? config.target - slideList[0].offsetWidth : config.target + slideList[0].offsetWidth,
        config.c = config.target - config.b,
        move（）;
        config.curImg = config.index + 1 > 6 ? 1 : （config.index + 1）;
        slideList[config.curImg].className = "cur";
        var dotN = 0;
        if（config.index >= 4）{
            dotN = config.index - 4;
        }else{
            dotN = config.curImg;
        }
        dotList[dotN].className = "current";
        slideList[config.curImg].getElementsByTagName（"p"）[0].style.display = "block";
        config._index = config.curImg;
    }
    /**
     自动切换
    **/
    var b = false, c = false, timerA = null;
    var autoSwitch = function（） {
        var slideList = $（"slide_list"）.getElementsByTagName（"li"）;
        // 遍历触发器
        for （var i=0; i<config.imgDataLen; i++） {
            // 找到当前触发器
            if （slideList[i].className == "cur"） {
                // 获得当前触发器的索引
                config.index = getIndex（slideList[i], slideList）;
            }
        }
        var autoFun = function（） {
            if （config.goSwitch） {
                config.index = config.index == 5 ? 0 : config.index;
                if（！b）{
                    b = true;
                    config.index = 0;
                }
                if（config.index == 3 && ！c）{
                    clearInterval（timerA）;
                    timerA = setInterval（autoFun, 10000）;
                    c = true;
                }else if（c）{
                    c = false;
                    clearInterval（timerA）;
                    timerA = setInterval（autoFun, config.imgInterval）;
                }
                //console.log（config.index）;               
                run（config.index, ！1）;             
                config.index += 1;
            }
        };
        timerA = setInterval（autoFun, config.imgInterval）;
    };
    /**
     手指事件
    **/
    var touchFun = function（evt）{
        var $ = function（o）{ return document.querySelector（o）}, $$ = function（o）{ return document.querySelectorAll（o）}, touchInfo = {startX:0, endX:0}, slide = $（"#slide"）, btnL = $（"#sliderL"）, btnR = $（"#sliderR"）;
        slide.addEventListener（"touchstart", function（evt） {
               evt.preventDefault（）;      
               if（evt.changedTouches.length == 0）  return;
               touchInfo.startX = evt.changedTouches[0].pageX;
        }, false）;
        slide.addEventListener（"touchend", function（evt） {
               evt.preventDefault（）;
               if（evt.changedTouches.length == 0） return;
               touchInfo.endX = evt.changedTouches[0].pageX;
               var offset = touchInfo.endX - touchInfo.startX;
               if（offset < 0） {
                    run（++config.index, ！1）
               } else if（offset > 0） {
                   run（--config.index, ！0）
               }else{
                    if（evt.target.parentNode.parentNode.className == "cur"）{
                        window.open（evt.target.parentNode.getAttribute（"href"）, "_blank"）;
                    }else{
                        return;
                    }
               }
        },false）;
        btnL.addEventListener（"touchend", function（） {run（++config.index, ！1）}, false）
        btnR.addEventListener（"touchend", function（） {run（--config.index, ！0）}, false）
    };
    return {
        init: function（obj, e） {
            // 获取配置信息
            config.imgData = obj.data;                              // 设置图片信息
            config.imgTargetId = obj.targetId;                      // 设置 Slide 目标 ID
            config.imgWidth = obj.width || config.imgWidth;         // 设置图片宽度
            config.imgHeight = obj.height || config.imgHeight;      // 设置图片高度
            config.imgAuto = obj.auto || config.imgAuto;            // 设置自动播放
            config.imgInterval = obj.interval || config.imgInterval;// 设置间隔时间
            //config.imgDataLen = config.imgData.length;                // 设置图片数量
            // 生成 Slide 结构
            buildSlide（）;
            var slideList = $（"slide_list"）.getElementsByTagName（"li"）;
            $（"slide_list"）.style.width = slideList[0].offsetWidth*slideList.length + "px";
            slideList[config.curImg].className = "cur";
            var btnL = $（"sliderL"）, btnR = $（"sliderR"）, btnClose = $（"slidClosed"）;
            btnR.onclick = function（）{ 
                clearInterval（timerA）;
                config.index += 1;
                run（config.index, ！1）
            }
            btnL.onclick = function（）{
                clearInterval（timerA）;
                config.index -= 1;
                run（config.index, ！0）
            }
            $（"slide"）.onmouseover = function（event）{
                config.index = Math.ceil（Math.abs（parseInt（$（"_slide"）.getElementsByTagName（"ul"）[0].style.left）/slideList[0].offsetWidth））;
                clearInterval（timerA）;
                timerA = null;
                event.stopPropagation（）;
            }
            $（"slide"）.onmouseout = function（event）{
                if （config.imgAuto） {
                    autoSwitch（）;
                }
                config.index = config.curImg;
                event.stopPropagation（）;
            }
            if（/ipad;/i.test（navigator.userAgent.toLowerCase（）））{
                touchFun（e）;
            }
            // 自动切换
            if （config.imgAuto） {
                autoSwitch（）;
            }
               dotList = $（"focus_dot"）.getElementsByTagName（"li"）;
                var n;
                for（n = 0; n < dotList.length; n++ ）{
                        dotList[n].index = n;
                        dotList[n].onclick = function（） {  
                            if（config.curImg == this.index || config.curImg == this.index + 5） return;
                            var n = 0;
                            n = config.curImg > 4 ? 0 : config.curImg;
                            if（this.index > n）{
                                run（this.index-1, ！1）;
                            }else{
                                run（this.index-1, ！0）
                            }
                            config.curImg = this.index;
                        }
                }
        }
    }
}）（）;

html
复制代码 代码如下:
<div class="slider-container" id="slide" style="width: 100%; height: 480px;">
  <div id="_slide" class="slider-wrap">
    <ul id="slide_list">
      <li bosszone="Jdt">
        <a href="#" class="pic"> <img src="images/demo1.jpg" width="830" height="350" border="0">
        <p class="st_ty">《北爱》陈思诚激吻佟丽娅 公主抱不慎走光</p>
        </a>
        <div class="slide_Bg"></div>
      </li>
      <li bosszone="Jdt">
        <a href="#" class="pic"> <img src="images/demo2.jpg" width="830" height="350" border="0">
        <p class="st_ty">林志玲捞金鱼尾纹再现 遭男子摸背熊抱尴尬挤笑</p>
        </a>
        <div class="slide_Bg"></div>
      </li>
      <li  bosszone="Jdt">
        <a href="#" class="pic"> <img src="images/demo3.jpg" width="830" height="350" border="0">
        <p class="st_ty">芙蓉姐姐大摆S型秀瘦腰长腿 调戏记者：想追求我？</p>
        </a>
        <div class="slide_Bg"></div>
      </li>
      <li  bosszone="Jdt">
        <a href="#" title="" class="pic"> <img src="images/demo4.jpg" width="830" height="350" border="0">
        <p class="st_ty">柳岩：消费我 你们在我胸前也看不出一朵花来</p>
        </a>
        <div class="slide_Bg"></div>
      </li>
      <li>
        <dl>
          <dd id="ad1"  bosszone="jdtAd1">
            <a href="#" class="pic"> <img src="images/89854294.jpg" width="363" height="350" border="0">
            <p class="st_ty">萌妹教你白全身</p>
            </a> </dd>
          <dd id="ad2"  bosszone="jdtAd2">
            <a href="#" class="pic"> <img src="images/90233983.jpg" width="156" height="350" border="0">
            <p class="st_ty">学我按3穴位变大胸</p>
            </a> </dd>
          <dd id="ad3"  bosszone="jdtAd3">
            <a href="#" class="pic"> <img src="images/89854500.jpg" width="156" height="350" border="0">
            <p class="st_ty">男人更爱“坏”女人</p>
            </a> </dd>
          <dd id="ad4"  bosszone="jdtAd4">
             <a href="#" class="pic"> <img src="images/89858252.jpg" width="156" height="350" border="0">
            <p class="st_ty">女神自曝美胸手法</p>
            </a> </dd>
        </dl>
        <div class="slide_Bg"></div>
      </li>
    </ul>
  </div>
  <a href="javascript:void（0）;" class="slider-btn slider-btn-l" id="sliderL" bosszone="photoPre"></a>
  <a href="javascript:void（0）;" class="slider-btn slider-btn-r" id="sliderR" bosszone="photoNext"></a>
  <ul id="focus_dot">
    <li class="current">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>
<script>
            var $ = function（s）{
                    return document.getElementById（s）;
                }
            //参数配置
            slide.init（{
                //width: 100%,    // 焦点图宽度（非必须，默认值自适应）
                height: 390,   // 焦点图高度（非必须，默认值自适应）
                auto: true,   // 是否自动切换（非必须，默认值 false）
                interval: 5000,   // 切换间隔时间（非必须，默认值 3000，当 auto 为 true 时有效）
                targetId: "slide",  // html 对应的焦点图 ID（必须）
                data: $（"_slide"）.getElementsByTagName（"li"）.length// 焦点图数据（必须）
            }）;
        </script>
<script>window.onerror=function（）{return true;};</script>

以上就是给大家分享的jQuery仿腾讯娱乐频道焦点图特效的全部内容，希望大家能够喜欢。