首页>>焦点图>>自适应图片宽度的jQuery焦点幻灯轮播代码(2013-10-26)

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

 注意要1.7.2版本的jq才支持点击后显示点击的图片，不然就是一直顺序播放

自适应图片宽度的jQuery焦点幻灯轮播代码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 
XML/HTML Code
  1. <div id="slide_box">  
  2.   <!-- 幻灯片图片 -->  
  3.   <ul class="slide_img">  
  4.     <li><a href=""><img src="1.jpg" width="800" height="450" alt=""></a></li>  
  5.     <li><a href=""><img src="2.jpg" width="735" height="450" alt=""></a></li>  
  6.     <li><a href=""><img src="3.jpg" width="371" height="450" alt=""></a></li>  
  7.     <li><a href=""><img src="4.jpg" width="700" height="450" alt=""></a></li>  
  8.     <li><a href=""><img src="5.jpg" width="650" height="450" alt=""></a></li>  
  9.     <li><a href=""><img src="6.jpg" width="670" height="450" alt=""></a></li>  
  10.     <li><a href=""><img src="7.jpg" width="575" height="450" alt=""></a></li>  
  11.   </ul>  
  12.   <!-- 幻灯片序列号 -->  
  13.   <div id="slide_order"></div>  
  14.   <div style="clear:both;"></div>  
  15. </div>  
 
JavaScript Code
  1. /** 
  2.  * JS文件 
  3.  */  
  4. // 在Chrome测试时一直无法支持jQuery的 $(function(){}) 和 $(document).ready(),所以改用原生window.onload;  
  5. window.onload = function (){  
  6.     /** 
  7.      * box      幻灯片外框(div) 
  8.      * uls      幻灯片图片外框(ul) 
  9.      * order    图片序列号外框(div) 
  10.      * lis      图片外框(li) 
  11.      * wdiths   图片集的总宽度 
  12.      * runtime  定时器自行时间(毫秒) 
  13.      * latency  定时器延迟时间(毫秒) 
  14.      * control  控制器，控制定时器的执行 
  15.      * num      当前li标签在兄弟集合中的位置 
  16.      * winW     浏览器可视区域宽度 
  17.      */  
  18.     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();  
  19.     // 计算li标签宽度总和与插入img序号  
  20.     for (var i = 0; i < lis.length; i++) {  
  21.         widths += lis.eq(i).width();  
  22.         order.append('<a href="javascript:vide(0)">'+(i+1)+'</a>');  
  23.     };  
  24.     // 设置ul的宽度等于所有li标签宽度的总和；  
  25.     uls.width(widths);  
  26.     // 设置box位置居中  
  27.     box.css({left : (winW - box.width())/2});  
  28.     // 给第一个序号'1'添加class  
  29.     order.find('a').removeClass('current').eq(num).addClass('current');  
  30.     //规定时间后执行函数  
  31.     control = setTimeout( slide, latency );  
  32.     // 幻灯片自动运行函数  
  33.     function slide () {  
  34.         // 初始化width  
  35.         var width = 0;  
  36.         num = num < lis.length - 1 ? (num + 1) : 0;  
  37.         // box旧的宽度  
  38.         var old_box_width = box.width();  
  39.         // box新的宽度  
  40.         var lis_now_width = lis.eq(num).width();  
  41.         // 改变box的宽度 = 当前图片的宽度 和 left值  
  42.         box.animate({width : lis_now_width,left : (winW - lis_now_width)/2},runtime);  
  43.         // 计算第一张图到当前图片的宽度总和  
  44.         for (var j = 0; j < num; j++) {  
  45.             width += lis.eq(j).width();  
  46.         };  
  47.         // 设置当前的序号添加class  
  48.         order.find('a').removeClass('current').eq(num).addClass('current');  
  49.         // 改变ul的left值  
  50.         uls.animate({left: 0 - width}, runtime, function () {  
  51.             control = setTimeout( slide, latency );  
  52.         });  
  53.     }  
  54.     // 点击图片序号函数  
  55.     $('a',order).live({  
  56.         click: function () {  
  57.             // 立即停止uls当前正在执行的动作  
  58.             uls.stop();  
  59.             //清除定时器  
  60.             clearTimeout(control);  
  61.             num = $(this).index() - 1;  
  62.             slide();  
  63.         }  
  64.     });  
  65. };  
  66.  

 


原文地址:http://www.freejs.net/article_jiaodiantu_72.html