Membuat DIV Auto Refresh dengan jQuery

Cara mudah membuat auto DIV load dan data array pada background.

Berikut lampiran code php Auto Refresh dengan jQuery

Code index.php 

1

<style> .banner {width:600px; text-align:center; margin:0 auto; position: relative; -webkit-border-radius: 5px 0 5px 5px; -moz-border-radius: 5px 0 5px 5px; border-radius: 5px 0 5px 5px; padding:50px 20px;} .banner:before {content: ""; position: absolute; top: 0; right: 0;border-width: 0 24px 24px 0; border-style: solid; border-color:#F0F0F0 #fff; -webkit-border-radius: 0px 0 0px 5px; -moz-border-radius: 0px 0 0px 5px; border-radius: 0px 0 0px 5px;} #screen {width:100%;color: #555;"Century Gothic",CenturyGothic,AppleGothic,sans-serif;line-height:45px;} .txt-title {font-size:2em;} .txt-subtitle {font-size:1.2em;} </style> <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ setInterval(function(){ $("#screen").load('banners.php') }, 2000); }); </script> <div id="screen"></div>

Code banners.php

1

<?php $bg_array = array("#CEED9D","#ECED9D","#EDCF9D","#EC9CA7","#ED9DD0","#EE9DE2","#D69DEC","#9E9CEC"); $bg = array_rand($bg_array,1); ?> <div class="banner" style="background-color:<?php echo $bg_array[$bg];?>;" > <div class="txt-title">Membuat DIV Auto Refresh dengan jQuery</div> <div class="txt-subtitle">This Banner auto loads and refreshes every 2 seconds.</div> </div>

This jQuery load event happens every 2 seconds to update the banner periodically. Instead of using static array data we can connect DB to load div with dynamic data.