首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
angular select 默认值设置方法
Jun 23 Javascript
jsonp跨域请求详解
Jul 13 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
小谈angular ng deploy的实现
Apr 07 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
东方红(1) 海燕B411(1) 1 Tube Radio(1) TECSUN(1) 再生机(1) 德生(17) 修复(2) YB235(1) YB217(1) PL-365(1)
You might like
PHP脚本数据库功能详解（上）
2006/10/09 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
python函数的作用域及关键字详解
2019/08/20 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
python中os.remove()用法及注意事项
2021/01/31 Python
德国最大的设计师鞋网上商店：Budapester
2017/12/07 全球购物
欧洲最大的高尔夫零售商：American Golf
2019/09/02 全球购物
澳大利亚在线床零售商：Bedworks
2020/09/01 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
运动会广播稿200字
2014/01/15 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
Python基于百度API识别并提取图片中文字
2021/06/27 Python