单击和不透明度的简单传记滑块

Question

任何人都可以帮助我，我有一个简单而复杂的问题。我想把它变成下面的

如果你点击一张照片，其他人就会有一个阴影。

我现在正在处理的页面是http://www.3cwaremarketing.com/VisiSite/company-10/team/

感谢您的帮助。您可以在下面看到详细信息。

HTML

＆＃13;

＆＃13;

function changeIt(objName) {
  //The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
  var obj = document.getElementById(objName);

  //An array that hold the IDs of images that we mentioned in their DIV blocks
  var objId = new Array();

  //Storing the image IDs into the array starts here
  objId[0] = "image1";
  objId[1] = "image2";
  objId[2] = "image3";
  objId[3] = "image4";
  objId[4] = "image5";
  //Storing the image IDs into the array ends here

  //A counter variable going to use for iteration
  var i;

  //A variable that can hold all the other object references other than the object which is going to be visible
  var tempObj;

  //The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
  //only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
  //of the if statement within this loop.
  for (i = 0; i < objId.length; i++) {
    if (objName == objId[i]) {
      obj.style.display = "block";
    } else {
      tempObj = document.getElementById(objId[i]);
      tempObj.style.display = "none";
    }
  }
  return;
}

＆＃13;

<a name="isaac"></a>
<a id="one" href="#isaac" onclick="changeIt('image1');">
  <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/Isaac1.jpg" border="0" alt="one" />
</a>

<a name="alan"></a>
<a id="two" href="#alan" onclick="changeIt('image2');">
  <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/ed.jpg" border="0" alt="two" />
</a>

<a name="ed"></a>
<a id="three" href="#ed" onclick="changeIt('image3');">
  <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/alan.jpg" border="0" alt="three" />
</a>

<a name="matt"></a>
<a id="four" href="#matt" onclick="changeIt('image4');">
  <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/matt.jpg" border="0" alt="four" />
</a>

<br>
<br>
<div id="image1">
  <h2>Isaac W. Jacobson</h2>
  VP Business Development
  <br>
  <br>Mr. Jacobson brings a wealth of executive experience and professional relationships, having assembled top-tier executive teams and boards of directors for technology companies, syndicating venture capital, and buying and selling companies throughout
  his career. He has held executive positions with media and technology entities such as theDial.com, Digonex Technologies, MusicRebellion, Digital Kiosk Technologies, Humanizing Technologies and eTAGZ Inc. In addition to building and growing technology
  companies, Mr. Jacobson has had ownership interests across other sectors including precious metals, professional sports teams, and import/export companies working with the countries of Mexico, China, and the United Kingdom. A popular speaker and trusted
  advisor to power brokers, he is often sought out by those in the highest ranks of business, politics, and entertainment to strategize on issues ranging from acquisitions, investments, and public policy to personal growth and bringing to market innovative
  ideas. Mr. Jacobson is dedicated to his community, having established or served on numerous non-profit boards including the Snow College Foundation Board, the UVU Foundation Board, the Hispanic Chamber of Commerce, and the Family Defense PAC. He is
  an avid donor and fundraiser for Republican political candidates and meaningful political initiatives to further Utah�s thriving business environment and family values. Mr. Jacobson is a father of three and he and his wife Tara reside in Mapleton, Utah.
</div>
<div id="image2" style="display:none">
  <h2>Alan W. Bunker</h2>
  CFO
  <br>
  <br>Mr. Bunker founded Spectrum Field Services with two other partners in 1987. A CPA and MBA, he has enjoyed an extensive career as a top executive in the public accounting, retail department store, real estate development, and health care industries.
  He also has worked as an adjunct professor at the University of Utah. As a Senior Consultant with KPMG Peat Marwick in San Francisco, Mr. Bunker performed numerous consulting engagements in the savings and loan industry. He later became the Executive
  Vice President and Chief Operating Officer of a real estate development firm, with major multi-family residential projects in Texas, Colorado, and Washington. Mr. Bunker has been heavily involved in the field service industry for over 20 years through
  his participation with several industry-related associations. He periodically contributes articles to industry publications, and frequently has chaired committees and panels, including committees responsible for the development of field service standards
  and procedures and technology advances for the industry. A long-time member of the Board of Governors of the National Association of Mortgage Field Services (NAMFS), Mr. Bunker is a past president of that organization.
