jQuery鼠标经过图片切换

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pqw1991/archive/2012/08/30/2663459.html

文章标签：

#javascript #ViewUI

HTML代码：

<div class="picBox" id="pic">
  <ul>
    <li>
      <div><span>标题一</span><img src="01.jpg" width="282" height="157" /> </div>
    </li>
    <li>
      <div><span>标题二</span> <img src="02.jpg" width="282" height="157" /> </div>
    </li>
    <li>
      <div><span>标题三</span> <img src="03.jpg" width="282" height="157" /> </div>
    </li>
    <li>
      <div><span>标题四</span> <img src="04.jpg" width="282" height="157" /> </div>
    </li>
  </ul>
</div>

CSS代码：

*{padding:0;margin:0; line-height:25px;}
ul,li{ list-style:none;}
.picBox{ overflow:hidden; width:414px; margin:30px auto 0;}
.picBox ul li{float:left;overflow:hidden;height:157px; vertical-align:middle;}
.picBox ul li span{ float:left; background:url(t.jpg) no-repeat; height:157px; width:23px;color:#FFFFFF; line-height:35px; font-size:16px; text-align:center; padding:0 5px;cursor:pointer}
.picBox ul li img{float:left}
.picBox ul li span.over{color:#900;}

jQuery代码：

<script>
    $(document).ready(function(){
        var playindex = 0;
        var flag = true;
        $('.picBox img').css('width','0').eq(0).css('width','282px');
        $('.picBox li').bind('mouseover',function(){
            if (flag==true){
                var index = $(this).index();
                 if (playindex!=index){
                    flag = false;
                    $('.picBox img').eq(playindex).animate({'width':'0px'},500);
                    $('.picBox img').eq(index).animate({'width':'282px'},500,function(){
                        flag = true;
                    });
                }
                playindex = index;
            }
        })
    });
</script>