IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

自适应图片宽度的jQuery焦点幻灯轮播代码

作者:piperzero  发布日期:2013-10-31 20:45:37
  • 收藏本文    我要投稿
  • 自适应图片宽度的jQuery焦点幻灯轮播代码
     注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放

     

    \
     
    <div id="slide_box">  
      <!-- 幻灯片图片 -->  
      <ul class="slide_img">  
        <li><a href=""><img src="1.jpg" width="800" height="450" alt=""></a></li>  
        <li><a href=""><img src="2.jpg" width="735" height="450" alt=""></a></li>  
        <li><a href=""><img src="3.jpg" width="371" height="450" alt=""></a></li>  
        <li><a href=""><img src="4.jpg" width="700" height="450" alt=""></a></li>  
        <li><a href=""><img src="5.jpg" width="650" height="450" alt=""></a></li>  
        <li><a href=""><img src="6.jpg" width="670" height="450" alt=""></a></li>  
        <li><a href=""><img src="7.jpg" width="575" height="450" alt=""></a></li>  
      </ul>  
      <!-- 幻灯片序列号 -->  
      <div id="slide_order"></div>  
      <div style="clear:both;"></div>  
    </div>  
    
    /** 
     * JS文件 
     */  
    // 在Chrome测试时一直无法支持jQuery的 $(function(){}) 和 $(document).ready(),所以改用原生window.onload;  
    window.onload = function (){  
        /** 
         * box      幻灯片外框(div) 
         * uls      幻灯片图片外框(ul) 
         * order    图片序列号外框(div) 
         * lis      图片外框(li) 
         * wdiths   图片集的总宽度 
         * runtime  定时器自行时间(毫秒) 
         * latency  定时器延迟时间(毫秒) 
         * control  控制器,控制定时器的执行 
         * num      当前li标签在兄弟集合中的位置 
         * winW     浏览器可视区域宽度 
         */  
        var box = $('#slide_box'),uls = $('ul.slide_img'),order = $('#slide_order',box),lis = $('li',uls),widths = 0,runtime = 600,latency = 2000,control,num = 0,winW = $(window).width();  
        // 计算li标签宽度总和与插入img序号  
        for (var i = 0; i < lis.length; i++) {  
            widths += lis.eq(i).width();  
            order.append('<a href="javascript:vide(0)">'+(i+1)+'</a>');  
        };  
        // 设置ul的宽度等于所有li标签宽度的总和;  
        uls.width(widths);  
        // 设置box位置居中  
        box.css({left : (winW - box.width())/2});  
        // 给第一个序号'1'添加class  
        order.find('a').removeClass('current').eq(num).addClass('current');  
        //规定时间后执行函数  
        control = setTimeout( slide, latency );  
        // 幻灯片自动运行函数  
        function slide () {  
            // 初始化width  
            var width = 0;  
            num = num < lis.length - 1 ? (num + 1) : 0;  
            // box旧的宽度  
            var old_box_width = box.width();  
            // box新的宽度  
            var lis_now_width = lis.eq(num).width();  
            // 改变box的宽度 = 当前图片的宽度 和 left值  
            box.animate({width : lis_now_width,left : (winW - lis_now_width)/2},runtime);  
            // 计算第一张图到当前图片的宽度总和  
            for (var j = 0; j < num; j++) {  
                width += lis.eq(j).width();  
            };  
            // 设置当前的序号添加class  
            order.find('a').removeClass('current').eq(num).addClass('current');  
            // 改变ul的left值  
            uls.animate({left: 0 - width}, runtime, function () {  
                control = setTimeout( slide, latency );  
            });  
        }  
        // 点击图片序号函数  
        $('a',order).live({  
            click: function () {  
                // 立即停止uls当前正在执行的动作  
                uls.stop();  
                //清除定时器  
                clearTimeout(control);  
                num = $(this).index() - 1;  
                slide();  
            }  
        });  
    };  
     
    

     

Tag标签:焦点  幻灯  轮播  
  • 专题推荐