</div>
<div id="image3" style="display:none">
  <h2>Ed Bruno</h2>VP of Sales
  <br>
  <br>Mr. Bruno is an 18-year sales veteran with a performance record anchored on results. He has co-founded several start-ups, played a central role in three merger and acquisition events and lead sales teams of over 80 people to deliver on annual budgets
  in excess of $400 million. His expertise crosses numerous business channels including media, technology, corporate communications, intellectual property, licensing, and webcast solutions. Mr. Bruno has held senior leadership roles including COO, CBO,
  and VP of Sales in nine companies, two of them public. Mr. Bruno was voted into the �40 Under 40� by the Seattle Business Examiner. He holds Masters Degrees in English and Rhetorical Studies from Oregon State University</div>
<div id="image4" style="display:none">
  <h2>A. Matthew Bunker</h2>VP Business Development
  <br>
  <br>Mr. Bunker is a natural-born networker and connector. He started his career as a staff member of the U.S. Senate Committee on the Judiciary in Washington, DC where he primarily focused on U.S. immigration policy but also assisted with judicial nominations
  and crime legislation. Following his tenure with the Senate, Mr. Bunker continued to work with Congress with a government affairs and sports representation group. He also worked closely with the National Basketball Referees Association. Following his
  career in Washington, DC, Mr. Bunker turned his attention to higher education, specifically building alumni associations. He was the Alumni Director for Salt Lake Community College, where he took their alumni activity from 32 active members to over
  30,000 active members in under four years. Then he worked as the Alumni Manager with the MBA program at Brigham Young University. He organized its worldwide network of MBA alumni; focusing a great deal on social and new media, email marketing, and other
  methods of connecting people together. Mr. Bunker speaks fluent Spanish. He holds a Bachelor of Arts in American Studies and Business from BYU and a Master of Public Affairs from the University of Missouri. He and his wife Jacquie are parents of four
  children and they live in Saratoga Springs, Utah.</div>
<br>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你想做相反的事情。而不是添加阴影到其他图片，只需降低其不透明度。 将所有图像设置为半透明，并在悬停时设置为完全不透明。

点击后，添加＆＃34;有效＆＃34;将保持不透明状态的类。

＆＃13;

＆＃13;

button1->Invalidate();
button1->Update();

＆＃13;

$("img").click( function(){
  $(this)
    .addClass("active") // Adds "active" class to all images
    .siblings()  // Selects images other than the one that's been clicked
    .removeClass("active"); // Removes the "active" class on these images

  $(".text")
     .hide() // Hides all texts
     .eq( $(this).index() )  // select only the text corresponding to the clicked image's index
     .show() // Shows only the corresponding text
})

＆＃13;

#container{
  background: #492E1D;
  display: inline-block;
}

img{
  opacity : 0.5;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  cursor: pointer;
}
img:hover, img.active{
 opacity:1;
}

