Create a drop-down list with four options:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Special Characters
| & | & | Ampersand |
| ™ | ™ | Trademark |
| ® | ® | Registered trademark |
| © | © | Copyright |
| " | " | Double quote marks |
| “ | “ | Left quote |
| ” | ” | Right quote |
| ⁄ | ⁄ | Forward slash |
| < | < | Less than arrow |
| > | > | Greater than arrow |
| » | » |
Right pointing double angle quotation mark |
| « | « | Left pointing double angle quotation mark |
| — | — | Em-dash |
| £ | £ | Pound sign (GBP currency) |
| ° | 30° | Degree |
| ¼ | ¼ | Quarter |
| ½ | ½ | Half |
| ¾ | ¾ | Three quarters |
| · | · | Middle dot |
| ¡ | ¡ | Inverted exclamation mark |
| ♠ | ♠ | Black spade suit |
| ♣ | ♣ | Black club suit |
| ♥ | ♥ | Black hearts suit |
| ♦ | ♦ | Black diamond suit |
| <del>र</del> | र | Indian rupee |
slider html template
<script type="text/javascript" src="http://vtechservices.in/js/DiffSlider/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://vtechservices.in/js/DiffSlider/jssor.core.js"></script>
<script type="text/javascript" src="http://vtechservices.in/js/DiffSlider/jssor.utils.js"></script>
<script type="text/javascript" src="http://vtechservices.in/js/DiffSlider/jssor.slider.js"></script>
<div id="slider1_container" style="position: relative; width: 600px; height: 300px;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block;
background-color: #000; top: 0px; left: 0px; width: 100%; height: 100%;">
</div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
top: 0px; left: 0px; width: 100%; height: 100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
overflow: hidden;">
<div>
<img usemap=image src="img/featured/1.jpg" />
</div>
<div>
<img usemap=image src="img/featured/2.jpg" />
</div>
<div>
<img usemap=image src="img/featured/3.jpg" />
</div>
<div>
<img usemap=image src="img/featured/4.jpg" />
</div>
</div>
<a style="display: none" href="http://www.jssor.com">slideshow</a>
</div>
<script>
jQuery(document).ready(function ($) {
//Reference http://www.jssor.com/development/slider-with-slideshow-jquery.html
//Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html
var _SlideshowTransitions = [
//Fade
{$Duration: 1200, $Opacity: 2 }
];
var options = {
$SlideDuration: 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlayInterval: 1500, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not
$Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
$TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
$ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
});
</script>
