最近修改网站时,发现这个古老的网站图片轮播居然是用flash做的,图片地址作为参数传到flash做的控件里去,然后这个控件就负责播放,但是这个控件并没有width和height参数,也就是说,大小是固定的,这就比较麻烦了,想改一改尺寸都不行,用flash做一个轮播的动画应该不难,但是要做成控件,还要能接收参数就得好好研究flash及其脚本编程不可,flash用处似乎并不大,已经很久很久没用过了,不想再去深入学习了。现在jquery、css功能这么强大,何不用这些技术来实现呢?
首先,肯定不想重复发明轮子,网上找下来很多类似的插件以及js源码,不过大多数说明文档都不详细,照抄例子可以,但是想要自定义一下就无从下手,还是得研究源码,源码都还不短,真还不太好办。然后还是找一找功能比较全、文档也详细、活跃的开源代码吧,最典型的是slick和jcarousel,但是简单试用下来slick显示不正常,不知道是哪里设置不对,而jcarousel使用比较复杂,控制播放之类的功能都做成插件形式,这倒是符合现在的组件化的潮流,按需分发,小巧且灵活,不过这么简单一个东西,也不必要这样吗?值得怀疑。总之,感觉这两个功能都是强大的,就是要用好还是得仔细琢磨文档,都是E文,也很麻烦。麻烦并不可怕,只不过总是觉得轮播几个图片不值得这么麻烦,所以还是考虑自己发明轮子吧。(这个真的是轮子会scroll的)
然后,找思路,最直接的想法就是在页面上开一个窗口,然后把图片拼成一长条放在下面一层,图片在窗口下面移动,就跟放电影或者幻灯片一样。挺简单的。窗口就用
主要代码如下:
1.html部分
<section class="scrollboard">
<ul class="scroll-content">
<li class="scroll-item">
<img src="img/20_20180710150722_Vz88H.jpg" alt="2018年7月5日,XXXX仪式现场" />
<div class="item-title">
2018年7月5日,XXXX仪式现场
</div>
</li>
<li class="scroll-item">
<img src="img/20_20180709170721_xA0ER.jpg" alt="2018年7月5日上午,XXXX现场" />
<div class="item-title">
2018年7月5日上午,XXXX现场
</div>
</li>
<li class="scroll-item">
<img src="img/20_20180710150749_PcWOO.jpg" alt="2018年7月5日,参加活动人员现场合影留念" />
<div class="item-title">
2018年7月5日,参加活动人员现场合影留念
</div>
</li>
<li class="scroll-item">
<img src="img/20_20180712160754_oVV8v.jpg" alt="7月12日上午,XXXX召开XXXX会" />
<div class="item-title">
7月12日上午,XXXX召开XXXX会
</div>
</li>
<li class="scroll-item">
<img src="img/20_20180711150757_g29ql.jpg" alt="2018年7月11日上午,XXXX召开XXXX培训会,图为会议现场" />
<div class="item-title">
2018年7月11日上午,XXXX召开XXXX培训会,图为会议现场
</div>
</li>
</ul>
</section>
使用了几个css类,用于控制样式和jQuery定位,元素名不重要,重要的是层次结构。比上面简单的描述多了一个显示说明文字的div。本来可以在js里从img的alt取值生成的,但是似乎没有这个必要。
2.css部分
`.scrollboard{
position:relative;
overflow:hidden;
width:512px;
height:288px;
border:1px solid transparent;
}
.scroll-content{
position:relative;
padding-left:0;
list-style:none;
}
.scroll-content .scroll-item{
float:left;
position:relative;
}
.scroll-content .scroll-item .item-title{
position:absolute;
bottom:0;
width:100%;
height:30px;
line-height:30px;
text-align:center;
filter:alpha(opacity=50);
background:rgba(0, 0, 0, 0.5) none repeat scroll 0 0 !important;
color:#dfecf7;
}
.scroll-pageination{
position:absolute;
bottom:30px;
right:3px;
}
.scroll-pageination span{
padding:0 5px;
color:#fff;
background:#777;
}
.scroll-pageination .curr{
background:#cc0000;
}
其实css部分才是最主要部分,实现上面的思路主要靠css,完成之后页面效果就出来了,除了不会动之外,该显示的图片,文字说明都有并且都在设计的位置。另外,义了.ageination类,是用来控制页码样式的,本来也是写在里的,不过就是123456几个数字而已,感觉每次写这样的html也是太傻,后来改到动生成了,不过这不重要。
3.js部分
```(function ($){
var interval = 5000;
var speed = 500;
var timeout;
var total;
var current = 0;
var target = 1;
var $content;
var $pagination;
$.fn.extend({
"scrollboard": function () {
total=this.children(":first").children().length;
$content = $(".scroll-content",this);
/*修改容器宽度,以使其容纳得下所有图片;*/
$content.width(this.width()*total);
/*使用容器的尺寸替换每个显示项目的尺寸*/
var width=this.css("width");
var height=this.css("height");
for(var i=0;i<total;i++){
$content.find(".scroll-item img").eq(i).css("width",width);
$content.find(".scroll-item img").eq(i).css("height",height);
}
/*构造页码(pagination)*/
console.log("total:"+total);
$pagination=$("<div class='scroll-pageination'></div>");
for (var i=0;i<total;i++){
if(i==0){
$pagination.append($("<span class='curr'>"+(i+1)+"</span>"));
}else{
$pagination.append($("<span>"+(i+1)+"</span>"));
}
}
this.append($pagination);
/*定义鼠标移到内容上的处理,两个回调函数,一个是移入时,一个是移出时。
setInterval()、clearInterval()是DOM函数*/
$content.hover(
function(){
clearInterval(timeout);
},
function(){
timeout = setInterval(autoswitch,interval);
}
);
/*鼠标移到页码上时:停止自动播放并切换到指定页*/
$pagination.children().each(function(){
$(this).mouseover(function(){
clearInterval(timeout);
$content.stop(true);//停止动画
switchto($(this).index());
});
});
//timeout = setInterval(autoswitch,interval);
}
});
function switchto(target) {
console.log("switchTo:"+target);
if(target>=total){
target = 0;
}
if(target<0) {
target = total-1;
}
$content.animate({left:"-"+$content.children(":first").width()*target+"px"},speed);
$pagination.children().eq(current).removeClass("curr");
$pagination.children().eq(target).addClass("curr");
current = target;
}
function autoswitch() {
target = current + 1;
switchto(target);
}
})(jQuery);
代码是仿扩展jQuery的方式写的,但是并没有自定义参数,自己用需要修改的话直接改代码就行了,要正式发布的话再完善。主要部分一是初始化,再就是switchto函数,自动播放的话定义一个计时器,再调用switchto播放下一张图。然后就是鼠标悬停时到图片上时停止倒计时,悬停到页码上直接切换而几个事件而已 。
最后就是调用,在html这一部分代码之后,用jQuery的方式调用,即:$(“.scrollboard”).scrollboard();