[JQuery Demo] image switching effect sorting, jquerydemo

[JQuery Demo] image switching effect sorting, jquerydemo

There are many effects on switching images, such as horizontal scrolling, vertical scrolling, and fade-in and fade-out. We will implement these effects one by one.

 

1. horizontal scrolling

1) Let's implement the HTML page first. The code is simple:

<div id="container">    <ul class="slider">        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>    </ul>    <ul class="thumb">        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>    </ul></div>

2) Then we set the CSS:

/**   CSS Reset  **/body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; }body, button, input, select, textarea { font: 12px/1.5 tahoma, arial, \5b8b\4f53; }h1, h2, h3, h4, h5, h6 { font-size: 100%; }address, cite, dfn, em, var { font-style: normal; }code, kbd, pre, samp { font-family: couriernew, courier, monospace; }small { font-size: 12px; }ul, ol { list-style: none; }a { text-decoration: none; }a:hover { text-decoration: underline; }sup { vertical-align: text-top; }sub { vertical-align: text-bottom; }legend { color: #000; }fieldset, img { border: 0; }button, input, select, textarea { font-size: 100%; }table { border-collapse: collapse; border-spacing: 0; }/*   container  */#container { width: 320px; height: 456px; overflow: hidden; position: relative; margin: 20px auto; }.slider { position: absolute; }.slider img { width: 320px; display: block; }.thumb { position: absolute; bottom: 5px; right: 5px; }.thumb li { float: left; color: #FF7300; text-align: center; line-height: 16px; width: 16px; height: 16px; font-size: 12px; font-family: Arial; margin: 3px 1px; border: 1px solid #FF7300; background: #fff; cursor: pointer; }.thumb li:hover,.thumb li.selected { color: #fff; line-height: 16px; width: 16px; height: 16px; font-size: 16px; background: #EF7300; font-weight: bold; }

The current display effect is as follows:

3) Next, we need to click to implement image switching. below is the jQuery plug-in for horizontal scrolling:

; (Function ($) {$. fn. extend ({scrollHorizontal: function () {var imgCount = $ (". slider li "). length; var imgWidth = $ (". slider li "). eq (0 ). width (); $ (". thumb li "). eq (0 ). addClass ("selected"); for (var I = 0; I 
4) finally, we call this plug-in on the HTML page:
<script>    $(document).ready(function () {        $("#container").scrollHorizontal();    })</script>
5) The effect is as follows:

 
2. vertical scroll
The above implements horizontal scrolling, so vertical scrolling is simple. You can get the Image Height and control the top value. The newly created jQuery plug-in is as follows:
; (Function ($) {$. fn. extend ({scrollVertical: function () {var imgCount = $ (". slider li "). length; var imgHeight = $ (". slider li "). eq (0 ). height (); $ (". thumb li "). eq (0 ). addClass ("selected"); for (var I = 0; I 
Then you can call this plug-in:
<script>    $(document).ready(function () {        $("#container").scrollVertical();    })</script>
The effect is as follows:

 
3. fade in and out
Similarly, fade-in and fade-out is a good solution:
;(function ($) {   $.fn.extend({       fadeInOut:function () {           var imgCount = $(".slider li").length;           var imgHeight = $(".slider li").eq(0).height();           $(".thumb li").eq(0).addClass("selected");           for (var i=1;i
The effect is as follows: