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检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
7个JS基础知识总结
Mar 05 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
单线程JavaScript实现异步过程详解
May 19 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函数eval()介绍和使用示例
2014/08/20 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
Python 命令行参数sys.argv
2008/09/06 Python
Python中的is和id用法分析
2015/01/26 Python
python中尾递归用法实例详解
2015/04/28 Python
Python sys.argv用法实例
2015/05/28 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
军训自我鉴定
2014/01/22 职场文书
业务内勤岗位职责
2014/04/30 职场文书
春季运动会加油词
2015/07/18 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技