A slide of JavaScript demo every day. Key knowledge points: event and demoevent
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> Document </title>
<Style type = "text/css">
Body {
Margin: 0;
}
# Wrap {
Margin: 100px auto;
Position: relative;
Width: 400px;
Height: 300px;
Border: 5px solid #000;
Overflow: hidden;
}
# List {
Position: absolute;
Left: 0;
Top: 0;
Width: 400%;
List-style: none;
Padding: 0;
Margin: 0;
}
# List li {
Width: 25%;
Float: left;
}
Img {
Vertical-align: top;
}
# Navs {
Position: absolute;
Left: 0;
Bottom: 30px;
Height: 12px;
Width: 100%;
Text-align: center;
}
# Navs {
Display: inline-block;
Width: 12px;
Height: 12px;
Vertical-align: top;
Background: # fff;
Margin: 0 5px;
Border-radius: 6px;
}
# Navs. active {
Background: # f60;
}
</Style>
</Head>
<Body>
<! --
Exercise:
1. automatic playback
2. Add the previous and next Functions
3. Add a click event to the navigation bar below
-->
<Div id = "wrap">
<Ul id = "list">
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
<Nav id = "navs">
<A href = "javascript:;" class = "active"> </a>
<A href = "javascript:;"> </a>
<A href = "javascript:;"> </a>
<A href = "javascript:;"> </a>
</Nav>
</Div>
<Script type = "text/javascript" src = "startmove. js"> </script>
<Script type = "text/javascript">
(Function (){
Var wrap = document. querySelector ('# wrap ');
Var list = document. querySelector ('# list ');
Var navs = document. querySelectorAll ('# navs ');
Var wrapW = css (wrap, "width ");
List. onmousedown = function (e ){
ClearInterval (list. timer); // clear the animation
Var startMouseX = e. clientX;
Var elX = css (list, "left ");
Document. onmousemove = function (e ){
Var nowMouseX = e. clientX;
Css (list, "left", nowMouseX-startMouseX + elX );
};
Document. onmouseup = function (e ){
Document. onmousemove = null;
Document. onmouseup = null;
Var left = css (list, "left ");
Var now =-Math. round (left/wrapW); // obtain the following figures:
Console. log (now );
Now = now <0? 0: now;
Now = now> navs. length-1? Navs. length-1: now;
Left = now * wrapW; // calculate the distance to the left of the image.
StartMove ({
El: list,
Target :{
Left:-left
},
Type: "easeOutStrong ",
Time: 800
});
For (var I = 0; I <navs. length; I ++ ){
Navs [I]. className = "";
}
Navs [now]. className = "active ";
};
Return false; // block the default event (this prevents the image from being selected)
};
})();
</Script>
</Body>
</Html>
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
