您的位置：首页 > 其它

如何制造滑动图片公告的效果

2015-01-02 23:16 148 查看

在网上找了个代码自己修改了一下，但是不知道为什么在修改的时候调用这个文件时总是显示中文乱码。这个下次再详细说，先来说说滑动图片效果是怎么实现的吧。

先定义好style，使用.imgview块来定义好图片以及边框的样字。放在head里面。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/1.css" type = "text/css">
<style>
.imgview {
width: 640px;
height: 472px;
margin: 5px auto;
border: 3px solid #f6f6f6;
overflow: hidden;
}
.imgview img {
width: 640px;
height: 472px;
}
.imgview-nav {
width: 640px;
margin: 10px auto;
border: 2px solid #f6f6f6;
list-style-type: none;
}
.imgview-nav li {
float: left;
width: 15px;
height: 15px;
background: #b4d0eb;
border: 1px solid #f6f6f6;
margin: 7px;
}
span {
display: inline-block;
//内联元素,简单来说就是在同一行显示。
width: 30px;
height: 30px;
background: #b4d0eb;
border-radius: 50%;
}
</style>
</head>将图片已建表格形式（一行n列）插入到表格中，定义图片的编号，进行移动。注意使用function先定义好方法再调用。
<body>
<div class="wrap">
<div class="imgview" id="imgView">
<table cellspacing="0" cellpadding="0">
<tr>
<td><a href="bookstory1.php"><img src="pic1.jpg" alt=""></a></td>
<td><a href="bookstory2.php"><img src="pic2.jpg" alt=""></a></td>
<td><img src="pic3.jpg" alt=""></td>
</tr>
</table>
</div>
<ul class="imgview-nav" id="imgviewNav">
<li> 1</li>
<li> 2</li>
<li> 3</li>
</ul>
<span> Left </span>
<span> Right </span>

</div>
<script>
var imgView = document.getElementById('imgView'),
imgWidth = imgView.getElementsByTagName('img'),
btn = document.getElementsByTagName('li'),
len = btn.length,
imgNum = 0,
endPos = 0,
timer = null,
timer2 = null,
conSpan = document.getElementsByTagName('span');

conSpan[0].onclick = function (){
if (timer) {
clearInterval(timer);
};
if (timer2) {
clearInterval(timer2);
};
imgNum--;
if (imgNum < 0 ) {
imgNum = len;
};
timer = setInterval(move, 16);
timer2 = setInterval(autoMove, 3000);
}
conSpan[1].onclick = function (){
if (timer) {
clearInterval(timer);
};
if (timer2) {
clearInterval(timer2);
};
imgNum++;
if (imgNum == len ) {
imgNum = 0;
};
timer = setInterval(move, 16);
timer2 = setInterval(autoMove, 3000);
}
//绑定事件。添加移动效果
for (var i = 0; i < len; i++) {
btn[i].index = i;
btn[i].onmouseover = function(){
clearInterval(timer2);
imgNum = this.index;
if (timer) {
clearInterval(timer);
};
timer = setInterval(move, 16);
}
btn[i].onmouseout = function(){
timer2 = setInterval(autoMove, 2000);
}
};
//图片缓动效果，原理是保持步数不变，改变距离的同时改变速度
function move(){
var starPos = imgView.scrollLeft,
speed;
endPos = imgNum * imgWidth[0].offsetWidth;
speed = (endPos - starPos) / 20;
if (speed == 0) {
clearInterval(timer);
} else if(speed > 0){
speed = Math.ceil(speed);
} else {
speed = Math.floor(speed);
}
imgView.scrollLeft = starPos + speed;

}
//控制图片的自动滚动，通过控制索引值来控制图片的自动滚动
function autoMove(){
imgNum++;
if(imgNum == len) {
imgNum = 0;
};
timer = setInterval(move, 20);
}timer2 = setInterval(autoMove, 2000);
</script>
</body>

主界面有一个滑动感觉比以前酷炫多了。如下图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航