Home > Developer > Web Develop
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
