Lightweight jQuery Plugin To Create Scrolling Images - picMarque

picMarque is a super tiny jQuery plugin used to create scrolling images like the old traditional Html marquee tag. The plugin will auto scroll through a set of images on page loaded and has the ability to pause the scrolling on mouse hover.

See also:

• Carousel & Marquee Like List Scrolling Plguin For jQuery - Scrollbox
• Text Scrolling Plugin for jQuery - Marquee

How to use it:

1. Load the required CSS in the head section of your web page.

<link href="script/jquery.picMarque.css" rel="stylesheet">

2. Create an empty container with a fix width.

<div id="marquePic" style="width:1170px;"></div>

3. Load the jQuery picMarque plugin after jQuery javascript library at the bottom of the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="script/jquery.picMarque.js"></script>

4. Create an image array using JSON object and initialize the plugin with options.

<script type="text/javascript">
$(document).ready(function(){
var picData = [ 
{
image:'img/1.jpg',
title:'image title 1',
link:'#'
},
{
image:'img/2.jpg',
title:'image title 2',
link:'#'
},
{
image:'img/3.jpg',
title:'image title 3',
link:'#'
},
{
image:'img/4.jpg',
title:'image title 4',
link:'#'
},
{
image:'img/5.jpg',
title:'image title 5',
link:'#'
}]

$("#marquePic").picMarque({
speed: 60,//scroll speed（ms）
errorimg: 'nophoto.jpg',//error image path
data: picData
})
});
</script>

Change log:

2014-06-03

• fix bug

---

This awesome jQuery plugin is developed by YiquanWang. For more Advanced Usages, please check the demo page or visit the official website.