Normal Tab + AutoPlay function + forward/backward button native JS

Source: Internet
Author: User

Today made slideshow, the main features include: Normal tab, forward/Backward play button, forward? Play back function, auto play function

There is no problem with simple tab functionality, but there are a variety of problems with adding features.

Problems encountered:
1 Subscript problem
2 Normal tabs conflict with the forward/backward feature and can be played forward/backward, but there is a problem when you want to implement the normal tab.
3 after adding the forward/backward buttons, the HTML layout moves down
4 Add the Forward/backward button when I use the IMG tag, obviously this does not apply, can not be well adjusted vertically centered
5 when the mouse on the Forward/backward button, flashing, click on the time also flashing, but also click on the invalid

Workaround:
1 Closed Space
2 General Options Cajao ul under the Li, first classname= '; and then let Classname= ' on '; but I want the normal tab to be combined with the forward/backward function, using oul.style.left=-now*640+ ' px '; At this time can not let Classname= ', and then let Classname= ' on ', but let change the CSS in the UL Li block, and then with the oul.style.left=-now*640+ ' px ', (img image width) Normal tab is to let Li single display, my is to let the UL mobile display
3 The main reason is that I used the float, and later changed to use positioning to achieve the left float and center of the button, and then higher level
4 Change the IMG tag to a background map, which solves the problem of vertical centering.
5 originally I thought it was the event bubbling, and later I changed to show the forward/backward button when the mouse moved into the Div, and add the mouse to move forward/backward button events, OK

Code:
<!--html-->
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


<meta http-equiv= "Content-type" content= "text/html; charset=utf-8" />
<title> Slideshow </title>
<link type= "text/css" rel= "stylesheet" href= ". /css/slide. css "/>
<script src= ". /js/slide. js "></script>
<script src= ". /js/move.js "></script>

<body>
<div id= "Div1" >
<a href= "javascript:;" id= "prev" ></a>
<a href= "javascript:;" id= "Next" ></a>
<ul id= "UL1" >
<li class= "on" ><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
</ul>
<ol id= "Ol1" >
<li class= "on" ><a href= "javascript:;" >1</a></li>
<li><a href= "javascript:;" >2</a></li>
<li><a href= "javascript:;" >3</a></li>
<li><a href= "javascript:;" >4</a></li>
<li><a href= "javascript:;" >5</a></li>
<li><a href= "javascript:;" >6</a></li>
</ol>
</div>
</body>

/ * CSS Document * /
*{margin:0;padding:0;list-style:none;}
#div1 {position:relative; overflow:hidden; width:640px; height:270px; margin:50px Auto;}
#div1 ul{position:relative; left:0; float:left;width:3840px; height:100%;}
#div1 ul li{float:left;}
#div1 ol{position:absolute; bottom:20px; left:40%;}
#div1 ol li{float:left; width:20px; height:20px; background:red; margin-left:10px; text-align:center; cursor: pointer;}
#div1 ol li a{text-decoration:none; color: #fff;}
#div1 ol li.on{Background:blue;}
#prev {position:absolute; left:0; top:105px; width:45px; height:60px; display:none; z-index:100; background: #ccc URL (.. /image/btn_l.png) No-repeat Center; opacity:0.8;}
#next {position:absolute; right:0; top:105px; width:45px; height:60px; display:none; z-index:100; background: #ccc URL (.. /image/btn_r.png) No-repeat Center; opacity:0.8;}
#prev. On, #next. on{display:block;}

//JavaScript Document
window.onload=function () {
var Ool=document.getelementbyid (' Ol1 ');
var Oul=document.getelementbyid (' Ul1 ');
var Odiv=document.getelementbyid (' Div1 ');
var Auli=oul.children;
var Aoli=ool.children;
var now=0;
var timer=null;

//Click the Play tab
For (var i=0;i<aoli.length;i++)
{
(function (index) {
aoli[index].onclick=function () {

For (var i=0;i<aoli.length;i++)
{now=index;
aoli[i].classname= ";
//auli[i].classname= ";
}
aoli[index].classname= ' on ';
//auli[index].classname= ' on ';
oul.style.left=-now*640+ ' px ';
};
}) (i)
}

//forward/back buttons
var oprev=document.getelementbyid (' prev ');
var Onext=document.getelementbyid (' Next ');
oul.onmouseover=oprev.onmouseover=onext.onmouseover=function () {
//If the light is Oul.onmouseover, the oprev.onmouseover=onext.onmouseover will blink when it is moved up/clicked
oprev.classname= ' on ';
onext.classname= ' on '
};
oul.onmouseout=function () {
oprev.classname= ";
onext.classname= "
};

//Forward Playback tab
oprev.onclick=function () {
now--;
if (now==-1) now=aoli.length-1;
For (var i=0;i<aoli.length;i++)
{
aoli[i].classname= ";
auli[i].classname= ' on ';
}
aoli[now].classname= ' on ';
oul.style.left=-now*640+ ' px ';
};

//Play back tab
onext.onclick=function () {
now++;
if (now==aoli.length) now=0;
For (var i=0;i<aoli.length;i++)
{
aoli[i].classname= ";
//auli[i].classname= ' on ';
}
aoli[now].classname= ' on ';
oul.style.left=-now*640+ ' px ';
};

//Auto Back play tab
AutoPlay ();
odiv.onmouseover=function () {
clearinterval (timer);
};
odiv.onmouseout=function () {
AutoPlay ();
};

function AutoPlay ()
{
Timer=setinterval (function () {
now++;
if (now==aoli.length) now=0;
For (var i=0;i<aoli.length;i++)
{
aoli[i].classname= ";
//auli[i].classname= ' on ';
}
aoli[now].classname= ' on ';
oul.style.left=-now*640+ ' px ';
},1300);
}
};

Normal Tab + AutoPlay function + forward/backward button native JS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.