To achieve a function in the project, put several pictures in a div with fixed width and height, the height of the pictures is equal to the height of the div, and the total length of several pictures is far longer than the length of the div, so the question is, how can users see all the pictures by sliding their fingers?
There are two ways to do this:
Method 1:
The width of the parent element of the upper layer of the picture should be larger than the total width of all pictures. The width and height of the outermost div are fixed. There are three layers in total
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #tp{ width: 90vw; height: 30vh; } #tp img{ width: 30vw; height: 20vh; } #kd{ width: 245vw;/*Key points*/ } </style> </head> <body> <!--Changeless div--> <div id="tp"> <div id="kd"> <img src="images/apic11412.jpg" alt="" /> <img src="images/zzpic9746.jpg" alt=""/> <img src="images/apic11412.jpg" alt="" /> <img src="images/zzpic7320.jpg" alt="" /> <img src="images/bpic3454.jpg" alt="" /> <img src="images/zzpic9746.jpg" alt="" /> <img src="images/bpic3454.jpg" alt="" /> <img src="images/zzpic6546.jpg" alt="" /> </div> </div> </body> </html>
At this time, you can slide the picture
Method two:
Set white space: nowrap on the parent element to ensure that the child element will not wrap. There are two layers in total (all browsers support the white space attribute)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #tp{ width: 90vw; height: 30vh; /*Key points*/ white-space: nowrap; } #tp img{ width: 30vw; height: 20vh; } </style> </head> <body> <!--Changeless div--> <div id="tp"> <img src="images/apic11412.jpg" alt="" /> <img src="images/zzpic9746.jpg" alt=""/> <img src="images/apic11412.jpg" alt="" /> <img src="images/zzpic7320.jpg" alt="" /> <img src="images/bpic3454.jpg" alt="" /> <img src="images/zzpic9746.jpg" alt="" /> <img src="images/bpic3454.jpg" alt="" /> <img src="images/zzpic6546.jpg" alt="" /> </div> </body> </html>
At this time, you can slide the picture.
Both methods are simple but practical! The touch event I used before to achieve the same effect is more cumbersome.