02/25
2017
前两天做的项目中使用了SuperSlide，做了个焦点图切换效果和图片向左滚动展示的效果。使用时参照官方demo做了些细微改动，现在我再把代码单独存一份，方便以后使用。
1.焦点图切换（通屏）：
2.图片向左滚动：
SuperSlide的demo
11/8
2016
这个banner带指示器和左右切换按钮，通屏不通屏皆可使用，有自动播放功能，可以设置是否循环展示。当鼠标放在banner区域时，也可以使用左右方向键来控制banner的切换。兼容IE8及以上浏览器。
Read More →
JavaScript制作的带控制按钮的banner
09/23
2016
给文章或其他作品打分是很常见的功能，不过我之前做的网站里都没用到这个功能，于是今天自己写了个demo。
可以设置任意颗星星数；
可以设置一开始显示评分还是不显示评分；
每个人只能打分一次。
这个demo一星一分。
代码如下：
<div class="rate" data-value="0">
<i title="1分"></i><i title="2分"></i><i title="3分"></i><i title="4分"></i><i title="5分"></i><i title="6分"></i><i title="7分"></i><i title="8分"></i><i title="9分"></i><i title="10分"></i>
</div>
<style type="text/css">
.rate{height: 26px;}
.rate i{display: inline-block;width: 26px;height: 100%;background-image: url(/f/pixiv_star.png);cursor: pointer;background-position: 0 0;}
.rate .bgNone{background-position: 0px 0px;}
.rate .bgHover{background-position: -26px 0px;}
.rate .bgSure{background-position: -52px 0px;}
.cursordef i{cursor:default;}
</style>
<script src="ratev0.1.js"></script>
外层div有个data-value属性，表示预设评分。设置为0则表示不显示这幅作品的评分，星星都不亮；大于0则为当前得分，并且会亮起对应的星星。
里面的每个i标签是一个星星，数量可以随意调整。
css样式里设置宽高来布局，并设置背景图片。把三种星星样式做到一张图片上，使用背景定位让三个样式显示三种背景图片。分别是bgNone（这个星星不亮的图案），bgHover（鼠标经过时星星亮起来），bgSure（这个星星有评分）。
当用户点击了一个星星后，会产生评分，之后就不能再点击了。
网页评分工具demo
06/17
2016
最近做手机站用到了TouchSlide，记录一些现成的可以套用的范式。
banner切换：
<div id="focus" class="focus1">
<div class="hd">
<ul class="clearfix"></ul>
</div>
<div class="bd">
<ul>
<li><a href="swtlink"><img _src="images/banner1.jpg" src="images/blank.png" /></a></li>
<li><a href="swtlink"><img _src="images/banner2.jpg" src="images/blank.png"/></a></li>
<li><a href="swtlink"><img _src="images/banner1.jpg" src="images/blank.png"/></a></li>
</ul>
</div>
</div>
<script type="text/javascript">
TouchSlide({
slideCell:"#focus",
titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
mainCell:".bd ul",
effect:"left",
autoPlay:true,//自动播放
autoPage:true, //自动分页
switchLoad:"_src" //切换加载，真实图片路径为"_src"
});
</script>
对应的css样式：
.banner{position: relative;}
.banner .hd{position: absolute;width: 54px;bottom: 3px;right: 3px;z-index: 999;}
.banner .hd li{width: 10px;height: 10px;background: #fff;border-radius: 10px;display: inline-block;margin:0 4px;overflow: hidden;color: #fff;cursor: pointer;}
.banner .hd li.on{background: #FFCC00;color: #FFCC00;}
tab切换：
<div id="tabBox1" class="tabBox">
<div class="hd">
<ul class="clearfix">
<li class="on"><a href="javascript:void(0)">标题1</a></li>
<li><a href="javascript:void(0)">标题2</a></li>
</ul>
</div>
<div class="bd" id="tabBox1-bd">
<div>内容</div>
<div>内容</div>
</div>
<script type="text/javascript">
TouchSlide({slideCell:"#tabBox1",effect:"leftLoop"});
</script>
</div>
TouchSlide的一些记录
07/21
2015
之前发了个《js左右切换展示的效果》，作用是在小区域内展示内容并且可以左右来回切换。放在大区域用就不合适了，于是改大之后加上了指示器，加上了指示器跳转，加上了自动播放，改到最后改成了banner……很无语，单独放出来吧。
代码也很简单，需要修改功能的话也不难。
js左右切换带控制按钮的banner
07/21
2015
