首页>>Jquery图片>>一个水平的图片滚动效果，单页可以重复使用，前后切换位置不占用屏幕宽度(2019-05-24)

一个水平的图片滚动效果，单页可以重复使用，前后切换位置不占用屏幕宽度

一个水平的图片滚动效果，单页可以重复使用，前后切换位置不占用屏幕宽度
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="hs__wrapper">  
  2.   <div class="hs__header">  
  3.     <h2 class="hs__headline">Headline 1  
  4.     </h2>  
  5.     <div class="hs__arrows"><a class="arrow disabled arrow-prev"></a><a class="arrow arrow-next"></a></div>  
  6.   </div>  
  7.   <ul class="hs">  
  8.     <li class="hs__item">   
  9.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig12" alt=""/></div>  
  10.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 1</span><span class="hs__item__subtitle">some subtitle</span></div>  
  11.     </li>  
  12.     <li class="hs__item">   
  13.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig22" alt=""/></div>  
  14.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 2</span><span class="hs__item__subtitle">some subtitle</span></div>  
  15.     </li>  
  16.     <li class="hs__item">   
  17.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig32" alt=""/></div>  
  18.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 3</span><span class="hs__item__subtitle">some subtitle</span></div>  
  19.     </li>  
  20.     <li class="hs__item">   
  21.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig42" alt=""/></div>  
  22.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 4</span><span class="hs__item__subtitle">some subtitle</span></div>  
  23.     </li>  
  24.     <li class="hs__item">   
  25.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig52" alt=""/></div>  
  26.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 5</span><span class="hs__item__subtitle">some subtitle</span></div>  
  27.     </li>  
  28.     <li class="hs__item">   
  29.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig62" alt=""/></div>  
  30.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 6</span><span class="hs__item__subtitle">some subtitle</span></div>  
  31.     </li>  
  32.     <li class="hs__item">   
  33.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig72" alt=""/></div>  
  34.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 7</span><span class="hs__item__subtitle">some subtitle</span></div>  
  35.     </li>  
  36.     <li class="hs__item">   
  37.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig82" alt=""/></div>  
  38.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 8</span><span class="hs__item__subtitle">some subtitle</span></div>  
  39.     </li>  
  40.     <li class="hs__item">   
  41.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig92" alt=""/></div>  
  42.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 9</span><span class="hs__item__subtitle">some subtitle</span></div>  
  43.     </li>  
  44.     <li class="hs__item">   
  45.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig102" alt=""/></div>  
  46.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 10</span><span class="hs__item__subtitle">some subtitle</span></div>  
  47.     </li>  
  48.     <li class="hs__item">   
  49.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig112" alt=""/></div>  
  50.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 11</span><span class="hs__item__subtitle">some subtitle</span></div>  
  51.     </li>  
  52.     <li class="hs__item">   
  53.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig122" alt=""/></div>  
  54.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 12</span><span class="hs__item__subtitle">some subtitle</span></div>  
  55.     </li>  
  56.     <li class="hs__item">   
  57.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig132" alt=""/></div>  
  58.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 13</span><span class="hs__item__subtitle">some subtitle</span></div>  
  59.     </li>  
  60.     <li class="hs__item">   
  61.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig142" alt=""/></div>  
  62.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 14</span><span class="hs__item__subtitle">some subtitle</span></div>  
  63.     </li>  
  64.     <li class="hs__item">   
  65.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig152" alt=""/></div>  
  66.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 15</span><span class="hs__item__subtitle">some subtitle</span></div>  
  67.     </li>  
  68.     <li class="hs__item">   
  69.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig162" alt=""/></div>  
  70.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 16</span><span class="hs__item__subtitle">some subtitle</span></div>  
  71.     </li>  
  72.     <li class="hs__item">   
  73.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig172" alt=""/></div>  
  74.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 17</span><span class="hs__item__subtitle">some subtitle</span></div>  
  75.     </li>  
  76.     <li class="hs__item">   
  77.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig182" alt=""/></div>  
  78.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 18</span><span class="hs__item__subtitle">some subtitle</span></div>  
  79.     </li>  
  80.     <li class="hs__item">   
  81.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig192" alt=""/></div>  
  82.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 19</span><span class="hs__item__subtitle">some subtitle</span></div>  
  83.     </li>  
  84.     <li class="hs__item">   
  85.       <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig202" alt=""/></div>  
  86.       <div class="hs__item__description"><span class="hs__item__title">Amazing title 20</span><span class="hs__item__subtitle">some subtitle</span></div>  
  87.     </li>  
  88.   </ul>  
  89. </div>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_778.html