Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效


Posted in Javascript onMarch 06, 2015

一个仿腾讯娱乐频道焦点图轮播的插件

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仿腾讯娱乐频道焦点图特效的全部内容,希望大家能够喜欢。

Javascript 相关文章推荐
javascript中获取下个月一号,是星期几
Jun 01 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
Javascript实现基本运算器
Jul 15 Javascript
js仿微信抢红包功能
Sep 25 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
PHP守护进程实例
Mar 06 #Javascript
JavaScript操作Oracle数据库示例
Mar 06 #Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 #Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 #Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 #Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 #Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 #Javascript
You might like
php图片验证码代码
2008/03/27 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
php数据访问之增删改查操作
2016/05/09 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
中专生自荐信
2013/10/12 职场文书
宿舍使用违章电器检讨书
2014/01/12 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
2014年体育部工作总结
2014/11/13 职场文书
事业单位年度考核评语
2014/12/31 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
水知道答案观后感
2015/06/08 职场文书
我在伊朗长大观后感
2015/06/16 职场文书