本部分是临摹网上的例子供学习用，也算不容易总结一下用到的知识点：1. 如何扩展jquery，制作插件 2. js中的定时控制以及取消定时 3.基于jquery标签生成 4.基于juqery的标签事件
<head>
<title></title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
</head>
<body>
<div id="container">
</div>
<script>
var pictures = [];
for (var i = 1; i < 10; i++) {
pictures.push('img/' + i + '.jpg');
}
var opt = {
/*width*/
Width: 130,
/*height*/
Height: 90,
/*count of shows*/
countOfShow: 3,
/*timeInterval*/
timeInterval: 3000,
/*pictures*/
pictures: pictures
};//将要传递的参数定义
$('#container').slide(opt);//我们将要扩展的方法
</script>
</body>
(function($) {
$.extend($.fn, {//fn类似于命名空间
slide:function(opt) {
var picWidth=opt.Width,
picHeight = opt.Height,
pictures = opt.pictures,
picLength = pictures.length,
countOfShow = opt.countOfShow||2,
interval=opt.timeInterval||3000;
var $div = $('<div id="picFrame">').css('float', 'left')
.css('overflow', 'hidden').css('white-space', 'nowrap').css('margin', '0 10px'); //定义图框样式
//通过jquery生成标签，以及对标签属性的设定
$(pictures).each(function(idx, url) {
if (idx != 0) {
$('<img>').attr('src', url).css('margin-left','10px').css('cursor', 'pointer').appendTo($div);
} else {
$('<img>').attr('src', url).css('cursor', 'pointer').appendTo($div);
}
});
//jquery访问数组元素
var leftArrow = $('<img style="float:left;top:15px;" src="img/left.png">'),
rightArrow =$('<img style="float:left;top:15px;" src="img/right.png">');
//通过jquery生成标签，以及对标签属性的设定
$div.height(picHeight+5).width(picWidth*countOfShow+10*countOfShow-1);
$('<div>').append(leftArrow).append($div).append(rightArrow).appendTo(this); /*有先后顺序；*/
var unit = picWidth+ 10;
var timerInterval, timerTimeout;
rightArrow.css('opacity', 0.5);
rightArrow.css('cursor', '');
--------------------------------------------------------------------------------------
function goLeft() {
console.log('Lb:' + $div[0].scrollLeft);
if ($div[0].scrollLeft == (picLength - countOfShow) * unit) {
leftArrow.css('opacity', 0.5);
leftArrow.css('cursor', '');/*设置按钮失效*/
}
$div[0].scrollLeft += unit;
console.log('La:' + $div[0].scrollLeft);
rightArrow.css('opacity', '');
rightArrow.css('cursor', 'pointer');
}
function goRight() {
console.log('goRight' + $div[0].scrollLeft);
if ($div[0].scrollLeft <= 0) {
rightArrow.css('opacity', 0.5);
rightArrow.css('cursor', '');/*设置按钮失效*/
}
$div[0].scrollLeft -= unit;
console.log('goRight' + $div[0].scrollLeft);
leftArrow.css('opacity', '');
leftArrow.css('cursor', 'pointer');
}
----------------------------------------------------------
/*左右箭头图标*/
leftArrow.click(function() {
goLeft();
stopAutoPlay();
});
rightArrow.click(function() {
goRight();
stopAutoPlay();
});
/*end*/
$div.mouseover(function () {
clearInterval(timerInterval);//清除事件
});
$div.mouseout(autoPlay);
function autoPlay() {
if (interval) {
clearInterval(timerInterval);
}
timerInterval = setInterval(function() {
if ($div[0].scrollLeft ==831) {
$div[0].scrollLeft = 0;
return;
}//如果第一幅图片已经到最右端，则还原初始位置
goLeft();
}, interval);
}
function stopAutoPlay() {
clearInterval(timerInterval);
// if (timerTimeout) {
// clearTimeout(timerTimeout);
// }
//timerTimeout = setTimeout(autoPlay, interval);
}
autoPlay();
}
});
})(jQuery);