首页
所有分类
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代码优化 选择符篇
Nov 01 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
全面解析Bootstrap排版使用方法（标题）
Nov 30 Javascript
js实现拖拽效果（构造函数）
Dec 14 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
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) key(1) html标准库(1) 遍历文件夹(1) python-pcl(1) pycryto(1) Anaconda(2) 数据加密(1) 历史记录(1) 公共键(1)
You might like
关于我转生变成史莱姆这档事：第二季PV上线，萌王2021年回归
2020/05/06 日漫
浅谈PHP接收POST数据方式
2015/06/05 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
给Python入门者的一些编程建议
2015/06/15 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Python 项目转化为so文件实例
2019/12/23 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
全球最大的生存食品、水和装备专用在线市场：BePrepared.com
2020/01/02 全球购物
皮肤科医师岗位职责
2013/12/04 职场文书
实习教师自我鉴定
2013/12/09 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
会计岗位描述
2014/02/22 职场文书
保证书格式范文
2014/04/28 职场文书
服务行业演讲稿
2014/09/02 职场文书
工作会议通知
2015/04/15 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js