Background
I want the perfect picture news rotation effect:
1. Have news picture, have news title, have rotate index
2. The mouse has not moved to the index, the picture automatically switches
3. Move mouse over index, display existing picture, polling stop
4. Move the mouse to open the index, polling continue
5. Concise, lightweight (not dependent on any third party files, preferably native JS)
Process
Look for a lot of pictures poll effect, and my request always some discrepancy, not perfect. Not functional, just too much fancy. I wanted to develop one for myself, and I was slow to start because of trifles.
Occasionally see Tencent Big Yue Net picture news, feeling is I want effect. But carefully tested, found that it does not meet the requirements of 3. There is no polling stop mechanism. Think about it or change it yourself, and your request is almost.
Idea: The page loads, the picture starts polling. Mouse over the index, display related pictures, clear polling. The mouse moves away from the index and resumes polling.
Define a global variable ID to record the currently active picture index ID. Update this ID each time you rotate. After the mouse has moved the index, start polling with this ID.
Copy Code code as follows:
<link href= "Http://news.qq.com/base2011/css/qq.css" rel= "stylesheet" type= "Text/css" >
<style>
. turn
{
height:212px;
Float:left;
Overflow:hidden;
position:relative;
}
. Turn #adpica
{
width:382px;
height:210px;
Overflow:hidden;
}
. Turn #adpica img
{
width:380px;
height:210px;
Float:left;
Overflow:hidden;
}
. Turn #adtipa
{
height:16px;
Position:absolute;
right:8px;
bottom:8px;
}
. Turn #adtipa ul Li
{
width:19px;
height:19px;
line-height:19px;
Float:left;
Text-align:center;
Display:inline;
margin:0 1px;
Cursor:pointer;
Color: #fff;
Background: #000;
}
. Turn #adtipa ul li.current
{
Color: #fff;
Background: #cc0000;
}
. Turn. Hidden
{
Display:none;
}
. turn. Show
{
Display:block!important;
}
#adpica span
{
Position:absolute;
bottom:0;
left:0;
Color: #fff;
font-size:14px;
height:33px;
width:380px;
Filter:alpha (opacity=70);
opacity:0.7;
Background: #000;
Text-indent: -9999em;
}
#adpica P
{
Position:absolute;
bottom:0;
left:0;
Color: #fff;
font-size:14px;
height:33px;
line-height:33px;
width:285px;
padding-left:5px;
Font-weight:bold;
}
</style>
<body>
<div class= "Focus" >
<!--focus-->
<div class= "Turn" >
<div id= "Adpica" >
<div class= "Show" >
<a href= "/a/20111119/000002.htm" >
</a><span> Focus chart Text background </span><p
href= "/a/20111119/000002.htm" >
Guangzhou Huadu break up encounter broken bottle gas tank </p>
<!--[if! ie]>|xgv00|9f7171a0d436636945e9c21690c2ece8<! [endif]-->
</div>
<div style= "Display:none" class= "hidden" >
<a href= "/a/20111119/000028.htm" >
</a><span> Focus chart Text background </span><p
href= "/a/20111119/000028.htm" >
A "nail" to give up work Baozu house 5 years </p>
<!--[if! ie]>|xgv00|d23979cbd54ef39a84fe343a81550dff<! [endif]-->
</div>
<div class= "hidden" style= "display:none;" >
<a href= "/a/20111117/000250.htm" >
</a><span> Focus chart Text background </span><p
href= "/a/20111117/000250.htm" >
Dad, don't leave me behind </p>
<!--[if! ie]>|xgv00|93b927379aeaca72b86d66dbb2e57614<! [endif]-->
</div>
<div class= "hidden" style= "display:none;" >
<a href= "/a/20111119/000004.htm" >
</a><span> Focus chart Text background </span><p
href= "/a/20111119/000004.htm" >
Yang Latest magazine photo charm </p> Elegance
<!--[if! ie]>|xgv00|ca04e9980d08c91f55db9ea4ee64489c<! [endif]-->
</div>
</div>
<div id= "Adtipa" >
<ul onmouseout= "Change ()" >
<li class= "Current" onmouseover= "Adchangea (1)" >1 </li>
<li class= "" Onmouseover= "Adchangea (2)" >2 </li>
<li class= "" Onmouseover= "Adchangea (3)" >3 </li>
<li class= "" Onmouseover= "Adchangea (4)" >4</li></ul>
</div>
<script>
Mouse move over the action. Displays the current picture and clears the polling.
function Adchangea (adid) {
Dochange (Adid);
Cleartimeout (Adisround);
}
Automatic polling
function Adchangea2 (adid) {
Dochange (Adid);
var adbigimg = document.getElementById ("Adpica"). getElementsByTagName ("div");
if ((Adnext = adid + 1) > adbigimg.length) adnext = 1;
Adisround = settimeout (' adchangea2 (' + adnext + ') ', 3000);
}
Show current picture
function Dochange (adid) {
id = adid;
var adbigimg = document.getElementById ("Adpica"). getElementsByTagName ("div");
var adsmallimg = document.getElementById ("Adtipa"). getElementsByTagName ("Li");
for (var adi = 0; adi < adbigimg.length; adi++) {
Adbigimg[adi].classname = "hidden";
Adsmallimg[adi].classname = "";
}
Adbigimg[adid-1].classname = "show";
Adsmallimg[adid-1].classname = "current";
}
var adisround = settimeout ("ADCHANGEA2 (2)", 3000);
var id;//current Activation ID
When the mouse moves off the UL block, resumes polling
function Change () {
ADCHANGEA2 (ID);
}
</script>
</div>
<!--[if! ie]>|xgv00|495624c0694083cdfaabbc0457f4f14e<! [endif]-->
<!--/focus-->
</div>
</body>
