jQuery实现图像旋转木马效果
下面是整个过程。
1,除第一幅图片外,隐藏所有图片,
2,获取第一张图片的alt信息显示在信息栏中,并添加到单击事件中。
3、添加点击收听4个按钮,点击相应的按钮,并与淡出的画面显示,显示方法
4、设置setInterval,执行开关功能正常
{代码描述}
筛选器():获取所有可见元素
Unbind():从匹配的元素中删除绑定事件
兄弟姐妹:获取一个元素集合,其中包含匹配元素集合中每个元素的所有唯一对等元素。
例如:找到所有的同辈元素类的名字在每个区选择
HelloHello AgainAnd再次
执行$()
{你好,再}
{源代码}
HTML的一部分:
一
二
三
四
CSS部分:
#旗帜{位置:相对;宽度:478px;身高:286px;边框1px solid # 666;溢出:隐藏;}
# banner_list img { border: 0px;}
# banner_bg {位置:绝对的;下:0;背景颜色:# 000;高度:30px;过滤器:α(不透明度30);不透明度:0.3;Z指数:1000;
鼠标指针;宽度:478px;}
# banner_info {位置:绝对的;下:0;左:5px;身高:22px;颜色:# FFF;Z指数:1001;鼠标指针}
# banner_text {位置:绝对;宽度:120px;Z指数:1002;右:3px;底:3px;}
#旗帜UL {位置:绝对;列表样式类型:无;过滤器:α(不透明度80);不透明度:0.8;border: 1px solid # FFF;Z指数:1002;
保证金:0;padding: 0;底:3px;右:5px;}
#旗帜UL Li {填充:0px 8px;浮动:左;显示:块;颜色:# FFF;边界:# e5eaff 1px solid;背景:# 6f4f67;
#旗帜UL li.on { 900 } #背景:
# banner_list一{位置:绝对的;}
js的一部分:
var = n = 0,计数;
$(文档)Ready(函数(){)
数= $(# banner_list 的长度);
$(# banner_list:不(:第一个孩子))藏();
$(# banner_info ).html($(# banner_list:第一个孩子)。找到(IMG)。Attr('alt '));
$(# banner_info)。Click(function(){ window.open($(# banner_list:第一个孩子)。Attr('href),_blank )});
$(#横幅里)。Click(function(){)
var i = $(this)。文本(- 1);在LI元素值中获得,即1, 2, 3,4。
N = i;
如果(i =计数)返回;
$(# banner_info ).html($(# banner_list ),Eq(我),(IMG)。Attr('alt '));
$(# banner_info)。Unbind(),Click(函数(){ window.open($(# banner_list ),Eq(我),Attr('href),_blank )})
$(# banner_list )。滤波器(:可见)。FadeOut(500)。母()。孩子们()。Eq(我)FadeIn(1000);
document.getelementbyid(旗帜)。风格。背景= ;
$(this).ToggleClass (on);
$(这),兄弟姐妹()。RemoveAttr(类);
});
T = setInterval(showauto()
$(#旗帜)。Hover(function(){ clearInterval(T)},{ T = setInterval()函数(showauto()
})
showauto()函数
{
N(计数- 1)= 0 = ++;
$(#横幅里)。情商(N)。Trigger(听到咔哒声);
}
以上是jQuery实现的全画面旋转木马,希望能帮助大家学习。