Question

我制作了一个显示间隔图像的旋转木马。显示图像时，左边的文本（3个标题图像）用边框包裹。每当我将鼠标悬停在左侧的特定文本标题上时，我希望图像显示在右侧。不过，无法弄清楚如何去做。比如说，如果用户在第一张幻灯片上盘旋，我只是尝试显示它并将剩下的两张幻灯片设置为无法完成的任何幻灯片。

＆＃13;

var pr1 = document.querySelector('.pr1'); 
var pr2 = document.querySelector('.pr2');
var pr3 = document.querySelector('.pr3');
var slide1 = document.querySelector('.slide1');
var slide2 = document.querySelector('.slide2');
var slide3 = document.querySelector('.slide3');
var slideImg1 = document.querySelector('.slideImg1');
var slideImg2 = document.querySelector('.slideImg2');
var slideImg3 = document.querySelector('.slideImg3');
var img1Path = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511404178/v_erp_w8eyhx.png')";
var img2Path = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511404178/v_aps_htif6m.png')";
var img3Path = "url('https://res.cloudinary.com/dijc9b7wz/image/upload/v1511404178/v_dbr_kt31ej.png')";
var slide1Bool = false;
var slide2Bool = false;
var slide3Bool = false;

pr1.addEventListener('mouseover', mouseOver1);
function mouseOver1() {
  pauseTheLoop();
 slide1.style.display = 'block'; 
  console.log('mouseOver1');
  slide2.style.display = 'none';
    slide3.style.display = 'none';
 /* alert('mouseOver1');*/

  if(slide2Bool || slide3Bool) {  
    pr1.style.border = '1px solid #ccc';
    pr1.style.borderRight = '1px solid #fff';
    pr2.style.border = 'none';
    pr3.style.border = 'none';
  }
}

pr1.addEventListener('mouseout', mouseOut1);
function mouseOut1() {
  pr1.style.border = 'none';
  console.log('mouseOut1');
}

pr2.addEventListener('mouseover', mouseOver2);
function mouseOver2() {
  pauseTheLoop();
  slide2.style.display = 'block';
     slide1.style.display = 'none';
    slide3.style.display = 'none';
/*  alert('mouseOver2');*/
  console.log('mouseOver2');
  if(slide1Bool || slide3Bool) {
    pr2.style.border = '1px solid #ccc';
    pr2.style.borderRight = '1px solid #fff';
    pr1.style.border = 'none';
    pr3.style.border = 'none';
  }
}
pr2.addEventListener('mouseout', mouseOut2);
function mouseOut2() {
  console.log('mouseOut2');
  pr2.style.border = 'none';
}

pr3.addEventListener('mouseover', mouseOver3);
function mouseOver3() {
  pauseTheLoop();
  slide2.style.display = 'block';
  console.log('mouseOver3');
  if(slide1Bool || slide2Bool) {
    pr3.style.border = '1px solid #ccc';
    pr3.style.borderRight = '1px solid #fff';
    pr1.style.border = 'none';
    pr2.style.border = 'none';
    slide1.style.display = 'none';
    slide2.style.display = 'none';
  }
}
pr3.addEventListener('mouseout', mouseOut3);
function mouseOut3() {
  console.log('mouseOut3');
  pr3.style.border = 'none';
}

var slideIndex = 0;
var timer;
carousel();

function carousel() {
  var index;
  var slides = document.getElementsByClassName('mySlides');
  for(index=0;index<slides.length;index++) {
    slides[index].style.display = 'none';
  }
  slideIndex++;
  if(slideIndex > slides.length) {slideIndex = 1;}
  slides[slideIndex-1].style.display = 'block';
  if(slides[0].style.display == 'block'){
    slide1Bool = true;
    console.log('slide1Bool = true');
    pr1.style.border = '1px solid #ccc';
    pr1.style.borderRight = '1px solid #fff';
  } else {
    slide1Bool = false;
    console.log('slide1Bool = false');
    pr1.style.border = 'none';
  }

  if(slides[1].style.display == 'block'){
    slide2Bool = true;
    console.log('slide2Bool = true');
    pr2.style.border = '1px solid #ccc';
    pr2.style.borderRight = '1px solid #fff';
  } else {
    slide2Bool = false;
    console.log('slide2Bool = false');
    pr2.style.border = 'none';
  }

  if(slides[2].style.display == 'block'){
    slide3Bool = true;
    console.log('slide3Bool = true');
    pr3.style.border = '1px solid #ccc';
    pr3.style.borderRight = '1px solid #fff';
  } else {
    slide3Bool = false;
    console.log('slide3Bool = false');
    pr3.style.border = 'none';
  }
  timer = setTimeout(function() {carousel();},1000);
}

