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{ width:755px; height:347px; overflow:hidden; position:relative; margin:40px 0 50px 90px;}

.banner .w_ul{ width:5000px;}

.banner .w_ul li{ float:left; width:755px; height:347px;}

.banner .h_num{ position:absolute; right:0; bottom:10px;}

.banner .h_num li{ width: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{width: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{width:710px;height:330px;overflow:hidden;position:relative;}

.mad_bx ul{height:330px;position:absolute;}

.mad_bx ul li{float:left;_display:inline;width: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;width: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;}