$(function () {
            $("#simg1").addClass('imghover');
            $("#simg1").mouseenter(function () {
                $(this).addClass('imghover');
                $("#simg2").removeClass('imghover');
                $("#simg3").removeClass('imghover');
                $("#bimg").attr("src", $("#simg1").attr("src"));
            });
            $("#simg2").mouseenter(function () {
                $("#simg2").addClass('imghover');
                $("#simg1").removeClass('imghover');
                $("#simg3").removeClass('imghover');
                $("#bimg").attr("src", $("#simg2").attr("src"));
            });
            $("#simg3").mouseenter(function () {
                $("#simg3").addClass('imghover');
                $("#simg2").removeClass('imghover');
                $("#simg1").removeClass('imghover');
                $("#bimg").attr("src", $("#simg3").attr("src"));
            });
        });
有3张小图片id为simg1,simg2,simg3 
一张大图片,id为bimg
要求鼠标指着小图片,显示相应的大图片。
样式是这样的
<ul>
<li>simg1</li>
<li>simg2</li>
<li>simg3</li>
</ul>
<ul>
<li>bimg<li>
</ul>
这个效果是实现了,但是这代码太坑爹了
请大神们帮我优化一下。(不修改样式)jQuery图片新手问题

解决方案 »

  1.   

    你那个真的可以执行吗,我怎么感觉你的选择器明显不太对啊<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
    $("li:eq(0)").addClass('imghover');
            $("ul li").mouseenter(function (){
    $("li").removeClass('imghover');
    $(this).addClass('imghover');
                $("ul:eq(1) li:eq(0)").attr("src", $(this).attr("src"));
            });
    })
     </script>
     <ul>
     <li>simg1</li>
     <li>simg2</li>
     <li>simg3</li>
     </ul>
     <ul>
     <li>bimg<li>
     </ul>
      

  2.   

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("li:eq(0)").addClass('imghover');
            $("ul li").mouseenter(function (){
                $("li").removeClass('imghover');
                $(this).addClass('imghover');
                $("ul:eq(1) li:eq(0) img").attr("src", $(this).attr("src"));
            });
        })
     </script>
     <ul>
     <li>simg1</li>
     <li>simg2</li>
     <li>simg3</li>
     </ul>
     <ul>
     <li>bimg<li>
     </ul>
      

  3.   

    $("ul:eq(1) li:eq(0) img").attr("src", $(this).attr("src"));