Turn: Atmospheric cool Focus Carousel Chart js effect

How to use

Step 1. Introduction of related files in HTML tags

<script type="Text/javascript" src="Js/myfocus-2.0.0.min.js" ></script><!--Introduction of Myfocus Library--><script type = "Text/javascript"  src = "js/mf-pattern/slide3d.js" ></script><! --introduced style js file --><link href=  "js/mf-pattern/slide3d.css"  type= "text/css"  /><! --introduced style CSS file -->  

Hint: In the case of qualifying, the introduction of style files (JS/CSS) can be saved and introduced into the Myfocus library. How is the style file introduced automatically? For details, see Myfocus's file Structure and auto-introduction style file mechanism.

Step 2. Create a Myfocus standard HTML structure and populate your content

<div ID="Boxid" ><!--Focus Picture Box-<divClass="Loading" >="Img/loading.gif" alt="Please wait ..."/></div><!--Loading screen (can be deleted)-<divClass="Pic" ><!--Table of contents (number of Li can be added or decreased)-<ul> <li><a href="#" >="Img/1.jpg" thumb="" Alt="Heading 1" text="Detailed description 1"/></a></li> <li><a href="#" >="Img/2.jpg" thumb="" Alt="Heading 2" text="Detailed description 2"/></a></li> <li><a href="#" >="Img/3.jpg" thumb="" Alt="Heading 3" text="Detailed Description 3"/></a></li> <li><a href="#" >="Img/4.jpg" thumb="" Alt="Heading 4" text="Detailed Description 4"/></a>< /li>        <li><a  Href= "#" >= "img/5.jpg"  thumb = " alt=< Span class= "Litelighterstyle" > "title 5"  text= " Detailed description 5 " /></a></li>  </ul>  </div></DIV>      

Description of the properties of the IMG tag:

Step 3. Called at any point after the Step1 code (recommended to be called before the head tag is finished)

You can simply call---only set its box ID, all other parameters are set by default:

<script type="Text/javascript" > Myfocus. Set ({id:' boxid '});</script>  

Or a detailed argument call:

<script type="Text/javascript" >myfocus. Set ({id:' boxid ',//Focus chart Box ID    

Pattern:name of ' mf_fancy ',//Style app 

Time:3,//toggle interval (seconds) 

Trigger:' click ',//Trigger Toggle Mode: ' Click ' (click)/' mouseover ' (hover) 

Width:,//Set Picture area width (pixels) 

Height:296,//Set Picture area height (pixels) 

TxtHeight:' default '//text-layer height setting (pixels), ' default ' is the defaults ' height, 0 is hidden} ';</script>  

Turn: Atmospheric cool Focus Carousel Chart js effect