js perfect picture news rotation effect, modified from the picture rotation on the homepage of Tencent Dayue.com_javascript skills

Background
The perfect picture news rotation effect I want:
1. There are news pictures, news titles, and a rotation index
2. The pictures automatically switch when the mouse is not moved to the index
3 .Move the mouse over the index, display the existing pictures, and the polling will stop
4. Move the mouse away from the index, and the polling will continue
5. Simple, clear, and lightweight (does not rely on any third-party files, preferably Native js)

Process
I have found many image polling effects, but they are always somewhat different from my requirements and cannot be perfect. Either it's not functional, it's just too fancy. I wanted to develop one myself, but due to delays in trivial matters, I have been unable to start.
Occasionally I see picture news from Tencent Dayue.com, which feels like the effect I want. However, after careful testing, it was found that it did not meet requirement 3. That is, there is no polling stopping mechanism. Thinking about it, I might as well modify it myself, and it will be almost in line with my requirements.
Idea: The page loads and pictures start polling. Move the mouse to the index to display related pictures and clear polling. Move the mouse away from the index to resume polling.
Define a global variable id to record the currently activated image index id. Each time it is rotated, this id is updated. After the mouse moves away from the index, start polling with this id.

Copy code The code is as follows:

焦点图文字背景

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>//The action of moving the mouse over. Show current picture, clear polling. <br>function adchangea(adid) { <br>dochange(adid); <br>clearTimeout(adisround); <br>} <br>//Automatic polling<br>function adchangea2(adid) { <br>dochange (adid); <br>var adbigimg = document.getElementById("adpica").getElementsByTagName("div"); <br>if ((adnext = adid 1) > adbigimg.length) adnext = 1; <br> adisround = setTimeout('adchangea2(' adnext ')', 3000); <br>} <br>//Display the current picture <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; adi ) { <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); <br>var id;/ /Current activation id <br>//When the mouse moves away from the ul block, polling is resumed <br>function change() { <br>adchangea2(id); <br>} <br></script>