js 완벽한 사진 뉴스 회전 효과, Tencent Dayue.com 홈페이지의 사진 회전에서 수정됨_javascript 기술

배경
내가 원하는 완벽한 사진 뉴스 회전 효과:
1. 뉴스 사진, 뉴스 제목, 회전 색인이 있습니다
2. 색인으로 마우스를 이동하지 않으면 사진이 자동으로 전환됩니다
3.인덱스 위로 마우스를 이동하면 기존 사진이 표시되며 폴링이 중지됩니다
4. 인덱스에서 마우스를 멀리 이동하면 폴링이 계속됩니다
5. 타사 파일, 바람직하게는 Native js에 의존하지 않습니다.)

프로세스
많은 이미지 폴링 효과를 찾았지만 항상 내 요구 사항과 다소 다르며 완벽할 수 없습니다. 기능적이지도 않고 너무 화려합니다. 직접 개발해보고 싶었으나 사소한 일로 인해 지연이 발생하여 시작하지 못하게 되었습니다.
가끔 텐센트 다유닷컴에서 사진뉴스를 보니 제가 원하는 효과 같은 느낌이 드네요. 그러나 신중한 테스트 결과 요구 사항 3을 충족하지 못하는 것으로 나타났습니다. 즉, 폴링 중지 메커니즘이 없습니다. 생각해 보면 내가 직접 수정하는 편이 나을 수도 있고 내 요구 사항에 거의 부합할 것입니다.
아이디어: 페이지가 로드되고 사진 폴링이 시작됩니다. 관련 사진을 표시하고 폴링을 지우려면 해당 색인으로 마우스를 이동하세요. 폴링을 재개하려면 마우스를 색인에서 멀리 이동하십시오.
현재 활성화된 이미지 인덱스 ID를 기록하려면 전역 변수 id를 정의하세요. 회전할 때마다 이 ID가 업데이트됩니다. 마우스가 인덱스에서 멀어지면 이 ID로 폴링을 시작합니다.

코드 복사 코드는 다음과 같습니다.

焦点图文字背景

href="/a/20111119/000002.htm">
广州花都拆违遭遇碎瓶煤气罐

焦点图文字背景

href="/a/20111119/000028.htm">
一颗“钉子”放弃工作保祖屋5年

焦点图文字背景

href="/a/20111117/000250.htm">
爸爸，不要把我丢下

焦点图文字背景

href="/a/20111119/000004.htm">
杨幂最新杂志写真 魅惑优雅

• 1


• 2


• 3


• 4

<script> <br>//마우스를 위로 이동하는 동작입니다. 현재 사진을 표시하고 폴링을 지웁니다. <br>function adchangea(adid) { <br>dochange(adid); <br>clearTimeout(adisround) <br>} <br>//자동 폴링<br>function adchangea2(adid) { <br>dochange( adid); <br>var adbigimg = document.getElementById("adpica").getElementsByTagName("div"); <br>if ((adnext = adid 1) > adbigimg.length) adnext = 1; = setTimeout('adchangea2(' adnext ')', 3000); <br>} <br>//현재 그림 표시 <br>function dochange(adid) { <br>id = adid <br>var adbigimg = document.getElementById("adpica").getElementsByTagName("div"); <br>var adsmallimg = document.getElementById("adtipa").getElementsByTagName("li")<br>for (var adi = 0; adi &lt ; adbigimg.length; ) { <br>adbigimg[adi].className = "hidden"; <br>adsmallimg[adi].className = "" <br>} <br>adbigimg[adid - 1].className = "show"; <br>adsmallimg[adid - 1].className = "current"; <br>} <br>var adisround = setTimeout("adchangea2(2)", 3000); /현재 활성화 ID <br>//마우스가 ul 블록에서 멀어지면 폴링이 재개됩니다. <br>functionchange() { <br>adchangea2(id) <br>} <br></script>