今天在网上找到一款回旋滚动效果，拿出来和大家一起分享。先上效果图：
html 代码：
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>jquery-roundabout</title>
<style type="text/css">
*{padding:0;margin:0;}
body{font:24px tahoma;}
ul{list-style:none;margin:100px auto 0;width:500px;height:200px;}
li{line-height:200px;height:200px;width:300px;background:#ccc;text-align:center;cursor:pointer;}
li.roundabout-in-focus{cursor:default;}
</style>
</head>
<body>
<ul >
<li>Block 1</li>
<li>Block 2</li>
<li>Block 3</li>
<li>Block 4</li>
<li>Block 5</li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/blog_article/js/jquery.roundabout.min.js"></script>
<script type="text/javascript">
$(function(){
好吧，上次说要赶紧的补上几篇文章，结果淡定的失约了。。。又是近一个月才发一篇，真是让人郁闷。发现最近总是抽不出时间了，基本都是一个项目接一个项目的安排，自己不是在空闲的时候找不到合适的话题，就是在有纠结话题的时候抽不出时间了。所以我决定一段时间内先把自己纠结过的问题先归纳下知识点，等空闲的时候在一个一个深入研究，然后再整理成文章后分享出来。
开始进入正题，提到slider，过去一直都是用css+js来配合实现相关的切换效果。听过大家一直讨论使用html5+css3的实现方式，自己却一直没有动手实现过。好吧，这次我有时间来玩下css3了。其实，我也是被微博上的一条消息（原网址在这里http://csscience.com/responsiveslidercss3/）给吸引过来的，看到别人实现的效果很赞，然后自己就有了动手做一把的冲动。
一、效果图
跟过去用js来实现的效果看上去差不了太多，但是整体感觉很优雅。好吧，css3的强大之处在于，我写了很少的代码，就实现了比较复杂的效果。但是这个示例也有不太完美的地方，就是在两张图片切换的时候，如果中间间隔有图片，那么在css3动画的执行过程中还是会看到，比较不给力。不过想想，这可是纯css3来实现的效果啊，用js来实现的复杂的html结构变动在这里可看不到，所以上面的效果很难简单用css3来实现。
二、html结构
2
3 <input checked type="radio" name="slider" id="slider1">
4 <input type="radio" name="slider" id="slider2">
5 <input type="radio" name="slider" id="slider3">
6 <input type="radio" name="slider" id="slider4">
7 <input type="radio" name="slider" id="slider5">
8
9 <div id="sliders">
10 <div id="overflow">
11 <div >
12 <article>
13 <div >
14 <h1>Title1</h1>
15 <a href="#">Description1</a>
16 </div>
17 <img src="/blog_article/img/pic1.png"/>
18 </article>
19 <article>
20 <div >
21 <h1>Title2</h1>
22 <a href="#">Description2</a>
23 </div>
24 <img src="/blog_article/img/pic2.png"/>
25 </article>
26 <article>
27 <div >
28 <h1>Title3</h1>
听说 IE10 全面支持 HTML5，于是在自己的 Win7 SP1 64 位操作系统上安装了，想体验一下。没想到一打开浏览器，滚动栏右侧有黑条，输入网址回车电脑立马蓝屏重启了。网上搜索了一下，说卸载 IE10 就好了，卸载步骤：
1、单击“开始”按钮，在搜索框中输入“程序和功能”，然后在左窗格中选择“查看已安装的更新”；
2、在“卸载更新”下，向下滚动到“Microsoft Windows”部分。右键单击“Windows Internet Explorer 10”，单击“卸载”，然后在出现提示时单击“是”，然后重启电脑。
貌似网上很多人卸载 IE10 以后蓝屏问题就好了，可是我的电脑卸载以后还是蓝屏，悲催啊。
继续在网上搜索，终于找到一个靠谱的方法：关闭所有IE窗口，单击开始按钮，在搜索框内输入 inetcpl.cpl，按回车。在 Internet 属性对话框中点击高级，勾选加速的图形下面的使用软件呈现而不使用 GPU 呈现*，点击确定。 搞定！打开 IE9 浏览器时，右侧的黑边没有了，也不会蓝屏了。
希望这篇博文《Win7 安装 IE 10 后电脑蓝屏重启及右侧黑条的解决办法》能给遇到相同问题的朋友有所帮助。
您可能感兴趣的相关文章- 让人爱不释手的13套精美网页图标素材
- 精心挑选的优秀 jQuery Ajax 分页插件
- 10套精美的免费网站后台管理系统模板
- Web前沿：那些让人惊叹的CSS3应用
- 十款精心挑选的在线CSS3代码生成工具
本文链接：Win7安装IE10电脑蓝屏重启及右侧黑条的解决办法
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
hide
本文链接