普通轮播图-左右滚动-03

    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;}