For cainiao like me, I just got in touch with the project. Let me use plug-ins. In fact, I said plug-ins are too bloated and don't want to be used. It is better to say that I don't understand those plug-ins... --(I prefer to write code that I can understand. It is also a learning process)
So I spent some time writing a demo on my own, and the effect was very simple. (Spray -_-)
I will directly paste the code below.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "viewport" content = "width = 1024"/>
<Meta name = "description" content = ""/>
<Meta name = "Keywords" content = ""/>
<Title> cfjc </title>
<! -- [If lt IE 9]> <script type = "text/javascript" src = "http://www.ruifox.com/resouce/js/company/html5.js"> </script> <! [Endif] -->
<Style type = "text/css">
. Left {float: left ;}
. Right {float: right ;}
. Clearfloat: after {display: block; clear: both; content: ""; visibility: hidden; height: 0}
. Clearfloat {zoom: 1}
Body {margin: 0; padding: 0 ;}
Ul {margin: 0; padding: 0 ;}
. Wp {width: 1000px; margin: 0 auto; position: relative ;}
Li {list-style: none ;}
A {text-decoration: none ;}
A: hover {text-decoration: underline ;}
. Nobrder {border-right: none ;}
# Banner {width: 100%; height: 500px; position: relative ;}
# Banner ul {position: relative; min-width: 4000px; height: 500px; z-index: 0}
. Bnnwp {position: relative; overflow: hidden; width: 100%; z-index: 40 ;}
# Banner ul li {float: left; min-width: 1000px; height: 500px ;}
# Banner ul. b1 {background: #423134 url (../images/banner01.jpg) no-repeat center ;}
# Banner ul. b2 {background: # 45239A ;}
# Banner ul. b3 {background: # 45123A ;}
# Banner ul. b4 {background: # 46193A ;}
# Banner. nextbtn {position: absolute; top: 40%; right: 50px; z-index: 43}
# Banner. prvebtn {position: absolute; top: 40%; left: 50px; z-index: 43}
. Nextbtn {width: 22px; height: 43px; background: url (.. /images/next_hover.png) no-repeat; cursor: pointer; font-size: 28px; color: # fff ;}
. Nextbtn: hover {background: url (../images/next.png) no-repeat ;}
. Prvebtn {width: 22px; height: 43px; background: url (.. /images/prev.png) no-repeat; cursor: pointer; font-size: 28px; color: # fff ;}
. Prvebtn: hover {background: url (../images/prev_hover.png) no-repeat ;}
# Bancontr {position: absolute; bottom: 20px; right: 100px; z-index: 42 ;}
. Heighlight_tip span {display: inline-block; * zoom: 1; font-size: 28px; color: # fff; * display: inline; width: 14px; height: 14px; border-radius: 50%; text-indent: 6px; color: # fff; background: # 61676C; line-height: 21px; margin-left: 10px; cursor: pointer; behavior: url (.. /images/pie/PIE. htc );}
. Heighlight_tip. current {background: #006ba4; no-repeat ;}
</Style>
</Head>
<Body>
<Section id = "banner">
<Div class = "bnnwp"> <ul class = "clearfloat">
<Li style = "background: url (& quot; prop) no-repeat center"> </li>
<Li style = "background: url (& quot; prop) no-repeat center"> </li>
<Li style = "background: url (& quot; prop) no-repeat center"> </li>
<Li style = "background: url (& quot; prop) no-repeat center"> </li>
</Ul>
</Div>
<Div class = "prvebtn"> </div>
<Div class = "nextbtn"> </div>
<Div id = "bancontr">
<Div class = "heighlight_tip">
<Span class = "current"> </span>
<Span> </span>
<Span> </span>
<Span> </span>
<Div style = "clear: both"> </div>
</Div>
</Div>
</Section>
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-1.8.3.min.js"> </script>
<Script type = "text/javascript">
Var index = "";
Var timer = "";
Var index = "";
Var leng = $ ("li"). size ();
TestLiw (); // banner -- UL width setting; used for adaptive screen width!
$ (Window). resize (function (){
TestLiw ();
});
Function testLiw (){
Lwith = $ ("body"). width ();
Xl = (leng + 2) * Lwith;
$ ("# Banner ul"). width (xl );
$ ("# Banner ul li"). width (Lwith );
ShowpicSet (index );
}
Var sWidth = $ ("li"). width (Lwith );
$ ("# Banner ul" ).css ("width", Lwith * (leng + 2); // you can specify the ul width;
$ ("# Banner ul"). prepend ($ ("# banner ul li: last"). clone (); // you know,
$ ("# Banner ul"). append ($ ("# banner ul li: eq (1)"). clone ());
$ ("# Banner ul" ).css ("left",-Lwith + "px"); // initialize the position of the slide!
$ (". Heighlight_tip span"). mouseover (function (){
Index = $ (". heighlight_tip span"). index (this );
Showpic (index );
}). Eq (0). click (); // class = "current" initialize the button location!
$ (". Prvebtn"). click (function () {prve ();});
$ (". Nextbtn"). click (function () {next ();});
Function next (){
If (index = leng-1 ){
Index = 0;
Showlast ();
} Else {
Index ++;
Showpic (index) ;}}; // next page
Function prve (){
If (index = 0) {index = leng-1;
Showfirst ();
}
Else {
Index --;
Showpic (index) ;}// Previous Page
Function showpicSet (index) {// I don't know why I wrote this function below it. It is used to adjust the width of the screen itself during the slide playback process.
Var nowLeft = (-index-1) * Lwith;
$ (". Bnnwp ul" developer.stop(true,falseapps.css ('left', nowLeft );
}
Function showpic (index ){
Var nowLeft = (-index-1) * Lwith;
$ ("# Banner ul"). stop (true, true). animate ({'left': nowLeft}, 700 );
$ (". Heighlight_tip span"). removeClass ("current"). eq (index). addClass ("current ");
}
Function showlast () {// The last function to jump to the first one
Var nowLeft = (-leng-1) * Lwith;
$ ("# Banner ul"). stop (true, false). animate ({'left': nowLeft}, 700, function (){
$ ("# Banner ul" ).css ('left',-Lwith + 'px ');
})
$ (". Heighlight_tip span"). removeClass ("current"). eq (0). addClass ("current ");
}
Function showfirst () {// The first function jumps to the last function
Var nowleft = (-leng) * Lwith;
$ ("# Banner ul"). stop (true, false). animate ({'left': "0px"}, 700, function (){
$ ("# Banner ul" ).css ('left', nowleft + 'px ');
})
$ (". Heighlight_tip span"). removeClass ("current"). eq (leng-1). addClass ("current ");
}
$ ("# Banner"). hover (function (){
ClearInterval (timer );},
Function () {timer = window. setInterval (function () {next () ;}, 6000) ;}). mouseout ();
</Script>
</Body>
</Html>
// I think the code is too long to write. Please give me some comments and help me identify some mistakes .. --
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
