Based on the jQuery imitation Flash horizontal switch focus diagram, jqueryflash

Based on the jQuery imitation Flash horizontal switch focus diagram, jqueryflash

We will share a horizontal switch focus chart based on jQuery-like Flash. Flash can be used to create many beautiful image album applications. Today we will use jQuery to achieve this effect. It is a horizontal focus chart plug-in similar to Flash. You can switch images automatically or click the navigation button to switch to the specified image. The jQuery focus chart is easy to use and has a smooth switching effect. As follows:

Download Online Preview source code

Implementation code.

Html code:

    <div id="slide-holder">                <div id="slide-runner">                    <a href="">                        </a>                    <a href="">                        </a>                    <a href="">                        </a>                    <a href="">                        </a>                    <a href="">                        </a>                    <a href="">                        </a>                    <a href="">                        </a>                    <div id="slide-controls">                        <p id="slide-client" class="text">                            <strong>post: </strong><span></span>                        </p>                        <p id="slide-desc" class="text">                        </p>                        <p id="slide-nav">                        </p>                    </div>                </div>                <!--content featured gallery here -->            </div>

Js Code:

if (!window.slider) var slider = {}; slider.data = [{ "id": "slide-img-1", "client": "nature beauty", "desc": "nature beauty photography" }, { "id": "slide-img-2", "client": "nature beauty", "desc": "add your description here" }, { "id": "slide-img-3", "client": "nature beauty", "desc": "add your description here" }, { "id": "slide-img-4", "client": "nature beauty", "desc": "add your description here" }, { "id": "slide-img-5", "client": "nature beauty", "desc": "add your description here" }, { "id": "slide-img-6", "client": "nature beauty", "desc": "add your description here" }, { "id": "slide-img-7", "client": "nature beauty", "desc": "add your description here"}];

Via: http://www.w2bc.com/Article/23906