無縫滾動(dòng)
原理：
首先先復(fù)制 兩張圖片 （第一張和第二張） 放到最后面 （本質(zhì)上是第 5.6張）
ul 是盒子移動(dòng)的扫茅， 如果ul 的left 值 大于等于 4張圖片的寬度蹋嵌，就應(yīng)該快速復(fù)原為0 。
案例：
無縫滾動(dòng)诞帐，鼠標(biāo)放上時(shí)停止欣尼，移開則繼續(xù)滾動(dòng).gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
img {vertical-align: top; } /*取消圖片底部3像素距離*/
.box {
width: 600px;
height: 200px;
margin: 100px auto;
background-color: pink;
position: relative;
overflow: hidden;
}
.box ul li {
float: left;
}
.box ul {
width: 400%;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box" id="scroll">
<ul>
<li><img src="images/01.jpg" alt=""/></li>
<li><img src="images/02.jpg" alt=""/></li>
<li><img src="images/03.jpg" alt=""/></li>
<li><img src="images/04.jpg" alt=""/></li>
<li><img src="images/01.jpg" alt=""/></li>
<li><img src="images/02.jpg" alt=""/></li>
</ul>
</div>
</body>
</html>
<script>
var scroll = document.getElementById("scroll");
var ul = scroll.children[0];
var num = 0; //控制左側(cè)值 left
var timer = null; // 定時(shí)器
timer = setInterval(autoPlay,20);
function autoPlay() {
num--;
//console.log(num);
num<=-1200 ? num = 0 : num;
ul.style.left = num + "px";
}
scroll.onmouseover = function() { // 鼠標(biāo)經(jīng)過大盒子 停止定時(shí)器
clearInterval(timer);
}
scroll.onmouseout = function() {
timer = setInterval(autoPlay,20); // 開啟定時(shí)器
}
</script>
勻速動(dòng)畫
勻速動(dòng)畫.gif
勻速動(dòng)畫源碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
position: absolute;
top:100px;
left:0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button id="btn">開始</button>
<div class="box" id="bOX">
</div>
</body>
</html>
<script>
var btn = document.getElementById("btn");
var box = document.getElementById("bOX");
var num = 0;
var timer = null;
btn.onclick = function() {
timer = setInterval(function(){
num++;
if(num >=500)
{
clearInterval(timer);
}
else
{
box.style.left = num + "px";
}
},10)
}
</script>
緩動(dòng)動(dòng)畫
勻速動(dòng)畫，看起來停蕉，效果太簡單。
緩動(dòng)動(dòng)畫公式:
一個(gè)盒子初始值 是 0 要走到 400 px 的位置
假如說钙态，初始值 leader 0 target 400
box.style.left = xxxx + “px”
leader = leader + (target - leader ) /10 ;
緩動(dòng)動(dòng)畫如下效果：
緩動(dòng)動(dòng)畫.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
position: absolute;
top:100px;
left:0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button id="btn">開始</button>
<div class="box" id="bOX"></div>
</body>
</html>
<script>
var btn = document.getElementById("btn");
var box = document.getElementById("bOX");
var timer = null;
var leader = 0;
var target = 500;
btn.onclick = function() {
setInterval(function(){
leader = leader + (target - leader )/10;
box.style.left = leader + "px";
},30)
}
</script>
焦點(diǎn)圖：
焦點(diǎn)圖.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
ul,ol{list-style:none;}
img {
display: block; /* 清除圖片底冊(cè) 3像素縫隙*/
}
.slider {
width: 490px;
height: 170px;
border:1px solid #ccc;
margin: 100px auto;
padding:5px;
position: relative;
}
.inner {
width: 100%;
height: 100%;
background-color: pink;
position: relative;
/*overflow: hidden*/
}
.inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}
.inner ul li {
float: left;
}
.slider ol {
position: absolute;
left: 50%;
margin-left: -80px;
bottom: 10px;
}
.slider ol li{
float: left;
width: 18px;
height: 18px;
background-color: #fff;
margin-right: 10px;
text-align: center;
line-height: 18px;
cursor: pointer;
}
.slider ol li.current {
background-color: orange;
}
</style>
</head>
<body>
<div class="slider" id="jd">
<div class="inner">
<ul>
<li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/05.jpg" alt=""/></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");
var ul = jd.children[0].children[0];
var ol = jd.children[1];
var olLis = ol.children;
var leader = 0, target = 0; // target 目標(biāo)位置
for(var i=0; i<olLis.length; i++)
{
olLis[i].index = i; // 每個(gè)li 的索引號(hào)
olLis[i].onmouseover = function() {
for(var j=0;j<olLis.length;j++)
{
olLis[j].className = "";
}
this.className = "current";
target = -this.index * 490; // 目標(biāo)位置 就是用當(dāng)前的索引號(hào)乘以 一個(gè)盒子的寬度
}
}
setInterval(function() {
leader = leader + (target - leader ) / 10;
ul.style.left = leader + "px";
},30);
</script>
左右輪播圖.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>無標(biāo)題文檔</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><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></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)}
var box = document.getElementById("box");
box.onmouseover = function() {
$("arr").style.display = "block";
}
box.onmouseout = function() {
$("arr").style.display = "none";
}
$("right").onclick = function() {
target -= 490;
}
$("left").onclick = function() {
target += 490;
}
//緩動(dòng)動(dòng)畫
var leader = 0,target = 0;
setInterval(function() {
if(target >= 0)
{
target = 0;
}
else if(target <= -1960)
{
target = -1960;
}
leader = leader + (target - leader) / 10;
$("imgs").style.left = leader + "px";
},30)
</script>
以上素材圖片獲然燮稹：
鏈接：http://pan.baidu.com/s/1i5foF45 密碼：l1hu
