最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

jquery圆形旋转图片滚动切换效果

来源:动视网 责编:小采 时间:2020-11-27 20:25:53
文档

jquery圆形旋转图片滚动切换效果

jquery圆形旋转图片滚动切换效果:这个效果比较特别,可爱,所以在外面网站没怎么看到过,有兴趣的朋友可以下载后自己使用。 PS: 经过修改已经兼容大众浏览器。效果图:Step1. 创建HTML <div id="rotatescroll"> <div class="viewport&q
推荐度:
导读jquery圆形旋转图片滚动切换效果:这个效果比较特别,可爱,所以在外面网站没怎么看到过,有兴趣的朋友可以下载后自己使用。 PS: 经过修改已经兼容大众浏览器。效果图:Step1. 创建HTML <div id="rotatescroll"> <div class="viewport&q
 这个效果比较特别,可爱,所以在外面网站没怎么看到过,有兴趣的朋友可以下载后自己使用。
PS: 经过修改已经兼容大众浏览器。
效果图:

Step1. 创建HTML

<div id="rotatescroll"> 
<div class="viewport"> 
<ul class="overview"> 
<li><img src="images/SF1.jpg" alt="Chun-Li" /></li> 
<li><img src="images/SF2.jpg" alt="VEGA" /></li> 
<li><img src="images/SF3.jpg" alt="DHAISIM" /></li> 
<li><img src="images/SF4.jpg" alt="KEN" /></li> 
<li><img src="images/SF5.jpg" alt="BALROG" /></li> 
<li><img src="images/SF6.jpg" alt="CAMMY" /></li> 
<li><img src="images/SF7.jpg" alt="GOUKI" /></li> 
<li><img src="images/SF8.jpg" alt="BLANKA" /></li> 
<li><img src="images/SF9.jpg" alt="HONDA" /></li> 
<li><img src="images/SF10.jpg" alt="FEI LONG" /></li> 
<li><img src="images/SF11.jpg" alt="GUILE" /></li> 
<li><img src="images/SF12.jpg" alt="RYU" /></li> 
<li><img src="images/SF13.jpg" alt="SAGAT" /></li> 
<li><img src="images/SF14.jpg" alt="THWAK" /></li> 
<li><img src="images/SF15.jpg" 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. 插入jQuery和脚本包

<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中文网!

文档

jquery圆形旋转图片滚动切换效果

jquery圆形旋转图片滚动切换效果:这个效果比较特别,可爱,所以在外面网站没怎么看到过,有兴趣的朋友可以下载后自己使用。 PS: 经过修改已经兼容大众浏览器。效果图:Step1. 创建HTML <div id="rotatescroll"> <div class="viewport&q
推荐度:
标签: 图片 切换 旋转
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top