4 
 <div class="banner">
        <div class="banner_wrapper">
            <div class="banner_image">
                <img class="banner_img" src="banner-pic1.png" />                        
            </div>
            <div class="banner_bottom_wrapper">
                <div class="banner_phrase">
                    <img src="banner-text.png"/>
                </div><!-- banner_phrase ENDS -->
                <div class="banner_btns">
                   <ul class="btn_list">
                       <li><img class="banner_btn" src="banner-btn-not-selected.png" /></li>
                       <li><img class="banner_btn" src="banner-btn-not-selected.png" /></li>
                       <li><img class="banner_btn" src="banner-btn-not-selected.png" /></li>
                       <li><img class="banner_btn" src="banner-btn-not-selected.png" /></li>
                   </ul>
                </div><!-- banner_btns ENDS -->
            </div><!-- banner_bottom_wrapper ENDS -->
        </div><!-- banner_btns ENDS -->
    </div><!-- banner ENDS -->

这是我目前正在处理的源代码。如果鼠标光标位于 4 个按钮之一上，则其图片将变为彩色图标图像，顶部的横幅图像必须更改为不同的东西。是的，这是一个典型的图像滑块。

问题是我一直在使用 Javascript 来处理它，人们告诉我 Jquery 更好......但对我来说，经过一堆教程后 Jquery 的工作方式仍然非常混乱：S 

            $('.banner_btn').mouseover(
                function btn_on() {
                    //Set all the btn imgs to 'off'
                    $(".btn_list li").each(function() {$('.btn_list li img').attr('src','banner-btn-not-selected.png');
                    //And set the selected button img to 'on'
                    $(this).attr('src','banner-btn-selected.png');
                    //Now......  How to know #th btn is clicked? D:  Accroding to the btn selected, I should change the banner image.


                });                     
            });

我需要你的帮助，大师:'(

4

2 回答 2

6 
$(".btn_list li").each(function() {
   $('img', this).attr('src', 'banner-btn-selected.png');
});

总计的，

$('.banner_btn').on('mouseover', function() {
    $(".btn_list li").each(function() {
       $('img', this).attr('src', 'banner-btn-not-selected.png'); // changes all images src to default
    });
    this.src = 'banner-btn-selected.png'; // change the hovered image src
});

实现目标的另一种方式

 $('.banner_btn').on(
   'hover', 
   function() {
      this.src = 'banner-btn-selected.png';
   }, 
   function(){
      this.src = 'banner-btn-not-selected.png';
   });
于 2012-05-14T09:30:34.130 回答
2 
$(".btn_list li").on("click", handleClick);
function handleClick(e)
{
    var ind = $.inArray(this, $(".btn_list li"));
    //ind is the zero based number of the clicked button
    //so you can change the main banner accordingly 
}
于 2012-05-14T09:37:59.490 回答