网页制作课程设计报告总结(5)

最规范,最全面的的计算机网页制作课程设计报告

Flash—js

//首页焦点图特特效

$(function() {

var sWidth = $(".flash").width(); //获取焦点图的宽度（显示面积）

var len = $(".flash ul li").length; //获取焦点图个数

var index = 0;

var picTimer;

//以下代码添加数字按钮和按钮后的半透明长条

var btn = "<div class='btn'>";

for(var i=0; i < len; i++) {

btn += "<span>" + "</span>";

}

btn += "</div>"

$(".flash").append(btn);

$(".flash .btnBg").css("opacity",0.5);

//为数字按钮添加鼠标滑入事件，以显示相应的内容

$(".flash .btn span").mouseenter(function() {

index = $(".flash .btn span").index(this);

showPics(index);

}).eq(0).trigger("mouseenter");

//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度

$(".flash ul").css("width",sWidth*len);

//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放

$(".flash").hover(function() {

clearInterval(picTimer);

},function() {

picTimer = setInterval(function() {

showPics(index);

index++;

if(index == len) {index = 0;}

},3000); //此3000代表自动播放的间隔，单位：毫秒

}).trigger("mouseleave");

//显示图片函数，根据接收的index值显示相应的内容

function showPics(index) {

var nowLeft = -index*sWidth; //根据index值计算ul元素的position

$(".flash ul").stop(true,false).animate({"left":nowLeft},500); //通过animate()调整ul元素滚动到计算出的position