.text{
  display: none;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

我简化了您的Javascript并添加了实现您定义为需求的必要条件。检查下面的代码段。这只是使用vanilla Javascript。对于您的图片，我添加了class="photo"，因为我认为页面上还会有其他图像不会受到影响。

//An array that hold the IDs of images that we mentioned in their DIV blocks
var objId = ["image1","image2","image3","image4"];
var images = document.getElementsByClassName("photo");
function changeIt(objName) {
  //The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
  //only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
  //of the if statement within this loop.
  for (var i = 0; i < objId.length; i++) {
    console.log(i+": "+objId[i]);
    var tempObj = document.getElementById(objId[i]);
    if (objName != objId[i]) {
      tempObj.style.display = "none";
      images[i].style.filter = "sepia(75%)";
    }
    else {
      tempObj.style.display = "block";
      images[i].style.filter = "sepia(0)";
    }
  }
  return;
}

/* make the effect smoothly animated in browsers that support it */
img {
  transition-duration: 0.4s; 
}

<a name="isaac"></a>
<a id="one" href="#isaac" onclick="changeIt('image1');">
  <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/Isaac1.jpg" border="0" alt="one" class="photo" />
</a>

<a name="alan"></a>
<a id="two" href="#alan" onclick="changeIt('image2');">
  <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/ed.jpg" border="0" alt="two" class="photo" />
</a>

<a name="ed"></a>
<a id="three" href="#ed" onclick="changeIt('image3');">
  <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/alan.jpg" border="0" alt="three" class="photo" />
</a>

<a name="matt"></a>
<a id="four" href="#matt" onclick="changeIt('image4');">
  <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/matt.jpg" border="0" alt="four" class="photo" />
</a>

<br>
<br>
<div id="image1">
  <h2>Isaac W. Jacobson</h2>
  VP Business Development
  <br>
  <br>Mr. Jacobson brings a wealth of executive experience and professional relationships, having assembled top-tier executive teams and boards of directors for technology companies, syndicating venture capital, and buying and selling companies throughout
  his career. He has held executive positions with media and technology entities such as theDial.com, Digonex Technologies, MusicRebellion, Digital Kiosk Technologies, Humanizing Technologies and eTAGZ Inc. In addition to building and growing technology
  companies, Mr. Jacobson has had ownership interests across other sectors including precious metals, professional sports teams, and import/export companies working with the countries of Mexico, China, and the United Kingdom. A popular speaker and trusted
  advisor to power brokers, he is often sought out by those in the highest ranks of business, politics, and entertainment to strategize on issues ranging from acquisitions, investments, and public policy to personal growth and bringing to market innovative
  ideas. Mr. Jacobson is dedicated to his community, having established or served on numerous non-profit boards including the Snow College Foundation Board, the UVU Foundation Board, the Hispanic Chamber of Commerce, and the Family Defense PAC. He is
  an avid donor and fundraiser for Republican political candidates and meaningful political initiatives to further Utah�s thriving business environment and family values. Mr. Jacobson is a father of three and he and his wife Tara reside in Mapleton, Utah.
</div>
<div id="image2" style="display:none">
  <h2>Alan W. Bunker</h2>
  CFO
  <br>
  <br>Mr. Bunker founded Spectrum Field Services with two other partners in 1987. A CPA and MBA, he has enjoyed an extensive career as a top executive in the public accounting, retail department store, real estate development, and health care industries.
  He also has worked as an adjunct professor at the University of Utah. As a Senior Consultant with KPMG Peat Marwick in San Francisco, Mr. Bunker performed numerous consulting engagements in the savings and loan industry. He later became the Executive
  Vice President and Chief Operating Officer of a real estate development firm, with major multi-family residential projects in Texas, Colorado, and Washington. Mr. Bunker has been heavily involved in the field service industry for over 20 years through
  his participation with several industry-related associations. He periodically contributes articles to industry publications, and frequently has chaired committees and panels, including committees responsible for the development of field service standards
  and procedures and technology advances for the industry. A long-time member of the Board of Governors of the National Association of Mortgage Field Services (NAMFS), Mr. Bunker is a past president of that organization.
</div>
<div id="image3" style="display:none">
  <h2>Ed Bruno</h2>VP of Sales
  <br>
  <br>Mr. Bruno is an 18-year sales veteran with a performance record anchored on results. He has co-founded several start-ups, played a central role in three merger and acquisition events and lead sales teams of over 80 people to deliver on annual budgets
  in excess of $400 million. His expertise crosses numerous business channels including media, technology, corporate communications, intellectual property, licensing, and webcast solutions. Mr. Bruno has held senior leadership roles including COO, CBO,
  and VP of Sales in nine companies, two of them public. Mr. Bruno was voted into the �40 Under 40� by the Seattle Business Examiner. He holds Masters Degrees in English and Rhetorical Studies from Oregon State University</div>
<div id="image4" style="display:none">
  <h2>A. Matthew Bunker</h2>VP Business Development
  <br>
  <br>Mr. Bunker is a natural-born networker and connector. He started his career as a staff member of the U.S. Senate Committee on the Judiciary in Washington, DC where he primarily focused on U.S. immigration policy but also assisted with judicial nominations
  and crime legislation. Following his tenure with the Senate, Mr. Bunker continued to work with Congress with a government affairs and sports representation group. He also worked closely with the National Basketball Referees Association. Following his
  career in Washington, DC, Mr. Bunker turned his attention to higher education, specifically building alumni associations. He was the Alumni Director for Salt Lake Community College, where he took their alumni activity from 32 active members to over
  30,000 active members in under four years. Then he worked as the Alumni Manager with the MBA program at Brigham Young University. He organized its worldwide network of MBA alumni; focusing a great deal on social and new media, email marketing, and other
  methods of connecting people together. Mr. Bunker speaks fluent Spanish. He holds a Bachelor of Arts in American Studies and Business from BYU and a Master of Public Affairs from the University of Missouri. He and his wife Jacquie are parents of four
  children and they live in Saratoga Springs, Utah.</div>
<br>