zoukankan      html  css  js  c++  java
  • 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效。效果图如下:

    在线预览    源码下载

    效果图如下:

    <div class="flash">
        <div class="con">
            <ul>
                <li class="current ti1">
                    <h3>关于我们</h3>
                    <div class="show">
                        <img src="images/big_1.jpg"/>
                        <img src="images/big_2.jpg"/>
                        <img src="images/big_3.jpg"/>
                        <img src="images/big_4.jpg"/>
                    </div>
                </li>
                <li class="ti2">
                    <h3>联系我们</h3>
                    <div class="show">
                        <img src="images/big_5.jpg"/>
                        <img src="images/big_6.jpg"/>
                        <img src="images/big_7.jpg"/>
                        <img src="images/big_8.jpg"/>
                    </div>
                </li>
                <li class="ti3">
                    <h3>给我留言</h3>
                    <div class="show">
                        <img src="images/big_1.jpg"/>
                        <img src="images/big_3.jpg"/>
                        <img src="images/big_5.jpg"/>
                        <img src="images/big_7.jpg"/>
                    </div>
                </li>
                <li class="ti4">
                    <h3>网站首页</h3>
                    <div class="show">
                        <img src="images/big_2.jpg"/>
                        <img src="images/big_4.jpg"/>
                        <img src="images/big_6.jpg"/>
                        <img src="images/big_8.jpg"/>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    javascript代码:

    var timer=null;
    var i=0;
    $(function(){
        $(".flash .con ul li").mouseover(function(){
            clearInterval(timer);
        });
        $(".flash .con ul li").click(function(){
            $(this).stop().animate({"970px"},300).siblings().stop().animate({"46px"},300)
        });
        $(".flash .con ul li").mouseout(function(){
            timer=setInterval("startMove()",2000)
        });
        
    })
    function startMove(){
      i++;
      if(i>$(".flash .con ul li").length-1){i=0}
      $(".flash .con ul li").stop().eq(i).animate({"970px"},300).siblings().stop().animate({"46px"},300)
    };
    timer=setInterval("startMove()",2000)

    via:http://www.w2bc.com/Article/43486

  • 相关阅读:
    Java1:Chapter2
    Java1:Chapter1
    Java1:Chapter11
    Java1:Chapter8
    Java1:Chapter6
    Android day 03
    Android day02
    Android day01
    二进制文件的读写
    字符流
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4580557.html
Copyright © 2011-2022 走看看