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

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

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



演示

XML/HTML Code

<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>

JavaScript Code

/**

* 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();

}

});

};

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