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

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

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

演示

 

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. };

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