基于JQuery的实现图片轮播效果(焦点图)

完整的演示代码:
</p><p><b><br /><b> </p><p><title>JQuery实现图片轮播效果 </title> </p><p></b> </p><p>【实例演示】</p><p>1<br />2<br />3<br />4 </p><p><img class="alignnone size-full wp-image-95818" src="https://www.easck.com/d/file/200522/202005221511472143.jpg" width="478" height="286" alt="橡树小屋的blog" title="橡树小屋的blog" /><br /><img class="alignnone size-full wp-image-95819" src="https://www.easck.com/d/file/200522/202005221511472144.jpg" width="478" height="286" alt="橡树小屋的blog" title="橡树小屋的blog" /><br /><img class="alignnone size-full wp-image-95820" src="https://www.easck.com/d/file/200522/202005221511472145.jpg" width="478" height="286" alt="橡树小屋的blog" title="橡树小屋的blog" /><br /><img class="alignnone size-full wp-image-95821" src="https://www.easck.com/d/file/200522/202005221511472146.jpg" width="478" height="286" alt="橡树小屋的blog" title="橡树小屋的blog" /> </p><p></b> </p><p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
【原理简述】
这里大概说一下整个流程：
1，将除了第一张以外的图片全部隐藏，
2，获取第一张图片的alt信息显示在信息栏，并添加点击事件
3，为4个按钮添加点击侦听，点击相应的按钮，用fadeOut，fadeIn方法显示图片
4，设置setInterval，定时执行切换函数
【代码说明】
filter(“:visible”) :获取所有可见的元素
unbind()：从匹配的元素中删除绑定的事件
siblings：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
例：找到每个div的所有同辈元素中带有类名为selected的元素。

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

执行 $(“div”).siblings()，结果

[ <p>Hello</p>, <p>And Again</p> ]

【程序源码】
HTML部分：

<div id=”banner”>
<div id=”banner_bg”></div> <!–标题背景–>
<div id=”banner_info”></div> <!–标题–>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id=”banner_list”>
<a href=”#” target=”_blank”><img src=”imgs/p1.jpg” title=”橡树小屋的blog” alt=”橡树小屋的blog” /></a>
<a href=”#” target=”_blank”><img src=”imgs/p5.jpg” title=”橡树小屋的blog” alt=”橡树小屋的blog” /></a>
<a href=”#” target=”_blank”><img src=”imgs/p3.jpg” title=”橡树小屋的blog” alt=”橡树小屋的blog” /></a>