Home > Developer > Web Develop
Work today to do design headaches, wrote a carousel map to practice practiced hand, first wrote a manual click on the rotation of the carousel map, then I will slowly continue to write the automatic Carousel diagram and mouse hover pictures stop moving the carousel diagram and so on ~~~~~~ although today my birthday, but the code is still to write, can not find excuses to relax themselves, In the same place step back ~ ~ ~
Here's a look at the final manual click Carousel Effect:
hahaha, there is no see my four pictures are handsome oh ~ ~ ~ to find a pleasing picture really not easy, so as to arouse me to write the code of the Carousel map desire, write out can click the button to turn their brand ~ ~ ~
First, the principle of explanation
(1) The first is the carousel diagram of the architecture, I used a most outside the big div wrapped two small div, a small div inside put four pictures, the other small div inside put four number of buttons
(2) The width of the outermost large div is set to the width of the picture, beyond the width of the large div need to be hidden, but for the picture of the small div set width of 2000px, a little more convenient four picture left floating layout
(3) When the number button clicks, get the index value of the button, so that you can know how much width each picture left to move
Well, I think the text is a little hint of sadness, I guess you also do not understand, I idle bored to do a funny schematic diagram, I want to enlarge the Recruit ~ ~ ~
As can be seen from the above figure, four pictures are floating up the horizontal layout, when the number button is clicked, the image will be the number of buttons to the index value of the image to the width of the parent frame to display, because the parent frame outside the picture will be hidden ~~~~~ if you still can't understand the principle, I can only spit blood. ~
Second, the following see the main procedure
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title>Carousel Diagram ① (manual click Carousel)</title> <Linktype= "Text/css"rel= "stylesheet"href= "Css/layout.css" /> </Head> <Body> <Divclass= "Slideshow"> <!--Picture layout Start - <ul> <Li><ahref="#"><imgsrc= "Img/picture01.jpg" /></a></Li> <Li><ahref="#"><imgsrc= "Img/picture02.jpg" /></a></Li> <Li><ahref="#"><imgsrc= "Img/picture03.jpg" /></a></Li> <Li><ahref="#"><imgsrc= "Img/picture04.jpg" /></a></Li> </ul> <!--end of picture layout - <!--button layout start - <Divclass= "Shownav"> <spanclass= "Active">1</span> <span>2</span> <span>3</span> <span>4</span> </Div> <!--Button Layout End - </Div> <Scriptsrc= "Js/jquery-1.11.3.js"></Script> <Scriptsrc= "Js/layout.js"></Script> </Body></HTML>
The above layout I already explained in the principle, the interest oneself sees the principle ~ ~ ~ ~
Third, CSS style
*{margin:0; padding:0;} ul{List-style:none;}. slideshow{width:346px; height:210px; /* is actually the height of the picture */border:1px #eeeeee solid; margin:100px Auto; position:relative; Overflow:hidden; /* Here you need to hide the picture portion of the overflow frame */}.slideshow ul{width:2000px; position:relative; */* Here to note relative: objects are not stackable, but will be based on Left,right,top,bottom and other attributes in the normal document flow offset position, if not this attribute, the picture will not move around */}.slideshow ul li{Float:left; /* Let the four pictures float to the left, forming a sideways layout that is easy to move left when the button is clicked */width:346px;}. Slideshow. shownav{/* Layout with absolute positioning to the digital button */position:absolute; right:10px; bottom:5px; Text-align:center; font-size:12px; line-height:20px;}. Slideshow. Shownav span{Cursor:pointer; Display:block; Float:left; width:20px; height:20px; Background: #ff5a28; margin-left:2px; Color: #fff;}. Slideshow. Shownav. active{background: #b63e1a;} The above style I have notes out very important place, I believe that the foundation is easy to understand, just at the beginning I was in. Slideshow ul style inside forgot to write position:relative; cause behind the jquery program picture has been unable to move, delayed a long time to find this error, I hope you can pay attention to this place ~~~~~~~
Iv. jquery Procedures
$ (document). Ready (function () { var slideshow=$ (". Slideshow"), //Gets the name of the outermost frame ul=slideshow.find ("ul"), shownumber=slideshow.find (". Shownav span"),//Get button onewidth=slideshow.find ("ul li"). EQ (0). width (); Gets the width of each picture Shownumber.on ("click", Function () { //For each button binds a click event $ (this). AddClass ("active"). Siblings ( ). Removeclass ("active"); When the button is clicked, the button is highlighted, and the other button highlighting state is removed from the var index=$ (this). index (); Gets which button is clicked, that is, the index value of the clicked button ul.animate ({ "left":-onewidth*index, //Note the Left property is used here, So the UL style inside need to set position:relative; Let UL left n the width of the image size, n according to the button indexed by the clicked Index Value})}) The amount, is not feel very simple, is also a few words to take care of the Carousel Effect of manual Click, the above program needs to note that the left property is moved, so negative ~~~~~~~
Write here I was really out of my wits, if you do not understand the words, I suggest you go to see the basic layout of the Web page and jquery knowledge, I Caishuxueqian can only be written like this, convenient after the same as I learn younger brother learn to see it ~~~~~~~~ tomorrow continue to write automatic carousel diagram ~~~~~
jquery effects (3)-Carousel Diagram ① (manual click Carousel)
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
