基于jquery横向手风琴效果

最新推荐文章于 2023-11-22 10:48:18 发布

weixin_30906185

最新推荐文章于 2023-11-22 10:48:18 发布

阅读量91

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liaohuolin/p/4580557.html

本文介绍了一款使用jquery实现的横向手风琴效果，包括其核心代码和具体应用，实现了一个左右滑动切换的图片轮播功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于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({width:"970px"},300).siblings().stop().animate({width:"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({width:"970px"},300).siblings().stop().animate({width:"46px"},300)
};
timer=setInterval("startMove()",2000)