function pauseTheLoop() {
  clearTimeout(timer);
  timer = setTimeout(function(){carousel();},1000);
}

＆＃13;

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
.sol_info {font-family:'Noto Sans KR', sans-serif; width:325px;height:220px;}
.s_lgnd {display:inline-block;width:160px;height:30px;vertical-align:middle;position:relative;}
.s_lgnd img {position:absolute;top:0;bottom:0;left:0;right:0;margin: auto;-webkit-box-shadow: 0 9px 6px -5px #ced2dd;-moz-box-shadow: 0 9px 6px -5px #ced2dd;box-shadow: 0 9px 6px -5px #ced2dd;}
.sol_info > a {display:inline-block;text-decoration:none;color:#fff;font-size:13px;background:#00076d;padding:2px 2px 4px;border-radius:6px;text-transform:capitalize;margin-left:15px;margin-right:30px;}

.pr_name {display:inline-block;position:relative;margin-top:10px;/*outline:1px solid pink;*/}
.pr_name > a {width:110px;height:35px;display:block;border-bottom-left-radius:7px; border-top-left-radius:7px;}
.pr_name > a img {display:block;position:relative; top:50%; transform:translateY(-50%);}
.pr_name > a:hover {border:1px solid #ccc !important;border-right:1px solid #fff !important;z-index:12;}
.pr_name > span {position:absolute;display:block;width:1px; height:170px; background:#ccc; left:111px;top:-15px;z-index:-1;}

.pr_img_gal {display:inline-block;padding:0;margin:0;position:absolute; left:135px; top:40px; width:175px; height:165px; overflow:hidden;}
.pr_img_gal > li {margin-left:4px;margin-right:5px;display:none;}

＆＃13;

<div class="sol_info">
  <div class="s_lgnd"><img src="https://res.cloudinary.com/dijc9b7wz/image/upload/v1511402376/sol_info_img_hzzpo5.jpg" alt="Solutins Information"></div><a href="#">go</a>
  <div class="pr_name">
    <a class="pr1" href="#"><img src="https://res.cloudinary.com/dijc9b7wz/image/upload/v1511404178/v_erp_w8eyhx.png" alt="Visual ERP"></a>
    <a class="pr2" href="#"><img src="https://res.cloudinary.com/dijc9b7wz/image/upload/v1511404178/v_aps_htif6m.png" alt="Visual APS"></a>
    <a class="pr3" href="#"><img src="https://res.cloudinary.com/dijc9b7wz/image/upload/v1511404178/v_dbr_kt31ej.png" alt="Visual DBR"></a>
    <span></span>
  </div>
  <ul class="pr_img_gal">
      <li class="mySlides slide1"><a href="#"><img class="slideImg1" src="https://res.cloudinary.com/dijc9b7wz/image/upload/v1511407337/slide1_ibzjlw.jpg" alt="Visual ERP"></a></li>
      <li class="mySlides slide1"><a href="#"><img class="slideImg2" src="https://res.cloudinary.com/dijc9b7wz/image/upload/v1511407337/slide2_ysuho2.jpg" alt="Visual APS"></a></li>
      <li class="mySlides slide1"><a href="#"><img class="slideImg3" src="https://res.cloudinary.com/dijc9b7wz/image/upload/v1511407337/slide3_zcpskg.jpg" alt="Visual DBR"></a></li>
  </ul>
</div>

＆＃13;

slide1.style.display = 'block'; 
slide2.style.display = 'none';
slide3.style.display = 'none';

结构如下：显示图像并在左侧标题边框的旋转木马。对于每个标题，我有事件监听器mouseover和mouseout。到目前为止，他们只在改变边界时才有效。

悬停时，JavaScript图像不会显示

0 个答案: