一个基于jquery的banner轮播

一个banner轮播广告。

JavaScript代码

<script type=
"text/javascript"
 src=
"http://www.dabaii.com/demo/20100907/js/jquery.js"
></script>
<script type=
"text/javascript"
>
//dabai.chen 2010-12.02 for zhenai.com index

//无插件 banner切换效果
$(
function
(){
    
//获取可点触发编号
    $(
'#bannerTextBox'
).find(
'li'
).mouseover(
function
(){
                        
//停止自动切换
                        clearInterval(t1);
                        
//获取编号自定义值 以获取对应图片
                        
var
 i = $(
this
).attr(
'set'
);
                        
//调用切换效果，切换到当前鼠标焦点编号的banner
                        changeBanner(
'x'
,i);
                        
//设置当前编号的颜色
                        setListNo.apply(
this
,[
'x'
]);
                 }).mouseout(
function
(){
                        
//鼠标离开编号 自动开始继续切换
                        t1 = setInterval(changeBanner,
'3000'
);
    })
//定义可触发编号 该变量用来自动切换过程中累加计算 用于判断是否到达最好一个banner位置
var
 bannerListIndex = 1;

//设置编号 参数setNo 用来判断方法是setInterval自动触发的还是 mouseover手动触发
function
 setListNo(setNo){
    
//清空历史的选中位置
    $(
'#bannerTextBox'
).find(
".thisHover"
).removeClass(
'thisHover'
);
    
//如果是setInterval自动触发
    
if
(setNo!=
"x"
){
            
//通过 定义可触发编号bannerListIndex 累加参数判断选中位置
            $(
'#bannerTextBox'
).find(
"li"
).eq(setNo).addClass(
"thisHover"
);
        }
    
//如果是手动触发
    
else
{
            
//通过设置当前鼠标点击对象设置 选中位置
            $(
this
).addClass(
"thisHover"
);
        }
    }

//切换方法 参数o 用来判断是否是手动出发  i 用来记录手动出发位置，以便真确定义显示图片
function
 changeBanner(o,i){
        $(
"#bannerImgesBox"
).find(
'a'
).hide();
        
if
(o != 
'x'
){
            setListNo(bannerListIndex);
            $(
"#bannerImgesBox"
).find(
'a'
).eq(bannerListIndex).fadeIn(
"slow"
);
        }
else
{

            $(
"#bannerImgesBox"
).find(
'a'
).eq(i).fadeIn(
"slow"
);
            bannerListIndex = i;
            }
        
// 累加bannerListIndex 于判断是否到达最后一个banner位置
        bannerListIndex++;
        
if
(bannerListIndex > 2 ){
            bannerListIndex = 0
        }
    }
//changeBanner();
var
 t1 = setInterval(changeBanner,
'3000'
);
})
</script>

 

其实这类banner广告图主要思路都是一样的。

1.定义一个切换的方法。

2.定义一个方法保证切换的时候 下面的  1  2  3  之类的选中位置正确

我这里用的fadeIn() 方法来实现效果。 如果喜欢可以改成其他的。

demo：http://dabaii.com/demo/20101203/index.html

 

2010.12.10：ps:最近同事发现1.2版本jQ下面有问题。主要原因是jquery1.2没有通过each 方法给数组对象绑定时间的时候产生不会闭包效果。所以直接绑定事件的时候始终会执行最后一个。

其实在代码设计的时候 按道理也应该使用each 方法，这样就不需要在 切换对象 上添加一个属性 去获取了。

JavaScript代码

//获取编号自定义值 以获取对应图片
var
 i = $(
this
).attr(
'set'
);

如果用each来循环绑定时间，就不需要这个多余的步骤了。下面是修改后的事件绑定。

JavaScript代码

//获取可点触发编号
    $('#bannerTextBox'
).find(
'li'
).each(
function
(w){
        $(this
).mouseover(
function
(){
                        //停止自动切换
                        clearInterval(t1);
                        //调用切换效果，切换到当前鼠标焦点编号的banner
                        changeBanner('x'
,w);
                        //设置当前编号的颜色
                        setListNo.apply(this
,[
'x'
]);
                 }).mouseout(function
(){
                        //鼠标离开编号 自动开始继续切换
                        t1 = setInterval(changeBanner,'3000'
);
    })

        })

通过each 的自带索引参数就可以确定但前点击的是第几个。

最后通过测试，发现1.2的jpqery 的数组对象有的情况下还是会产生闭包的。具体我也不知道怎么去判断。所以建议只要是数组对象需要给每个元素绑定时间都调用each方法。

转载自 ： http://www.dabaii.com/  不错的js+css前段技术博客