轮播图—纯js(javascript)实现：
2016-12-01 本文已影响0人
东阳啊
纯js实现：
要求：算了，还是先看图吧
01.gif
实现效果：
图片自动轮播，鼠标移入停止，移出继续轮播
点击左右按钮实现切换
点击下标焦点实现切换
1、首先实现无缝滚动：
效果：
02.gif
原理：
让ul里的第一个 li 和最后一个 li 内容相同；
通过改变left值，让ul在box中移动；
当移动到最后一个的时候，在让ul回到其实位置；
屏幕快照 2016-11-30 下午4.49.26.png
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
background: red;
width: 600px;
height: 300px;
overflow: hidden;
margin:100px auto;
position: relative;
}
img{
width: 600px;
height: 300px;
vertical-align: top;/*取消底边的3px */
}
ul{
width: 500%;
height: 300px;
list-style: none;
position: absolute;
left: 0;
top: 0;
}
li{
float: left;
}
</style>
<body>
<div class="box" id="box">
<ul id="inner-box">
<li><img src="banner/banner1.jpg"></li>
<li><img src="banner/banner2.jpg"></li>
<li><img src="banner/banner3.jpg"></li>
<li><img src="banner/banner4.jpg"></li>
<li><img src="banner/banner1.jpg"></li>
</ul>
<ol class="">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
<script type="text/javascript">
var oBox = document.getElementById("box");
var oUl = document.getElementById("inner-box");
var a = 0; //定义一个变量用于设置left值
var timer = null; //定义一个计时器
var target = 500;
timer = setInterval(autoPlay,10);// 定义计时器每25毫秒执行一次
function autoPlay() { //执行每次执行函数，left值减1
a--;
a <= -400 ? a = 0 :a;
oUl.style.left = a+"%";
}
oBox.onmouseover = function () { //移出时清除计时器
clearInterval(timer);
}
oBox.onmouseout=function(){ //移入时开始计时器
timer = setInterval(autoPlay,10);
}
</script>
</html>
2、加入缓冲的匀速运动：
原里：改变每次变化的速度
05.gif
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓冲无缝滚动</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
background: red;
width: 600px;
height: 300px;
overflow: hidden;
margin: 100px auto;
position: relative;
}
img {
width: 600px;
height: 300px;
vertical-align: top;
/*取消底边的3px */
}
ul {
width: 500%;
height: 300px;
list-style: none;
position: absolute;
left: 0;
top: 0;
}
li {
float: left;
}
</style>
<body>
<div class="box" id="box">
<ul id="inner-box">
<li><img src="banner/banner1.jpg"></li>
<li><img src="banner/banner2.jpg"></li>
<li><img src="banner/banner3.jpg"></li>
<li><img src="banner/banner4.jpg"></li>
<li><img src="banner/banner1.jpg"></li>
</ul>
</div>
</body>
<script type="text/javascript">
var oBox = document.getElementById("box");
var oUl = document.getElementById("inner-box");
var cur = 0; //定义一个变量用于设置left值
var timer = null; //定义一个计时器
var target = 0;
timer = setInterval(autoPlay, 2000); // 定义计时器每25毫秒执行一次
function autoPlay() { //执行每次执行函数，left值减1
if (target <= -400) {
cur = 0;
target = -100;
} else {
target -= 100;
}
var timer1 = null;
timer1 = setInterval(autoPlay, 30); //设置定时器每30毫秒执行一次
function autoPlay() {
if (cur == target) {
clearInterval(timer1) //大于目标值时，清空计时器
} else {
speed = (target - cur) / 7; //计算速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //取整
cur = cur + speed;
oUl.style.left = cur + "%";
}
}
}
oBox.onmouseover = function() { //移出时清除计时器
clearInterval(timer);
}
oBox.onmouseout = function() { //移入时开始计时器
timer = setInterval(autoPlay, 2000);
}
</script>
</html>
3、添加左右点击按钮
效果：
03.gif
难点：
屏幕快照 2016-12-01 上午10.06.19.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓冲无缝滚动</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
background: red;
width: 600px;
height: 300px;
overflow: hidden;
margin: 100px auto;
position: relative;
}
img {
width: 600px;
height: 300px;
vertical-align: top;
/*取消底边的3px */
}
ul {
width: 500%;
height: 300px;
list-style: none;
position: absolute;
left: 0;
top: 0;
}
li {
float: left;
}
.btn span{
width: 30px;
height: 50px;
background: #4a4a4a;
display: inline-block;
position: absolute;
text-align: center;
line-height: 50px;
font-size: 24px;
opacity: 0.4;
cursor: pointer;
}
.btn span:hover{
opacity: 1;
color: #fff;
}
.btn .left{
left: 0;
top: 125px;
}
.btn .right{
right: 0;
top: 125px;
}
</style>
<body>
<div class="box" id="box">
<ul id="inner-box">
<li><img src="banner/banner1.jpg"></li>
<li><img src="banner/banner2.jpg"></li>
<li><img src="banner/banner3.jpg"></li>
<li><img src="banner/banner4.jpg"></li>
<li><img src="banner/banner1.jpg"></li>
</ul>
<div class="btn">
<span class="left" id="left"><</span>
<span class="right" id="right">></span>
</div>
</div>
</body>
<script type="text/javascript">
var oBox = document.getElementById("box");
var oUl = document.getElementById("inner-box");
var oLeft = document.getElementById("left");
var oRight = document.getElementById("right");
var cur = 0; //定义一个变量用于设置left值
var timer = null; //定义一个计时器
var target = 0;
var timer1 = null;
timer = setInterval(autoPlay, 2000); // 定义计时器每25毫秒执行一次
function autoPlay() { //执行每次执行函数，left值减1
if (target <= -400) {
cur = 0;
target = -100;
} else {
target -= 100;
}
sport(target);
}
oRight.onclick = function (argument) {
if (target <= -400) {
cur = 0;
target = -100;
} else {
target -= 100;
}
sport(target);
}
oLeft.onclick = function (argument) {
if (target > -100) {
cur -= 400;
target = -300;
} else{
target += 100;
}
sport(target);
}
function sport(tar) {
clearInterval(timer1);
timer1 = setInterval(autoPlay, 30); //设置定时器每30毫秒执行一次
function autoPlay() {
if (cur == tar) {
clearInterval(timer1) //大于目标值时，清空计时器
} else {
speed = (tar - cur) / 7; //计算速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //取整
cur = cur + speed;
oUl.style.left = cur + "%";
}
}
}
oBox.onmouseover = function() { //移出时清除计时器
clearInterval(timer);
}
oBox.onmouseout = function() { //移入时开始计时器
timer = setInterval(autoPlay, 2000);
}
</script>
</html>
4、添加底部焦点：
效果：在最上头；一开始的地方
01.gif
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标准轮播图</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
height: 300px;
overflow: hidden;
margin: 100px auto;
position: relative;
}
img {
width: 600px;
height: 300px;
vertical-align: top;
/*取消底边的3px */
}
ul {
width: 500%;
height: 300px;
list-style: none;
position: absolute;
left: 0;
top: 0;
}
ul li {
float: left;
}
.btn span{
width: 30px;
height: 50px;
background: #4a4a4a;
display: inline-block;
position: absolute;
text-align: center;
line-height: 50px;
font-size: 24px;
opacity: 0.4;
cursor: pointer;
}
.btn span:hover{
opacity: 1;
color: #fff;
}
.btn .left{
left: 0;
top: 125px;
}
.btn .right{
right: 0;
top: 125px;
}
ol{
position: absolute;
bottom: 20px;
left: 40%;
list-style: none;
}
ol li{
width: 10px;
height: 10px;
border-radius: 10px;
border: 1px solid #fff;
float: left;
margin: 0 4px;
}
</style>
<body>
<div class="box" id="box">
<ul id="inner-box">
<li><img src="banner/banner1.jpg"></li>
<li><img src="banner/banner2.jpg"></li>
<li><img src="banner/banner3.jpg"></li>
<li><img src="banner/banner4.jpg"></li>
<li><img src="banner/banner1.jpg"></li>
</ul>
<ol id="ol">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<div class="btn">
<span class="left" id="left"><</span>
<span class="right" id="right">></span>
</div>
</div>
</body>
<script type="text/javascript">
var oBox = document.getElementById("box");
var oUl = document.getElementById("inner-box");
var oLeft = document.getElementById("left");
var oRight = document.getElementById("right");
var cur = 0; //定义一个变量用于设置left值
var timer = null; //定义一个计时器
var target = 0;
var timer1 = null;
var i = 0;
timer = setInterval(autoPlay, 2000); // 定义计时器每25毫秒执行一次
function autoPlay() { //执行每次执行函数，left值减1
if (target <= -400) {
cur = 0;
target = -100;
} else {
target -= 100;
}
sport(target);
btnBottom();
}
oRight.onclick = function (argument) {
if (target <= -400) {
cur = 0;
target = -100;
} else {
target -= 100;
}
sport(target);
btnBottom();
}
oLeft.onclick = function (argument) {
if (target > -100) {
cur -= 400;
target = -300;
} else{
target += 100;
}
sport(target);
btnBottom();
}
// 增加下标显示效果
btnBottom(i)
function btnBottom() {
i = -(target/100);
i == 4 ? i = 0 : i;
var oOl = document.getElementById("ol");
var oLi = oOl.getElementsByTagName("li");
for( j=0 ; j<oLi.length ; j++){
oLi[j].style.background = '';
}
oLi[i].style.background = '#fff';
}
// 加点击事件
var oOl = document.getElementById("ol");
var oLi = oOl.getElementsByTagName("li");
for( j=0 ; j<oLi.length ; j++){
oLi[j].index = j
oLi[j].onclick = function() {
target = -(this.index*100);
sport(target);
btnBottom()
}
}
function sport(tar) {
clearInterval(timer1);
timer1 = setInterval(autoPlay, 30); //设置定时器每30毫秒执行一次
function autoPlay() {
if (cur == tar) {
clearInterval(timer1) //大于目标值时，清空计时器
} else {
speed = (tar - cur) / 7; //计算速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //取整
cur = cur + speed;
oUl.style.left = cur + "%";
}
}
}
oBox.onmouseover = function() { //移出时清除计时器
clearInterval(timer);
}
oBox.onmouseout = function() { //移入时开始计时器
timer = setInterval(autoPlay, 2000);
}
</script>
</html>
百度云链接：http://pan.baidu.com/s/1mi14ijY 密码：d84v
