Question

JS图片轮播的原理。。。

JS我还算不上入门。。但是教程看了不少。。然后我现在选项卡的原理懂了。也会做。。。简单介绍一下其原理好么？（别特么跟我说去网上直接下载。。）

Answer 1

<script type="text/javascript">
var t = n = 0, count;

$(document).ready(function(){

count=$("#ban_list a").length;//获取图片数目

$("#ban_list a:not(:first-child)").hide();//除第一张图片都隐藏

$("#ban_info").html($("#ban_list a:first-child").find("img").attr('alt'));//这个是把alt里的内容作为标题

$("#ban_info").click(function(){window.open($("#ban_list a:first-child").attr('href'), "_blank")});//给标题绑定点击事件，添加链接

$("#ban li").click(function() { //按钮点击事件

var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4

n = i;

if (i >= count) return;

$("#ban_info").html($("#ban_list a").eq(i).find("img").attr('alt'));//重新获取标题

$("#ban_info").unbind().click(function(){window.open($("#ban_list a").eq(i).attr('href'), "_blank")})//重新绑定标题点击事件

$("#ban_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);//渐进渐出效果

document.getElementById("ban").style.background="";

$(this).toggleClass("on");//切换按钮样式

$(this).siblings().removeAttr("class");

});

t = setInterval("showAuto()", 4000);

$("#ban").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});

})//鼠标指上停止轮播

function showAuto()//实现轮播的函数

{

n = n >=(count - 1) ? 0 : ++n;

$("#ban li").eq(n).trigger('click');

}

</script>
<div id="ban">
<div id="ban_bg"></div>
<div id="ban_info"></div>
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="ban_list">

<a href="/Item/Show.asp?m=1&d=3824" target="_blank"><img src="/UploadFiles/2012-08/admin/2012081511562273110.jpg" alt="" width="414" height="286" /></a>

</div>

追问

还以为和选项卡原理差不多，没想到这么难。。。顺便讨教一句。我做的选项卡是DIV+input做的。。。如果按钮是div，而内容也是div的话。我就无能为力了。。因为不知道怎么过滤那些我不要的DIV..还有就是就算按钮是input。我内容里肯定还是会有div嵌套的。那么我直接获取tagNames就乱了。。一个原理。怎么过滤额- -。

追答

也不是太复杂啊，基本就是那几个步骤。只要想办法实现了就好了
还有我不知道你不知道你是怎么做选项卡的，我一般是div里面套li或者p，其实什么标签都好啦
给div一个id值，然后
var menu = document.getElementById('switch');
var x = menu.getElementsByTagName('p');
就把所有的按钮标签获取了，给你看一下我写的吧

function slide(obj)

{

var menu = document.getElementById('switch');

var x = menu.getElementsByTagName('p');

for(var i=0;i

Answer 2

自己搜一下智能社blue老师的视频