zoukankan      html  css  js  c++  java
  • 普通轮播图上下滚动-04

    1、结构

                    <div class="banner1">
                            <ul class="w_ul1">
                                 <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_num1">
                                <li class="hover11"></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ol>
                     </div>

    2、样式

    .banner1{ 755px; height:347px; overflow:hidden; position:relative; margin:40px 0 50px 90px;}
    .banner1 .w_ul1{ height:5000px;}
    .banner1 .w_ul1 li{ 755px; height:347px;}
    .banner1 .h_num1{ position:absolute; right:0; bottom:10px;}
    .banner1 .h_num1 li{ 50px; height:6px; background:#960; float:left; margin:0 4px; cursor:pointer;}
    .banner1 .h_num1 .hover11{ background:#FFEB00;}

    3、效果

        /*-----------上下轮播----------*/
        
        function ft_1(li_h,wrap_1,num_h,width_1,hover_1){
                      var lih=li_h.height();
                      var repeat;
                      var index=0;
                      var length_1=li_h.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({"marginTop":-lih*index});                  
                         num_h.eq(index).addClass(hover_1).siblings().removeClass(hover_1);
                   };
           };
          ft_1($(".w_ul1 li"),$(".banner1"),$(".h_num1 li"),$(".w_ul1"),("hover11"))

  • 相关阅读:
    C#与数据库访问技术总结(三)之 Connection对象的常用方法
    ConnectionState详解
    SQL Server 中 RAISERROR 的用法
    C# 捕获数据库自定义异常
    "在创建窗口句柄之前,不能在控件上调用 Invoke 或 BeginInvoke"
    查询sql语句的执行时间
    c# 多线程 创建对象实例
    C#中IDisposable的用法-垃圾回收
    c#中的引用类型和值类型
    C++运行出现"what(): std::bad_alloc"的解决办法
  • 原文地址:https://www.cnblogs.com/su1637/p/8178177.html
Copyright © 2011-2022 走看看