Easy Steps to Rotate Content on Your Website with JavaScript

Similar search term : Auto Rotate Content using JavaScript, Smoothly auto rotate Content using JavaScript, javascript – Automatically rotate through content, Rotating Images or content Using jQuery (JavaScript), Auto Rotating Ad Banner, No iFrame, No Page Refresh, Text Rotation using JavaScript.

Today I will show you how to create auto rotate content using JavaScript. In other word smoothly auto rotate div using JavaScript. You can use images, contents or html tags for auto rotate using JavaScript like carousel slider.

1. Following steps to create auto rotate content using JavaScript

[DOWNLOAD FREE JS ##download##]

2. ADD SCRIPT & STYLE IN HEAD SECTION

[<title>CODE SCRATCHER by www.TeachSansar.com</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="js/richhtmlticker.js" type="text/javascript"></script>
<style type="text/css">
    .tickerstyle
    {
        font-family:Calibri;
        width: 250px;
        height: 200px;
        border: 1px solid black;
        background: #eeeeee;
        padding: 8px;
        overflow: hidden;
    }
    .messagediv
    {
        display: none;
    }
</style>] 

3. ADD HTML MARKUP

[<div id="myhtmlticker" class="tickerstyle">
    <div class="messagediv">
        <b><a href="http://www.codescratcher.com/category/asp-net/">ASP.NET - CODE SCRATCHER</a></b><br /><br />
        Articles: URL Rewrite, Send Email with Attachment, Generating Color and Size Box
        Images, HTML to PDF using iTextSharp Library, Export HTML to Excel and many more.
    </div>
    <div class="messagediv">
        <b><a href="http://www.codescratcher.com/category/javascript/">JAVASCRIPT - CODE SCRATCHER</a></b><br /><br />
        Articles: 3D Spin Menu, Multi line Alert, Disable Mouse Right Click, Get Directions
        Google Map API, Color Picker, Copy to Clipboard and many more.
    </div>
    <div class="messagediv">
        <b><a href="http://www.codescratcher.com/category/jquery/">JQUERY - CODE SCRATCHER</a></b><br /><br />
        Articles: Search Location in Google Map API, Hindi TextBox using Google Transliterate
        API, Image Gallery, Responsive Slider, Jquery ThickBox Popup, Customize Confirm
        Box, Stock Ticker and Yahoo Finance API and many more.
    </div>
    <div class="messagediv">
        <b><a href="http://www.codescratcher.com/interview-questions/">INTERVIEW QUESTIONS - CODE SCRATCHER</a></b><br /><br />
        Topic: ASP.NET, C Language, C++ Language, SQL Server, HR Interview.
    </div>
</div>]

This is a sample image preview