因为我是iOS的出身，所以对于前端写滚动图什么的就很迷惘，不知道该怎么办，知道的资料也不多，最近学习到这里了，也就在这里记录一下
需要的技术
定时器 setInterval
缓动动画（也就是匀变速公式）leader = leader + (target - leader) / 10;
leader可以理解为速度，targert可以理解为路程
示例图
左右滑动轮播图.gif
焦点图.gif
左右滑动的代码
<!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" />
<title>无标题文档</title>
<style type="text/css">
body,ul,ol,li,img{margin:0;padding:0;list-style:none;}
#box{width:490px;height:170px;padding:5px;
position: relative;border:1px solid #ccc;margin:100px auto 0;overflow:hidden;}
.ad{width:490px;height:170px;overflow:hidden;position:relative;}
#box img{width:490px;}
.ad ol{position:absolute;right:10px;bottom:10px;}
.ad ol li{width:20px;height:20px;line-height:20px;border:1px solid #ccc;text-align:center;background:#fff;float:left;margin-right:10px;cursor:pointer;_display:inline;}
.ad ol li.current{background:yellow;}
.ad ul li{float:left;}
.ad ul{ position:absolute; top:0; width:2940px;}
.ad ul li.current{display:block;}
#arr {
display: none;}
#arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;}
#arr #right{right:5px; left:auto;}
</style>
</head>
<body>
<div id="box" class="all">
<div class="ad">
<ul id="imgs">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div><div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
</body>
</html>
<script>
function $(id) {return document.getElementById(id);}
$('box').onmouseover = function () {
$("arr").style.display = "block";
}
$('box').onmouseout = function () {
$("arr").style.display = "none";
}
//分析:右边点击一下之后可以左滑一张图 -- 相当于ul移动了一个盒子的宽度
// 左边点击一下之后可以右滑一张图,以此类推
$("right").onclick = function () {
target -= 490;
}
$("left").onclick = function () {
target += 490;
}
//还是缓动动画公式
var leader = 0,target = 0;
setInterval(function () {
//根据ul的leftposition的条件判断
// 因为轮播图在左右滑动的过程中,总会滑动到图片已经没有的时候
if (target >= 0){//就是已经不能再右滑了
target = 0;
}
if(target <= -1960){//就是已经不能再左滑了
target = -1960;
}
leader = leader + (target - leader) / 10;
//做动画
$("imgs").style.left = leader + "px";
},30)
</script>
焦点图代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点图</title>
<style>
*{margin:0;padding:0;}
ul,ol{list-style:none;}
img{vertical-align: bottom;} /* 也可以用display:block来清除缝隙*/
.slider{
width: 490px;
height: 170px;
border:1px solid #cccccc;
margin:100px auto;
padding: 5px;
position: relative;
}
.inner{
width: 100%;
height:100%;
background-color: pink;
position: relative;
/*多余部分减掉*/
overflow: hidden;
}
.inner ul{
width: 1000%;
/*考虑到ul是来做动画的,所以设置定位*/
position: absolute;
top:0;
left:0;
}
.inner ul li{
float: left;
}
/*针对整个ol都要上去,所以设置ol的定位即可*/
.slider ol{
position: absolute;
left:50%;
margin-left: -80px;
bottom: 10px;
}
.slider ol li{
float: left;
width: 18px;
height: 18px;
margin-right: 10px;
background-color: white;
text-align: center;
line-height:18px;
cursor: pointer;
}
.slider ol li.current{
background-color:orange;
}
</style>
</head>
<body>
<div class="slider" id="jd-slider">
<!--放图片的-->
<div class="inner">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<!--放圆点的-->
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
<script>
var jd = document.getElementById("jd-slider");
//获得第一个子控件(图片div)的子控件(ul)
var ul = jd.children[0].children[0];
//获得放圆点的标签
var ol = jd.children[1];
//获得ol所有的li
var olLis = ol.children;
//设计滑动运动学公式 -- leader = leader + (target - leader) / 10
//定义加速度和目标距离
var leader = 0,target = 0;
for(var i=0;i<olLis.length;i++){
//设置ol里每个li的索引
olLis[i].index = i;
olLis[i].onmouseover = function () {
for(var j=0;j<olLis.length;j++){
//排他算法
olLis[j].className = "";
}
this.className = "current";
//确定目标值 -- 就是当前索引号 * 一个盒子的宽度
target = -this.index * 490;
}
}
setInterval(function () {
leader = leader + (target - leader) / 10;
//ul做动画效果
ul.style.left = leader + "px";
},30);
</script>
网友评论