很简单的图片自动轮播，点击焦点就显示点击的那个

<div id="solid">
    <ul>
        <li><img src="img/1.jpg"/><div class="tell">描述信息描述信息描述信息</div></li>
        <li><img src="img/2.jpg" /><div class="tell">描述信息描述信息</div></li>
        <li><img src="img/3.jpg" /><div class="tell">描述信息</div></li>
    </ul>
    <div id="btt"><span>1</span> <span>2</span> <span>3</span></div>    //这里放三个焦点

</div>

样式css

#solid{position:relative;}

#solid ul li{

position:absolute;

list-style:none;

display:none;//这里所有的内容先隐藏，等会再通过轮播或者滑过显示

}

#solid #btt {

position：absolute;

bottom：0px;

right：10px;  //让它处在右下角

width:905px;
height:55px;

}

#solid #btt span{

    position:absolute;
    bottom:13px;
    right:5%;
    font-size:11px;
    display:block;
    width:30px;
    height:15px;
    line-height:15px;
    margin:0 15px;    
    text-align:center;
    background:#fff;
    z-index:1000;
    cursor:pointer;
    filter:alpha(opacity=70); /*IE滤镜，透明度50%*/
    -moz-opacity:0.7; /*Firefox私有，透明度50%*/
    opacity:0.7;/*其他，透明度50%*/

}

#solid #btt span:nth-child(2){    //调整一下几个span焦点的间距
    margin-right:52px;
}
#solid #btt span:nth-child(1){
    margin-right:90px;
}

/*轮播图片下面的小标题*/
#solid ul li .tell{background-color:#ccc;
position:absolute;
left:10px;
bottom:3px;
z-index:3;
width:100%;
filter:alpha(opacity=60);
-moz-opacity:0.6;
text-align: left;
 opacity:0.6;
 height:45px;
line-height:35px;
padding-left:15px;
color:#000;
}

js。

首先获取有几个li即有几个图片。写一个函数通过循环先把所有的都隐藏，然后只显示当前的这个。用一个setInterval，让它每3000ms换一次。鼠标进入小焦点时结束这个函数，只显示当前的这个。鼠标移除就继续执行这个函数。哈！别忘了到了最后一个图片时下一个是第一个。

var total=$("#solid ul").children().length;

var now=0;//记录当前的这个

function clock(){

if(now==total-1){now=0;}

else now=now+1;

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

 $("#solid ul li").eq(i).css("display","none");

$("#solid #btt span").eq(i).css("background-color","#ccc");  //用这个颜色代表隐藏不是显示的当前

}

 $("#solid ul li").eq(now).css("display","block");

$("#solid ul li").eq(now).fadeIn(400);//淡入

$("#solid #btt span").eq(now).css("background-color","red");  //用这个颜色代表是显示的当前

}

}

//真正的开始执行啦！

$(function(){

  //首先第一个图片先淡入

$("#solid ul li").eq(0).css("display","block");

$("#solid ul li").eq(0).fadeIn(400);//淡入

$("#solid #btt span").eq(0).css("background-color","red");  //用这个颜色代表是显示的当前

var int=setInterval(clock,3000);   //每3000ms执行一次这个clock函数

$("#solid ul li,#solid #btt span").mouseenter(function(){//鼠标进入图片和焦点块结束轮播

clearInterval(int);

});

$("#solid #btt span").mouseenter(function(){//鼠标进入焦点块，只执行当前的这个

now=$(this).index()-1;//因为之后now会加1，就不是当前这个啦，所以这里要减1

clock();

});

$("#solid #btt span").mouseleave(function(){//鼠标l离开焦点块继续轮播

int=setInterval(clock,3000); 

});

});