标签:判断 end content 相关 add 鼠标 lan ret hid
轮播图:就是图片自动切换式滚动。如下图所示。
上一张图片按钮:
oLeft - = width;
下一张图片按钮:
oLeft += width;
注意点:
1.var judge2 = false; //用于后面按钮判断,防止切图过程中鼠标多次点击)=》这点用的比较巧妙。
html代码:
<div id="main">
<div id="img_box">
<div id="plays">
<ul>
<li>
<img src="picture/rencai2.jpg" border="0">
</li>
<li>
<img src="picture/xinxiaoqu.jpg" border="0">
</li>
<li>
<img src="picture/lanfoan.jpg" border="0">
</li>
<li>
<img src="picture/lanfoan.jpg" border="0">
</li>
<li>
<img src="picture/huchunhua.jpg" border="0">
</li>
<li>
<img src="picture/lanfoan.jpg" border="0">
</li>
<li>
<img src="picture/yuanshi.jpg" border="0">
</li>
<li>
<img src="picture/changxueyan.jpg" border="0">
</li>
<li>
<img src="picture/tiaozhanbei.jpg" border="0">
</li>
<li>
<img src="picture/rencai2.jpg" border="0">
</li>
<li>
<img src="picture/xinxiaoqu.jpg" border="0">
</li>
<li>
<img src="picture/lanfoan.jpg" border="0">
</li>
<li>
<img src="picture/changxueyan.jpg" border="0">
</li>
</ul>
<a href="javascript:;" id="p_prev" style=" opacity: 0.90; filter: alpha(opacity = 90);"></a>
<a href="javascript:;" id="p_next" style=" opacity: 0.90; filter: alpha(opacity = 90);"></a>
<div id="plays_left"></div>
<div id="plays_right"></div>
</div>
</div>
</div>
css代码:
* {
margin: 0;
padding: 0;
border-width: 0;
font-family: 微软雅黑;
}
#main #img_box {
height: 400px;
width: 100%;
background: #ccc;
overflow: hidden;
}
#main #img_box #plays {
width: 1020px;
height: 400px;
margin: 0 auto;
position: relative;
}
#main #img_box #plays ul {
width: 13260px;
height: 400px;
position: absolute;
left: -2040px;
overflow: hidden;
}
#main #img_box #plays ul li {
float: left;
}
#main #img_box #plays #plays_left {
width: 1020px;
height: 400px;
position: absolute;
top: 0;
left: -1020px;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 997;
background-color: #fff;
}
#main #img_box #plays #plays_right {
width: 1020px;
height: 400px;
position: absolute;
top: 0;
right: -1020px;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 997;
background-color: #fff;
}
#main #img_box #plays #p_prev {
position: absolute;
top: 50%;
left: 0;
background: url(./images/left.png) no-repeat;
height: 45px;
width: 46px;
}
#main #img_box #plays #p_next {
position: absolute;
top: 50%;
right: 0;
background: url(./images/right.png) no-repeat;
height: 45px;
width: 46px;
}
js代码
//获取非行间样式
function getStyle(obj, name) {
if (obj.currentStyle) {
//IE
return obj.currentStyle[name];
}
else {
//FF、Chrome
return getComputedStyle(obj, false)[name];
}
}
//基本运动
function Move(obj, attr, iTarget, fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var cur = 0;
var speed;
if (attr == ‘opacity‘) {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
speed = (iTarget - cur) / 10;
}
else {
cur = parseInt(getStyle(obj, attr));
speed = (iTarget - cur) / 2;
}
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (iTarget == cur) {
clearInterval(obj.timer);
if (fnEnd) fnEnd();
}
else {
if (attr == ‘opacity‘) {
obj.style.filter = ‘alpha(opacity = ‘ + (cur + speed) + ‘)‘;//IE
obj.style.opacity = (cur + speed) / 100; //chrome FF
}
else {
obj.style[attr] = cur + speed + ‘px‘;
}
}
}, 30)
}
window.onload = function(){
var oPlays = document.getElementById(‘plays‘); //获取相关元素
var oBtn_prev = document.getElementById(‘p_prev‘); //左按钮
var oBtn_next = document.getElementById(‘p_next‘); //右按钮
var oImg_ul = oPlays.getElementsByTagName(‘ul‘)[0];
var oImg_li = oImg_ul.getElementsByTagName(‘li‘);
var judge2 = false; //用于后面按钮判断,防止切图过程中鼠标多次点击
var ofLeft = -2040; //运动初始值
//按钮渐显渐隐
oBtn_prev.onmouseover = function () {
Move(this, ‘opacity‘, 100);
};
oBtn_prev.onmouseout = function () {
Move(this, ‘opacity‘, 60);
};
oBtn_next.onmouseover = function () {
Move(this, ‘opacity‘, 100);
};
oBtn_next.onmouseout = function () {
Move(this, ‘opacity‘, 60);
};
//播放下张图片函数
function autoPlay() {
if (judge2) {
judge2 = false;
return;
}
else {
ofLeft -= 1020;
judge2 = true;
Move(oImg_ul, ‘left‘, ofLeft, function () {
if (ofLeft == -11220) {
oImg_ul.style.left = ‘-2040px‘;
ofLeft = -2040;
}
judge2 = false;
});
}
}
function lastPlay() {
if (judge2) {
judge2 = false;
return;
}
else {
ofLeft += 1020;
judge2 = true;
Move(oImg_ul, ‘left‘, ofLeft, function () {
if (ofLeft == -1020) {
oImg_ul.style.left = ‘-10200px‘;
ofLeft = -10200;
}
judge2 = false;
});
}
}
//上一张图片按钮
oBtn_prev.addEventListener(‘click‘, function () {
lastPlay();
});
//下一张图片按钮
oBtn_next.addEventListener(‘click‘, function () {
autoPlay();
});
//自动播放幻灯片
setInterval(autoPlay, 5000);
}
标签:判断 end content 相关 add 鼠标 lan ret hid
原文地址:https://www.cnblogs.com/Jomsou/p/9161809.html