jquery 원형 회전 이미지 스크롤 전환 효과

이 효과는 꽤 특별하고 귀엽기 때문에 아직 많은 외부 사이트에서는 본 적이 없습니다. 관심 있는 친구들은 직접 다운로드하여 사용해 볼 수 있습니다.
PS: 널리 사용되는 브라우저와 호환되도록 수정되었습니다.
렌더링:

Step1. HTML 만들기

<div id="rotatescroll"> 
<div class="viewport"> 
<ul class="overview"> 
<li><img src="/static/imghwm/default1.png"  data-src="images/SF1.jpg"  class="lazy"   alt="Chun-Li" /></li> 
<li><img src="/static/imghwm/default1.png"  data-src="images/SF2.jpg"  class="lazy"   alt="VEGA" /></li> 
<li><img src="/static/imghwm/default1.png"  data-src="images/SF3.jpg"  class="lazy"   alt="DHAISIM" /></li> 
<li><img src="/static/imghwm/default1.png"  data-src="images/SF4.jpg"  class="lazy"   alt="KEN" /></li> 
<li><img src="/static/imghwm/default1.png"  data-src="images/SF5.jpg"  class="lazy"   alt="BALROG" /></li> 
<li><img src="/static/imghwm/default1.png"  data-src="images/SF6.jpg"  class="lazy"   alt="CAMMY" /></li> 
<li><img src="/static/imghwm/default1.png"  data-src="images/SF7.jpg"  class="lazy"   alt="GOUKI" /></li> 
<li><img src="/static/imghwm/default1.png"  data-src="images/SF8.jpg"  class="lazy"   alt="BLANKA" /></li> 
<li><img src="/static/imghwm/default1.png"  data-src="images/SF9.jpg"  class="lazy"   alt="HONDA" /></li> 
<li><img src="/static/imghwm/default1.png"  data-src="images/SF10.jpg"  class="lazy"   alt="FEI LONG" /></li> 
<li><img src="/static/imghwm/default1.png"  data-src="images/SF11.jpg"  class="lazy"   alt="GUILE" /></li> 
<li><img src="/static/imghwm/default1.png"  data-src="images/SF12.jpg"  class="lazy"   alt="RYU" /></li> 
<li><img src="/static/imghwm/default1.png"  data-src="images/SF13.jpg"  class="lazy"   alt="SAGAT" /></li> 
<li><img src="/static/imghwm/default1.png"  data-src="images/SF14.jpg"  class="lazy"   alt="THWAK" /></li> 
<li><img src="/static/imghwm/default1.png"  data-src="images/SF15.jpg"  class="lazy"   alt="ZANGIEF" /></li> 
</ul> 
</div> 

<div class="overlay"></div> 
<div class="thumb"></div> 
</div>

Step2. CSS 만들기

#rotatescroll { 
width: 300px; 
height: 300px; 
margin: 0 auto; 
position: relative; 
} 
#rotatescroll .viewport{ 
width: 300px; 
height: 300px; 
position: relative; 
margin: 0 auto; 
overflow: hidden; 
} 
#rotatescroll .overview { 
width: 798px; 
position: absolute; 
list-style: none; 
margin: 0; 
padding: 0; 
left: 0; 
top: 0; 
} 
#rotatescroll .overview li { 
width: 300px; 
height: 300px; 
float: left; 
position: relative; 
} 
#rotatescroll .overlay { 
height: 300px; 
width: 300px; 
background: url(../images/bg-rotatescroll.png) no-repeat 0 0; 
position: absolute; 
left: 0; 
top: 0; 
} 
#rotatescroll .thumb { 
width: 26px; 
height: 26px; 
z-index: 200; 
background: url(../images/bg-thumb.png) no-repeat 50% 50%; 
position: absolute; 
top: 0px; 
cursor: pointer; 
left: 0px; 
} 
#rotatescroll .dot { 
background: url(../images/bg-dot2.png) no-repeat 0 0; 
display: none; 
height: 12px; 
width: 12px; 
position: absolute; 
left: 155px; 
top: 3px; 
z-index: 100; 
} 
#rotatescroll .dot span { display: none; }

Step3. 🎜>

<script type="text/javascript" src="http://www.baijs.nl/js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery.tinycircleslider.js"></script> 
<script type="text/javascript" src="js/website.js"></script>

jquery 원형 회전 이미지 스크롤 전환 효과 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!