Now with jquery, it is very simple to implement image switching. The following small series will introduce you to the examples of jquery's implementation of image slide switching.
Option-based Content Switching has many application scenarios. How JavaScript is implemented is not the focus of our speech today. If "option-based Content Switching Effect" is disabled, can it run normally? Can it meet users' basic needs? Is the focus of our discussion.
However, JavaScript is not disabled in Chinese users. However, we cannot give up our pursuit of perfection.
| The Code is as follows: |
Copy code |
The CSS Code:
/** Reset the style **/
* {Margin: 0; padding: 0 ;}
Body {font: 12px/1.5 tahoma, arial, 5b8b4f53, sans-serif ;}
Ul, ol {list-style: none ;}
A {text-decoration: none ;}
A: hover {text-decoration: underline ;}
Img {border: 0 ;}
/** Content style **/
. Section {width: 350px; margin: 0 auto ;}
# Content-slider {border: 1px solid #666; height: 200px; width: 350px; margin-top: 50px ;}
# Content-slider-inside {height: 200px; overflow: hidden ;}
# Content-slider-inside li {background-color: # ccc; height: 200px; width: 350px; text-align: center; font-size: 100px; line-height: 200px; color: #666 ;}
# Navigation {margin: 10px 0 0 0; float: right ;}
# Navigation li {border: solid 1px # ccc; float: left; width: 20px; height: 20px; line-height: 20px; text-align: center; margin-left: 5px ;}
# Navigation li a, # navigation li a: link, # navigation li a: visited {color: #666; display: block; height: 20px ;}
# Navigation li a: hover, # navigation li a: focus, # navigation li a: active {background: #666; color: # fff ;}
# Navigation li. current a, # navigation li. current a: link, # navigation li. current a: visited {background: #666; color: # fff ;}
The HTML Code: <Div class = "section">
<Div id = "content-slider">
<Ul id = "content-slider-inside">
<Li id = "one"> 1 </li>
<Li id = "two"> 2 </li>
<Li id = "three"> 3 </li>
<Li id = "four"> 4 </li>
<Li id = "five"> 5 </li>
</Ul>
</Div>
<Ul id = "navigation">
<Li> <a href = "# one"> 1 </a> </li>
<Li> <a href = "# two"> 2 </a> </li>
<Li> <a href = "# three"> 3 </a> </li>
<Li> <a href = "# four"> 4 </a> </li>
<Li> <a href = "# five"> 5 </a> </li>
</Ul>
</Div> |
Through the above source code, we can see that we are using the "anchor link" principle to achieve Content Switching. When we click these links, the system will first search for such content on the page (for example, the name attribute of <a>). If there is no such content, it will search for the element with the id of this anchor on the page, the top of the element matching the anchor is located immediately. In this way, you can switch the content in the container to display based on the principle of "anchor link.
Through the "anchor link" principle, we have achieved the basic switching effect. For more extensions and improvements, you must use limit cirpt.
| The Code is as follows: |
Copy code |
The jQuery JavaScript:
Var MooJS = MooJS || {};
MooJS. tabs = function (container, startIndex ){
Var root = container | '# tabs ';
Var speed = 500;
StartIndex = startIndex | 0;
Root = $ (root );
Root. addClass ('js-enabled ');
// Add click events
$. Each (root. find ('ul li A'), function (index ){
Var that = $ (this );
If (index = startIndex ){
That. parent (). addClass ('current ');
}
That. click (function (){
// Set current class
$ (This). parent (). addClass ('current ');
$. Each ($ (this). parent (). siblings (), function (){
$ (This). removeClass ('stream ');
});
// Show/hide panels
$. Each ($ (that. attr ('href '). fadeIn (speed). siblings (), function (){
$ (This). hide ();
});
Return false;
});
});
// Hide all but start index
$. Each (root. find ('# content-slider-inside> *'), function (index, el ){
If (index! = StartIndex ){
$ (This). hide ();
}
});
};
$ (Document). ready (function (){
Var tabs = $ ('# demo ');
If (tabs. length ){
MooJS. tabs (tabs );
}
}); |
Complete jquery slides
| The Code is as follows: |
Copy code |
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> jquery implements Content Switching </title>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Body {font: 12px/1.5 tahoma, arial, 5b8b4f53, sans-serif ;}
Ul, ol {list-style: none ;}
A {text-decoration: none ;}
A: hover {text-decoration: underline ;}
Img {border: 0 ;}
. Section {width: 350px; margin: 0 auto ;}
# Content-slider {border: 1px solid #666; height: 200px; width: 350px; margin-top: 50px ;}
# Content-slider-inside {height: 200px; overflow: hidden ;}
# Content-slider-inside li {background-color: # ccc; height: 200px; width: 350px; text-align: center; font-size: 100px; line-height: 200px; color: #666; display: block ;}
# Navigation {margin: 10px 0 0 0; float: right ;}
# Navigation li {border: solid 1px # ccc; float: left; width: 20px; height: 20px; line-height: 20px; text-align: center; margin-left: 5px ;}
# Navigation li a, # navigation li a: link, # navigation li a: visited {color: #666; display: block; height: 20px ;}
# Navigation li a: hover, # navigation li a: focus, # navigation li a: active {background: #666; color: # fff ;}
# Navigation li. current a, # navigation li. current a: link, # navigation li. current a: visited {background: #666; color: # fff ;} </Style>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js? Ver = 1.3.2 "> </script>
<Script type = "text/javascript">
Var MooJS = MooJS || {}; MooJS. tabs = function (container, startIndex ){
Var root = container | '# tabs ';
Var speed = 500;
StartIndex = startIndex | 0;
Root = $ (root );
Root. addClass ('js-enabled ');
// Add click events
$. Each (root. find ('ul li A'), function (index ){
Var that = $ (this );
If (index = startIndex ){
That. parent (). addClass ('current ');
}
That. click (function (){
// Set current class
$ (This). parent (). addClass ('current ');
$. Each ($ (this). parent (). siblings (), function (){
$ (This). removeClass ('stream ');
});
// Show/hide panels
$. Each ($ (that. attr ('href '). fadeIn (speed). siblings (), function (){
$ (This). hide ();
});
Return false;
});
});
// Hide all but start index
$. Each (root. find ('# content-slider-inside> *'), function (index, el ){
If (index! = StartIndex ){
$ (This). hide ();
}
});
}; $ (Document). ready (function (){
Var tabs = $ ('# demo ');
If (tabs. length ){
MooJS. tabs (tabs );
}
});
</Script>
</Head> <Body> <Div id = "demo" class = "section">
<Div id = "content-slider">
<Ul id = "content-slider-inside">
<Li id = "one"> 1 </li>
<Li id = "two"> 2 </li>
<Li id = "three"> 3 </li>
<Li id = "four"> 4 </li>
<Li id = "five"> 5 </li>
</Ul>
</Div>
<Ul id = "navigation">
<Li> <a href = "# one"> 1 </a> </li>
<Li> <a href = "# two"> 2 </a> </li>
<Li> <a href = "# three"> 3 </a> </li>
<Li> <a href = "# four"> 4 </a> </li>
<Li> <a href = "# five"> 5 </a> </li>
</Ul>
</Div> </Body>
</Html> |
