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

 更新时间:2011年01月19日 13:30:01   作者:  
今回给大家介绍个圆形旋转的效果,基于圆形的物理特性,又圆上任意一点可以作为一个控制按钮,然后拖动它来使图片轮换。
这个效果比较特别,可爱,所以在外面网站没怎么看到过,有兴趣的朋友可以下载后自己使用。
PS: 经过修改已经兼容大众浏览器。
效果图:

在线演示:http://demo.jb51.net/js/ImagesRotateScroll/index.html
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>

打包下载 https://www.jb51.net/jiaoben/34107.html

相关文章

  • jQuery实现强制cookie过期方法汇总

    jQuery实现强制cookie过期方法汇总

    本文是对jquery 强制cookie失效的解决方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2015-05-05
  • 使用jquery选择器如何获取父级元素、同级元素、子元素

    使用jquery选择器如何获取父级元素、同级元素、子元素

    这篇文章主要介绍了使用jquery选择器如何获取父级元素、同级元素、子元素,需要的朋友可以参考下
    2014-05-05
  • jquery.cookie.js使用指南

    jquery.cookie.js使用指南

    这篇文章主要介绍了jquery.cookie.js使用方法,非常的全面,这里推荐给有需要的小伙伴。
    2015-01-01
  • JQuery实现动态添加删除评论的方法

    JQuery实现动态添加删除评论的方法

    这篇文章主要介绍了JQuery实现动态添加删除评论的方法,涉及jQuery处理鼠标事件及json数据的相关技巧,需要的朋友可以参考下
    2015-05-05
  • jquery 打开窗口返回值实现代码

    jquery 打开窗口返回值实现代码

    网页上常常有这种效果,当你的鼠标移入一个输入框时会弹出一个对话框让你选择填入该对话框的值,现在我们用Jquery简单的实现这种效果。
    2010-03-03
  • jQuery的12招常用技巧分享

    jQuery的12招常用技巧分享

    jquery是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器。由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
    2011-08-08
  • 限制上传文件大小和格式的jQuery插件实例

    限制上传文件大小和格式的jQuery插件实例

    这篇文章主要介绍了限制上传文件大小和格式的jQuery插件,实例分析了对上传文件的大小及格式的限制功能,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • jQuery中的CSS样式属性css()及width()系列大全

    jQuery中的CSS样式属性css()及width()系列大全

    本文给大家分享jQuery的CSS样式属性css(),width()系列,offset()与position(),scrollLeft()与scrollTop()的相关知识,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2021-08-08
  • jquery实现仿Flash的横向滑动菜单效果代码

    jquery实现仿Flash的横向滑动菜单效果代码

    这篇文章主要介绍了jquery实现仿Flash的横向滑动菜单效果代码,可实现滑块跟随鼠标滑动效果的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jquery购物车结算功能实现方法

    jquery购物车结算功能实现方法

    这篇文章主要为大家详细介绍了jquery购物车结算功能的实现方法,购买多个商品进行统一结算,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11

最新评论