473,322 Members | 1,431 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

How do I use html to have scrolling images

I have a picture with a white box in the middle. The white box in the middle is where I would like the 5 images to continuously scroll/manually scroll between. Please can you help. Is this maybe a jquery task?
Nov 26 '13 #1
3 2942
Exequiel
288 256MB
Yes it is a jquery task,, you can search in google for scrollable images. .
Nov 27 '13 #2
Sherin
77 64KB
Try This Code

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <meta name="viewport" content="width=device-width, initial-scale=1">
  4. <style>
  5. body, html {
  6.   height: 100%;
  7.   margin: 0;
  8.   font-family: Arial, Helvetica, sans-serif;
  9. }
  10.  
  11. * {
  12.   box-sizing: border-box;
  13. }
  14.  
  15. .bg-image {
  16.   /* Full height */
  17.   height: 50%; 
  18.  
  19.   /* Center and scale the image nicely */
  20.   background-position: center;
  21.   background-repeat: no-repeat;
  22.   background-size: cover;
  23. }
  24.  
  25. /* Images used */
  26. .img1 { background-image: url("img_snow.jpg"); }
  27. .img2 { background-image: url("img_girl.jpg"); }
  28. .img3 { background-image: url("img_lights.jpg"); }
  29. .img4 { background-image: url("img_nature.jpg"); }
  30. .img5 { background-image: url("img_forest.jpg"); }
  31. .img6 { background-image: url("img_woods.jpg"); }
  32.  
  33. /* Position text in the middle of the page/image */
  34. .bg-text {
  35.   background-color: rgb(0,0,0); /* Fallback color */
  36.   background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  37.   color: white;
  38.   font-weight: bold;
  39.   font-size: 80px;
  40.   border: 10px solid #f1f1f1;
  41.   position: fixed;
  42.   top: 50%;
  43.   left: 50%;
  44.   transform: translate(-50%, -50%);
  45.   z-index: 2;
  46.   width: 300px;
  47.   padding: 20px;
  48.   text-align: center;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53.  
  54. <div class="bg-image img1"></div>
  55. <div class="bg-image img2"></div>
  56. <div class="bg-image img3"></div>
  57. <div class="bg-image img4"></div>
  58. <div class="bg-image img5"></div>
  59. <div class="bg-image img6"></div>
  60.  
  61. <div class="bg-text">TEXT</div>
  62.  
  63. </body>
  64. </html>
  65.  
Oct 12 '20 #3
es it is a jquery task,, you can search in google for scrollable images. .
Oct 13 '20 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

7
by: Giuseppe Dini | last post by:
I'm looking desperatle for a javascript that allow me to show a few small images scrolling horizzontaly on the screen from right to left. I'm sure I've seen a lot of time such a script, but now I...
5
by: Das | last post by:
Hi, I'm trying to email html page & that page also contains the images. I can do that when we send html page from ms outlook. But I want to attach page c# code & send the mail through smtp mail....
5
by: John | last post by:
I get a 'divide by zero' exception when I scroll in a subdirectory of 'My Pictures'. This subdirectory is full of .ico, .bmp, .png files that I use for button images in my Windows Forms projects. ...
5
by: PythonistL | last post by:
I have this script that scrolls the plain text. <script type="text/javascript"> var msg = 'My scrolling text. ..'; var myTimeout; function scrollMsg() {...
2
by: gunnuk | last post by:
<!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> <meta...
2
by: Aneesh Pulukkul[MCSD.Net] | last post by:
Hi, I have a HTML page and associated images. I need to send the HTML as email -the email should also display the images at respective places. So am sending the content of HTML file as...
1
by: can2564 | last post by:
Hi, I'm found a JS to have a series of scrolling images, and have it working. But I would like to add a paragraph below each image that also changes with each specific image. Can this be...
1
by: lennyc | last post by:
I would like to make a simple auto scroll of images with little user interactioin. It would be images moving horizontally in a continuous loop that stops on mouse over and starts up again on mouse...
1
by: bealoid | last post by:
This wikipedia user: http://en.wikipedia.org/wiki/User:Miranda has a png image in the lower right of their screen. How can I acheive a similar effect on my own (not wiki) page, (using my own...
1
by: dotnetnovice | last post by:
Hi i am using this code to send email messages in C#... private void button1_Click(object sender, EventArgs e) { try { MailMessage mail = new...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.