When it comes to slider, css + js has always been used in combination to achieve relevant switching effects. I have heard of you discussing how to use html5 + css3, but I have never implemented it myself. Okay, I have time to come and play css3 this time. If you are interested, you can understand it. Well, the last time I said I had to hurry up and make up a few articles, the result of which was a calm loss. I just published one article in the last month, which is really depressing. I found that I have never been able to get out of time recently. It is basically the arrangement for connecting a project to another project. I am not able to find a proper topic when I am idle, that is, when there is a tangle of topics, you cannot find time. Therefore, I decided to summarize the problems I had struggled with in a period of time, and conduct in-depth research one by one when I was idle, and then sort them into articles to share them.
When talking about slider, css + js has always been used in combination to achieve the switching effect. I have heard of you discussing how to use html5 + css3, but I have never implemented it myself. Okay, this time I have time to play css3. In fact, I was also attracted by a piece of message on Weibo. I liked the effects of others, and then I had the impulse to do it.
I,
The effect of using js in the past does not seem to be much different, but the overall feeling is very elegant. Well, what makes css3 powerful is that I write very little code to achieve more complex results. However, this example is not perfect, that is, when two images are switched, if there is an image between them, we will still see it during the execution of the css3 animation, relatively weak. But think about it. This is the result of pure css3. The complicated html structure changes implemented by js cannot be seen here, so it is difficult to simply use css3 to implement the above results.
Ii. html Structure
The Code is as follows:
Title1
Description1
Title2
Description2
Title3
Description3
Title4
Description4
Title5
Description5
The above code is the main html structure, which contains an input radio group. You can see it as a hub here, in this example, it plays a key role (this is also why I do not want to hide it in the example, the real hero should not be the hero behind the scenes ).
The following scyclers contains the images to be displayed. It seems to be a sliding door, and different images are displayed by controlling the inner's margin-left.
Controls is the switching Arrow between the left and right sides of the image. Don't worry about the design of five. It seems that only two of them are available. In this example, js is never used for switching.
The last active button is the click button under the image. You can click to directly select the image you want to browse. You can also enrich the structure to design a thumbnail effect.
Iii. css style sheets
The Code is as follows:
@ Charset UTF-8;
/* Common */
Body {background: # ddd; overflow-x: hidden ;}
# Bd {width: 960px; margin: 100px auto; max-width: 960px ;}
/* Module: scyclers */
# Sregistrers {
Border-radius: 5px;
Box-shadow: 1px 1px 4px #666;
Padding: 1%;
Background: # fff;
}
# Overflow {
Width: 100%;
Overflow: hidden;
}
# Sregistrers. inner {
Width: 500%;
Transiton: all 1 s linear;
-Webkit-transition: all 1 s linear;
}
# Sregistrers article {
Float: left;
Width: 20%;
}
# Sregistrers article. info {
Position: absolute;
Opacity: 0;
Padding: 30px;
Color: #666;
Font-family: Arial;
Transition: opacity 0.1 s outgoing-out;
-Webkit-transform: translateZ (0 );
-Webkit-transition: opacity 0.1 s transfer-out;
}
# Sregistrers article. info h1 {
Font-size: 22px;
Font-weight: bold;
Margin: 0 0 5px;
}
# Sregistrers article. info {
Color: #666;
Text-decoration: none;
}
/* Module: controls */
# Controls {
Height: 50px;
Width: 100%;
Margin-top:-25%;
}
# Controls label {
Display: none;
Width: 50px;
Height: 50px;
Opacity: 0.3;
Cursor: pointer;
}
# Controls label: hover {
Opacity: 1;
}
/* Module: active */
# Active {
Width: 100%;
Margin-top: 23%;
Text-align: center;
}
# Active label {
Display: inline-block;
Width: 10px;
Height: 10px;
Border-radius: 5px;
Background: # bbb;
Border-color: #777;
}
# Active label: hover {
Background: # ccc;
}
/* Input checked change style */
# Slider1: checked ~ # Active label: nth-child (1 ),
# Slider2: checked ~ # Active label: nth-child (2 ),
# Slider3: checked ~ # Active label: nth-child (3 ),
# Slider4: checked ~ # Active label: nth-child (4 ),
# Slider5: checked ~ # Active label: nth-child (5 ){
Background: #333;
}
# Slider1: checked ~ # Controls label: nth-child (5 ),
# Slider2: checked ~ # Controls label: nth-child (1 ),
# Slider3: checked ~ # Controls label: nth-child (2 ),
# Slider4: checked ~ # Controls label: nth-child (3 ),
# Slider5: checked ~ # Controls label: nth-child (4 ){
Display: block;
Float: left;
Background: url (../img/prev.png) no-repeat;
Margin-left:-70px;
}
# Slider1: checked ~ # Controls label: nth-child (2 ),
# Slider2: checked ~ # Controls label: nth-child (3 ),
# Slider3: checked ~ # Controls label: nth-child (4 ),
# Slider4: checked ~ # Controls label: nth-child (5 ),
# Slider5: checked ~ # Controls label: nth-child (1 ){
Display: block;
Float: right;
Background: url (../img/next.png) no-repeat;
Margin-right:-70px;
}
# Slider1: checked ~ # Sregistrers article: nth-child (1). info,
# Slider2: checked ~ # Sregistrers article: nth-child (2). info,
# Slider3: checked ~ # Sregistrers article: nth-child (3). info,
# Slider4: checked ~ # Sregistrers article: nth-child (4). info,
# Slider5: checked ~ # Sregistrers article: nth-child (5). info {
Opacity: 1;
Transition: all 0.6 s bytes-out 1 s;
-Webkit-transition: all 0.6 s bytes-out 1 s;
}
# Slider1: checked ~ # Sregistrers. inner {
Margin-left: 0;
}
# Slider2: checked ~ # Sregistrers. inner {
Margin-left:-100%;
}
# Slider3: checked ~ # Sregistrers. inner {
Margin-left:-200%;
}
# Slider4: checked ~ # Sregistrers. inner {
Margin-left:-300%;
}
# Slider5: checked ~ # Sregistrers. inner {
Margin-left:-400%;
}
Well, I admit that the above css code is really complicated, but it really achieves a Very dazzling effect, and I was impressed by the huge magic of css3 when I wrote it...
The code in front of this section is mainly used to design the slider structure, including some rounded corners and shadow beautification designs. The second half mainly involves some animation effects to achieve some dynamic effects when switching images or switching control buttons. However, the most important thing is the use of the bottom css3 selector, through which the image switching function is realized. I really think that selector plays a very important role in the example, because it is the knowledge I used to learn about css3. I always think that css3 is powerful in rounded corner, shadow, deformation, and animation, but this code really tells us how important the selector is in css3. In some complex logic, the use of these css3 selectors can achieve unimaginable results.
Iv. Principle of slider implementation
When I read the above Code for the first time, you must be the same as I did at the beginning. I don't believe this code can achieve the effect of slider.
Let me analyze the implementation principles.
As I mentioned above, the radio group at the top is very important and is the pivot of slider implementation. Yes, it is.
To implement a slider, you only need to implement two types of switching. That is, when you click the control button, the image is switched. At the same time, ensure that all the control buttons are correctly displayed during image switching.
In this example, we use label as the control button, article contains the image, and inner as the image container.
Simply put, the label and article cannot be connected, and the status information of the label cannot be reflected in the selection of the article. Unless there is something that can record the Switch Status of the label, and then use some means to select an image of the corresponding order for display.
Okay, now you understand why the radio group is the key to implementing the slider. Yes, it appears to record the click status of the label.
We use the for Attribute of the label to map it to the corresponding radio. When the label is clicked, the corresponding radio changes to the checked state. Then, the inner is moved to the left using the powerful css3 selector to display the corresponding image. Of course, the left and right buttons are also displayed by selector. In the same way, when the left and right buttons are clicked, the status of the five selection buttons below is also achieved.
The above implementation principle is relatively simple. In fact, as long as you can record the click status of the control button, you can achieve the effect of slider through the selector.
Not only can a radio group be used, but a: hover can also achieve image switching during hover. Of course there are other implementation methods, as long as you understand the implementation principles.
V. Summary
In fact, css3 is really fun and has a lot of results. In css3, it can only be unexpected and cannot be done. Sometimes it is found that writing css3 requires a little bit of cleverness, and sometimes some subtle implementation methods are really awesome.
Well, as a small practice, this example gives me a lot of gains, especially the powerful selector, which makes me feel ashamed. In the past, it was too much ignored...
I have to consider the problem of discontinuous image switching. It seems that we must use a little JavaScript to assist.
All right, share the results later.
