Question

我在网站上有一个paralax效果，我想制作有效点。但问题是每个点必须在活动

上不同

绿色

橙

薄荷

蓝色

当他们不活跃时，我希望他们是白人。

对我来说非常重要的是改变图像的src而不是.css

以下是一个颜色活动点的代码：

<ul class="paralax">
              <li><a href="#intro" title="Next Section"><img src="https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png" /></a></li>
              <li><a href="#second" title="Next Section"><img src="https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png" alt="Link"  /></a></li>
              <li><a href="#third" title="Next Section"><img src="https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png" alt="Link"  /></a></li>
              <li><a href="#fifth" title="Next Section"><img src="https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png" alt="Link" /></a></li>
              <li><a href="#six" title="Next Section"><img src="https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png" alt="Link" /></a></li>
</ul>

和jquery：

$('document').ready(function() {
            $('.paralax img').click(function(e) {
            e.preventDefault();
            $('.paralax img').attr("src","images/dot.png");
            $(this).attr("src","images/dot-green.png");
        });
        });

Link to jsFiddle

Answer 1

您可以将所需的替代图片作为数据属性存储在<a>（或img或li ...）

上

  <li><a href="#intro" data-alt-image="dot-green.png" title="Next Section">
    <img src="https://path/to/dot.png" />
  </a></li>

然后点击它，重置其他人。

$('document').ready(function() {
    $('.paralax a').click(function(e) {
        // our alt image, stored on the <a>
        var altImg = $(this).attr('data-alt-image'),
            // keep the demo readable
            db = "https://dl.dropboxusercontent.com/u/64675374/circle2/";

        e.preventDefault();

        // reset the last one
        $('.paralax')
            .find('.active').removeClass('active')
            .find('img').attr("src", db+"dot.png");

        // point to the active image in the data-alt-image attribute              
        $(this).addClass('active').find('img').attr("src", db+altImg);
    });
});

更新了Fiddle

Answer 2

你可以尝试这样的事情（1. Sequential Colors 2. Random Colors）：

$('document').ready(function() {
    var dots = ['dot-green.png', 'dot-orange.png', 'dot-mint.png', 'dot-blue.png'];
    $('.paralax img').click(function(e) {
        e.preventDefault();
        // use this for sequential
        var dot = $(this).closest('li').index();
        // use this for random
        // var dot =  Math.floor(Math.random() * (dots.length - 1) +1);
        $('.paralax img').attr("src","https://dl.dropboxusercontent.com/u/64675374/circle2/dot.png");
        $(this).attr("src","https://dl.dropboxusercontent.com/u/64675374/circle2/" + dots[dot]);
    });
});

Jquery活动链接更改src

2 个答案: