自己前天，也就是1月8日的时候早上自己写了一个图片滚动轮播(基于jQuery)。
其实几个月以前就有朋友问过我怎么做出和淘宝上面一样的滚动轮播，一直到现在也没有真正的写好，这次写得差不多了。
但是还有两个问题
- 没有做左右按钮效果
- 没有写成面向对象
代码先放上来存着，后续还会加上左右按钮并且试着写成面向对象。
demo : http://codepen.io/NightLostK/full/BypVeY
HTML:
<div class="pic_flash">
<ul>
<li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu04.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
<li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu01.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
<li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu02.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
<li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu03.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
<li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu04.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
<li><a href="javascript:void(0);"><img src="http://www.hyacelin.com/resources/wuyu01.jpg" width="100%" height="100%" onerror="javascript:this.src='images/small.jpg';" alt="pic"></a></li>
</ul>
</div>
CSS:
li { list-style:none;}
JAVASCRIPT:
$(function(){
//使用方法， 变量$picFlash 的 选择器对应上你的 类名或者ID名即可
var flash = (function(){
var $picFlash = $('.pic_flash');
//给图片列表添加类名
$picFlash.children(':first').attr('class','pic_list');
//设置样式
$('.pic_list li').css('float','left').children('a').css({'display':'block', 'float':'left'});
$('.pic_list li a img').css('float','left');
//获取图片宽度
var imgWitdh = $picFlash.find('img').eq(0).width();
//获取图片数量
var imgLen = $picFlash.find('img').length;
//获取图片高度
var imgH = $picFlash.find('img').eq(0).height();
//设置图片ul 宽高
$picFlash.children('ul').eq(0).width(imgWitdh*imgLen).height(imgH);
//设置轮播可见区域的宽高, 且隐藏溢出
$picFlash.height(imgH).width(imgWitdh).css({'overflow':'hidden','margin':'0 auto'});
$('.pic_list').css('margin-left', -imgWitdh + 'px');
/*******************添加小圆点按钮*************************************/
var oBtn = "<ul class='btn_list'></ul>";
$picFlash.append(oBtn);
for(var i = 0; i < imgLen-2; i++){
$('.btn_list').append('<li></li>');
}
//设置按钮 大小和位置单位
var btEm = imgH/20;
//按钮li 样式
$('.btn_list li').css({
'height':btEm + 'px',
'width':btEm + 'px',
'background-color':'#faf',
'margin-right':btEm/2 + 'px',
'float':'left',
'border-radius':btEm
});
//第一个按钮默认当前
$('.btn_list li').eq(0).css('background-color','#f6f');
//按钮ul 样式
$('.btn_list').width(7*btEm).height(btEm).css({
'position':'absolute',
'left':0,
'bottom':btEm/2 + 'px',
'left':imgWitdh/2-3*btEm + 'px'
});
$picFlash.css('position','relative');
//设置按钮序列
var btnIndex = 1;
var picIndex = 2;
//动画主函数
var movie = function(){
$('.btn_list li').eq(btnIndex).css('background-color','#f6f').siblings().css('background-color','#faf');
if(picIndex == imgLen-1){
$('.pic_list').stop(true).animate({'margin-left': -picIndex * imgWitdh + 'px'},'',function(){
$(this).css('margin-left', -imgWitdh + 'px');
});
}else{
$('.pic_list').animate({'margin-left': -picIndex * imgWitdh + 'px'});
}
}
var setInterValue = setInterval(function(){
movie()
btnIndex++;
picIndex++;
if(btnIndex == imgLen-2){
btnIndex = 0
}
if(picIndex == imgLen){
picIndex = 2
}
},2000)
var setTimeClose;
//按钮点击事件
$('.btn_list li').click(function(){
clearTimeout(setTimeClose);
var index = $(this).index() + 1;
$('.pic_list').stop(true,false);
clearInterval(setInterValue);
//清空周期后，重置 btnIndex 和 picIndex
btnIndex = index;
picIndex = index + 1;
if(btnIndex == imgLen-2){
btnIndex = 0
}
if(picIndex == imgLen){
picIndex = 2
}
$(this).css('background-color','#f6f').siblings().css('background-color','#faf');
console.log(index);
$('.pic_list').stop(true).animate({'margin-left':-index*imgWitdh + 'px'});
//继续周期
setTimeClose = setTimeout(function(){
setInterValue = setInterval(function(){
movie()
btnIndex++;
picIndex++;
if(btnIndex == imgLen-2){
btnIndex = 0
}
if(picIndex == imgLen){
picIndex = 2
}
},2000);
},2000);
});
//待定返回
return {
}
})();
});