Automatic and Manual Image Scroller Using jQuery

Sapna
Mar 02, 2012

18.7k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

In this tutorial you will learn how to create an automatic and manual image scroller using jQuery and its great animation features. Although creating an image scroller is not something new, this scroller is different because it is completely automatic and will begin scrolling once the page loads.

Description

In this article we have two scrollers which take a regular UL list and scrolls it upwards automatically and manually, one LI at a time and pausing in between. It lets you showcase content that can either be defined inline on the page, or in an external file and fetched via Ajax instead. The scroller can be set to either auto scroll, or on user demand via the navigation panel as part of its interface. Either way, the contents are scrolled in an infinite, wrapping manner, so there are no breaks between the last and first LI contents. Cool!

Note : To run this project download my attachment "AutomaticScroller.rar". and get .js file sagscroller.js and sagscroller.css file.

Step 1 : First we have to create a web application.

Go to Visual Studio 2010.
New--> And select the web Application.
Give it's a name whatever you want.
Click OK.

Step 2 : Secondly you have to add a new page to the website.

Go to the Solution Explorer.
Right Click on the Project name.
Select add new item.
Add new web page and give it a name.
Click OK

Step 3 : In this step we are adding four images in the "Image" folder of the project.

Step 4 : In this step add the sagscroller.css file to your Styles folder.

Right-click on the sagscroller.css file->copy and paste to the <Head> section of your page. The reference path looks like:

Step 5 : In this step we will see how to add the style sheet code. Whenever we write the style sheet code you have to be careful that it is written inside the <style></style> code and you have to place it inside the <Head> section.

Step 6 : In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code.

Right click on both files respectively -> copy and paste it inside <Head> section of your page; see step 6.

Step 7 : Let us see the script code that you have to add inside the <script></script> and will be paced either in the head section or body section as you want.

Step 8 : In this step we have to write the jQuery code which is given below.

Step 9 : This code is for the body of the Default2.aspx.

Body Code

<body>
    <h3> Manual scroller:</h3>
    <form id="form1" runat="server">
    <div id="mysagscroller" class="sagscroller">
        <ul>
            <li>C# (pronounced "C-sharp") is an object-oriented programming language which designed to work with Microsoft's .Net platform.</li>
            <li>XML's design goals emphasize simplicity, generality, and usability over the Internet.</li>
            <li>Java allows you to play online games, chat with people around the world, calculate your mortgage interest, and view images in 3D, just to name a few.</li>
            <li>SQL (pronounced "ess-que-el") stands for Structured Query Language. SQL is used to communicate with a database.</li>
           <li>CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.</li>
        </ul>
    </div>
    <h3> Automatic scroller </h3>
    <div id="mysagscroller2" class="sagscroller">
        <ul>
            <li><a href="#">
                <img src="Images/akash.gif" /></a></li>
            <li><a href="#">
                <img src="Images/akshay.jpg" /></a></li>
            <li><a href="#">
                <img src="Images/deepak.jpg" /></a></li>
            <li><a href="#">
                <img src="Images/ranjeet.gif" /></a></li>
        </ul>
    </div>
    </form>
</body>

Step 10 : In this step we will see the complete code for the Default2.aspx page; let us see the code, given below.

Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <link rel="stylesheet" type="text/css" href="Styles/sagscroller.css" />
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/sagscroller.js"></script>
<script type="text/javascript">
        var sagscroller1 = new sagscroller({
            id: 'mysagscroller',
            mode: 'manual'
        })
        var sagscroller2 = new sagscroller({
            id: 'mysagscroller2',
            mode: 'auto',
            pause: 2500,
            animatespeed: 400
        })
</script>
<style type="text/css">
        div#mysagscroller
        {
            width: 200px;
            top: 0px;
            left: 0px;
        }
        div#mysagscroller ul li
        {
            background: #8A2BE2;
            color: #DCDCDC;
            padding: 5px;
            margin-bottom: 5px;
        }

        div#mysagscroller ul li:first-letter
        {
            font-size: 28px;
            background: red;
            color: black;
            padding: 0 2px;
            margin-right: 2px;
        }
        div#mysagscroller2
        {
            width: 200px;
            height: 350px;
            border: 7px solid #A52A2A;
        }
        div#mysagscroller2 ul li img
        {
            border-width: 0;
            display: block;
        }
</style>
</head>
<body>
    <h3> Manual scroller:</h3>
    <form id="form1" runat="server">
    <div id="mysagscroller" class="sagscroller">
        <ul>
            <li>C# (pronounced "C-sharp") is an object-oriented programming language which designed to work with Microsoft's .Net platform.</li>
            <li>XML's design goals emphasize simplicity, generality, and usability over the Internet.</li>
            <li>Java allows you to play online games, chat with people around the world, calculate your mortgage interest, and view images in 3D, just to name a few.</li>
            <li>SQL (pronounced "ess-que-el") stands for Structured Query Language. SQL is used to communicate with a database.</li>
           <li>CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.</li>
        </ul>
    </div>
    <h3> Automatic scroller </h3>
    <div id="mysagscroller2" class="sagscroller">
        <ul>
            <li><a href="#">
                <img src="Images/akash.gif" /></a></li>
            <li><a href="#">
                <img src="Images/akshay.jpg" /></a></li>
            <li><a href="#">
                <img src="Images/deepak.jpg" /></a></li>
            <li><a href="#">
                <img src="Images/ranjeet.gif" /></a></li>
        </ul>
    </div>
    </form>
</body>
</html>