Easy Ticker is a jQuery plugin helps you create a highly customizable, cross browser, flexible and infinite news ticker on your web page.
Full Source Code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple News Ticker using JQuery Plugin</title>
<style type="text/css">
body{
background:#ddd;
}
h1.title{
text-align: center;
}
.ticker-wrapper{
background:#fff;
width:50%;
margin:0 auto;
border: 1px solid #ccc;
}
.ticker-wrapper ul {
padding: 0;
list-style: none;
}
.ticker-wrapper img {
float: left;
width: 177px;
margin: 5px 15px 0 0;
}
.ticker-wrapper a {
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: bold;
text-decoration: none;
color: #da7f22;
}
.ticker-wrapper p {
margin: 15px 0 0;
font-size: 16px;
line-height: 28px;
}
.ticker-wrapper li:after {
content: '';
display: block;
clear: both;
}
.ticker-wrapper li {
padding: 20px;
border-bottom: 1px dashed #ccc;
}
</style>
</head>
<?php
$newslist = array(
array(
'title'=>'Zoom Meeting : Is it really safe and deserves to be used ?',
'image'=>'https://reeteshghimire.com.np/wp-content/uploads/2020/06/zoom-video-calling-300x200.jpg',
'summary'=>'Coronavirus (Covid-19) pandemic has changed our lives drastically as every one of us is in our home quarantine.'
),
array(
'title'=>'New crypto currency in market : Is PI network legit ?',
'image'=>'https://reeteshghimire.com.np/wp-content/uploads/2020/06/pi-network-legit-or-scam-300x200.jpg',
'summary'=>'Currency and the means of exchange has evolved and changed from the beginning of human beings. the 21st century is a digital world which needs a digital currency.'
),
array(
'title'=>'Everything you need to know about Sagoon',
'image'=>'https://reeteshghimire.com.np/wp-content/uploads/2020/06/everything-you-need-to-know-about-sagoon-300x200.jpg',
'summary'=>'We are living in the world of digitalization and modernization where people have moved to the next level of technology in every sector. Similarly, social commerce platforms have dramatically changed.'
),
array(
'title'=>'What Does The Future Hold For Crypto-Currency ?',
'image'=>'https://reeteshghimire.com.np/wp-content/uploads/2020/06/future-of-cryptocurrency-300x200.jpg',
'summary'=>'The world is moving towards modernization and development at a quick pace. We can see many development works and evolution in every sector of our lives.'
),
);
?>
<body>
<h1 class="title">News Ticker Plugin</h1>
<div class="ticker-wrapper">
<ul>
<?php foreach($newslist as $news){?>
<li>
<img src="<?php echo $news['image'];?>">
<a href="#"><?php echo $news['title'];?></a>
<p><?php echo $news['summary'];?></p>
</li>
<?php } ?>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Flexible-Customizable-jQuery-News-Ticker-Plugin-Easy-Ticker/jquery.easy-ticker.js"></script>
<script type="text/javascript">
$('.ticker-wrapper').easyTicker({
direction: 'up',
easing: 'swing',
visible: 3,
mousePause:1
});
</script>
</body>
</html>
