首页 > 代码库 > 实现一个水平切换的幻灯片
实现一个水平切换的幻灯片
本部分是临摹网上的例子供学习用，也算不容易总结一下用到的知识点：1. 如何扩展jquery，制作插件 2. js中的定时控制以及取消定时 3.基于jquery标签生成 4.基于juqery的标签事件
<head> <title></title> <script type="text/javascript" src="http://www.mamicode.com/jquery-1.7.1.js"></script> <script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/img/left.png">‘), rightArrow =$(‘<img style="float:left;top:15px;" src="http://www.mamicode.com/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);
实现一个水平切换的幻灯片
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。