1、结构
<div class="banner">
<ul class="w_ul">
<li><a href="#" target="_blank"><img src="images/tu01.jpg" width="755" height="347"></a></li>
<li><a href="#" target="_blank"><img src="images/tu02.jpg" width="755" height="347"></a></li>
<li><a href="#" target="_blank"><img src="images/tu01.jpg" width="755" height="347"></a></li>
<li><a href="#" target="_blank"><img src="images/tu02.jpg" width="755" height="347"></a></li>
</ul>
<ol class="h_num">
<li class="hover1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
2、样式
/***************style1************/
.banner{ 755px; height:347px; overflow:hidden; position:relative; margin:40px 0 50px 90px;}
.banner .w_ul{ 5000px;}
.banner .w_ul li{ float:left; 755px; height:347px;}
.banner .h_num{ position:absolute; right:0; bottom:10px;}
.banner .h_num li{ 20px; height:20px; text-align:center; line-height:20px; background:#960; float:left; margin:0 4px; cursor:pointer; color:#FFF;}
.banner .h_num .hover1{ background:#F00;}
3、效果
/*banner图001-插件*/
function ft(li_w,wrap_1,num_h,width_1,hover_1){
var liw=li_w.width();
var repeat;
var index=0;
var length_1=li_w.length;
wrap_1.hover(function(){
clearInterval(repeat)
},function(){
repeat=setInterval(function(){
index++;
if(index==length_1)
{ index=0};
ht(index)
},3000)
}).trigger("mouseout");
num_h.mouseover(function(){
index=num_h.index(this);
ht(index)
});
function ht(index){
width_1.stop().animate({"marginLeft":-liw*index});
num_h.eq(index).addClass(hover_1).siblings().removeClass(hover_1);
};
};
ft($(".w_ul li"),$(".banner"),$(".h_num li"),$(".w_ul"),("hover1"));
4、插件轮播图-结构
<!-- banner图003 -->
<div class="slideBox scrollpic" id="slideBox">
<div class="hd Snumb">
<ul></ul>
</div>
<div class="bd mad_bx">
<ul>
<li><a target="_blank" href="#"><img src="images/tu01.jpg" width="710" height="330"></a></li>
<li><a target="_blank" href="#"><img src="images/tu02.jpg" width="710" height="330"></a></li>
<li><a target="_blank" href="#"><img src="images/tu01.jpg" width="710" height="330"></a></li>
<li><a target="_blank" href="#"><img src="images/tu02.jpg" width="710" height="330"></a></li>
<li><a target="_blank" href="#"><img src="images/tu01.jpg" width="710" height="330"></a></li>
<li><a target="_blank" href="#"><img src="images/tu02.jpg" width="710" height="330"></a></li>
</ul>
</div>
<a target="_self" href="javascript:void(0)" class="prev"></a>
<a target="_self" href="javascript:void(0)" class="next"></a>
<script type="text/javascript">
jQuery(".slideBox").slide({mainCell:".bd ul",titCell:".hd ul",effect:"fold",autoPlay:true,autoPage:true,mouseOverStop:false,triggerTime:0});
</script>
</div>
5、插件轮播图-样式
/* 焦点图 */
.slideBox{710px;height:330px;position:relative;margin:40px 0 50px 90px;}
.slideBox a.block, .slideBox a.block, .slideImg:hover a.block, .slideImg:hover a.block{display:block;}
.mad_bx{710px;height:330px;overflow:hidden;position:relative;}
.mad_bx ul{height:330px;position:absolute;}
.mad_bx ul li{float:left;_display:inline;710px;height:330px;overflow:hidden;}
.Snumb{position:absolute;bottom:15px;left:50%;margin-left:-54px;font-size:12px;z-index:120;}
.Snumb li{float:left;_display:inline;18px;height:18px;font-size:12px;overflow:hidden;margin-right:6px;background:#2e0708;text-align:center;line-height:16px;cursor:pointer;color:#fff;border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;}
.Snumb li.on{color:#fff;font-weight:bold;background:#027CFF;}