鼠标滚轮及左右键切换图片

最新推荐文章于 2021-11-28 14:07:20 发布

j564712400

最新推荐文章于 2021-11-28 14:07:20 发布

阅读量1.2k

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/j564712400/article/details/40352471

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>鼠标滚轮及左右键切换图片</title>
<style type="text/css">
*{ margin:0; padding:0;}
body {background:#000;}
/* ---------------------------------- */
.box {height:500px; width:800px; margin:0 auto; position:relative; overflow:hidden; }
.box ul { position:absolute; top:0; left:0;z-index:1;}
.box ul li { position:relative;list-style:none;float:left; width:800px; height:500px; overflow:hidden;}
.box ul li span{ display:block;position:absolute; left:0; bottom:0; z-index:5; width:100%; height:30px; font:700 14px/30px Tahoma, Geneva, sans-serif; text-align:center; color:#FFF;background:rgba(0,0,0,.5);background:#000\9;filter:alpha(opacity=50)\9;}
.box p { line-height:30px; position:absolute; top:1px; left:0; width:100%; z-index:2; text-align:center;}
.box p a { display:inline-block; height:30px; padding:0 10px; font:14px/30px Arial, Helvetica, sans-serif;background:#000; color:#fff; text-decoration:none; filter:alpha(opacity:80); opacity:0.8; margin-right:1px;}
.box p .active {background:yellow; color:#000; font-weight:bold; }
/* ---------------------------------- */
</style>
<script src="http://files.cnblogs.com/lbsgood/Animate2.js"></script>
<script type="text/javascript">

var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}
var MouseSlide=function(option){
if(typeof(arguments[0]) == 'undefined'){ return false; }
var option = typeof(arguments[0]) == 'object' ? arguments[0] : {};

this.setoptions(option);
this.data = this.option.data;
if(this.data.length == 0){ return; }
this.total = this.data.length;
this.parent = this.option.parent;
this.bAuto = this.option.bAuto;
this.bAuto && ( this.delay = this.option.delay );
this.bKey = this.option.bKey;
this.bMouse = this.option.bMouse;
this.bTitle = this.option.bTitle;

this.items = [];
this.thumbs = [];
this.index = 0;
this.timer = null;
this.paused = false;
this.init();
}
MouseSlide.prototype = {
//读取数据
readdata: function(){
for(var i=0; i<this.total; i++){
var data = this.data[i];
//每项图片及图片说明
var item = document.createElement('LI');
item.innerHTML ='<img src="' + data.src + '" />';
if(this.bTitle){
var title = document.createElement('span');
title.innerHTML =data.txt;
item.appendChild(title);
}
this.items.push(item);
this.domitems.appendChild(item);
//对应数字指标
var thumb = document.createElement('A');
thumb.innerHTML = i+1;
this.thumbs.push(thumb);
this.domthumbs.appendChild(thumb);
}
},
//设置默认参数
setoptions: function(option){
this.option = {
data: [],//读取的数据
parent: document.body,//插入的父节点
bTitle: false,//是否显示文字说明（默认否）
bAuto: false,//是否自动播放（默认否）
bKey: false,//是否键盘控制（默认否）
bMouse: false,//是否鼠标滚轮控制（默认否）
delay: 5000,//自动播放间隔时间（自动播放时有效）
onStart: function(){},//滚动开始时执行
onComplete: function(){}//滚动结束时执行
};
Extend(this.option, option || {});
},
//初始化
init: function(){
this.dom = document.createElement('DIV');
this.dom.className = 'box';
this.domitems = document.createElement('UL');
this.domthumbs = document.createElement('P');
this.readdata();
this.dom.appendChild(this.domitems);
this.dom.appendChild(this.domthumbs);
this.parent.appendChild(this.dom);
this.initset();
this.bind();
},
//初始设置
initset: function(){
this.thumbs[0].className = 'active';
this.liWidth = 800;
this.domitems.style.width = this.liWidth * this.total + 'px';
},
//滚动核心
scroll: function(){
var _this = this;
_this.onStart && _this.onStart();
for(var i=0;i<_this.total;i++) {_this.thumbs[i].className = '';}
_this.thumbs[_this.index].className = 'active';
Animate(_this.domitems,{left: -_this.index*_this.liWidth},function(){
_this.onComplete && _this.onComplete();
});
},
//鼠标移动事件
onevent: function(){
var _this = this;
for(var i=0; i<_this.total; i++){
_this.thumbs[i].index=i;
_this.thumbs[i].οnmοuseοver=function(){
_this.timer && _this.stop();
_this.index=this.index;
_this.scroll();
};
}
},
//鼠标滚轮事件
mousewheel: function(){
var _this = this;
function scrollEvent(e){
_this.timer && _this.stop();
e = e || window.event;
var down=false;
if(e.wheelDelta){
down = e.wheelDelta < 0 ? true : false;
}else{
down = e.detail < 0 ? false : true;
}
down ? _this.index++ : _this.index--;;
_this.index == _this.total && (_this.index = _this.total-1) || _this.index < 0 && (_this.index = 0);
_this.scroll();
e.preventDefault ? e.preventDefault() : e.returnValue = false;
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
return false;
}
if(_this.dom.addEventListener){ _this.dom.addEventListener('DOMMouseScroll', scrollEvent, false); }
_this.dom.onmousewheel=scrollEvent;
},
//键盘事件
keyup: function(){
var _this = this;
document.οnkeyup=function(e){
_this.timer && _this.stop();
e = e || window.event;
e.keyCode==37 && _this.index--;
e.keyCode==39 && _this.index++;
_this.index == _this.total && (_this.index = _this.total-1) || _this.index < 0 && (_this.index = 0);
_this.scroll();
_this.bAuto &&_this.play();
}
},
//绑定相关事件
bind: function(){
var _this = this;
this.onevent();
this.bKey && this.keyup();
this.bMouse && this.mousewheel();
this.bAuto && this.play();
this.bAuto && ( this.dom.onmouseover = function(){ _this.stop();} );
this.bAuto && ( this.dom.onmouseout = function(){ _this.play(); } );
},
//自动播放
play: function(){
var _this = this;
if(_this.paused){ _this.paused = false;}
_this.timer && _this.stop();
this.timer = setInterval(function(){
_this.index++ >= _this.total - 1 && (_this.index = 0);
!_this.paused && _this.scroll();
}, this.delay);
},
//播放停止
stop: function(){
clearInterval(this.timer);
this.timer = null;
}
}

/*----------------------------------------------------*/

var data=[
{src:'http://bbs.fjsen.com/attachments/month_1012/101229092302f2e54ab36eafc0.jpg',txt:'看～这是图片1……'},
{src:'http://bbs.fjsen.com/attachments/month_1012/101229092416a916fa6a022b44.jpg',txt:'看～这是图片2……'},
{src:'http://bbs.fjsen.com/attachments/month_1012/101229092716f7919c539e735f.jpg',txt:'看～这是图片3……'},
{src:'http://bbs.fjsen.com/attachments/month_1012/1012290926def09a9d8c2716ec.jpg',txt:'看～这是图片4……'},
{src:'http://bbs.fjsen.com/attachments/month_1012/1012290928baffb0e7bac582da.jpg',txt:'看～这是图片5……'},
{src:'http://bbs.fjsen.com/attachments/month_1012/1012290927676d70a704e4df9d.jpg',txt:'看～这是图片6……'},
{src:'http://bbs.fjsen.com/attachments/month_1012/101229092872845915443933f5.jpg',txt:'看～这是图片7……'},
{src:'http://bbs.fjsen.com/attachments/month_1012/1012290931aea6945e570846aa.jpg',txt:'看～这是图片8……'}
]
window.οnlοad=function(){
var mySlide = new MouseSlide({
data: data,
bAuto: true,
delay: 3000,
bKey: true,
bMouse: true,
bTitle: true
});
mySlide.onStart = function(){
//到最后一张停止自动播放
if(mySlide.index === 7){
mySlide.stop();
}
};
};
</script>
</head>
<body>
</body>
</html>