您的位置：首页 > Web前端 > JavaScript
原生JS实现图片轮播

2018-01-05 18:03 477 查看
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大图滚动</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
.clear{
*zoom:1;
}
.clear:after{
visibility: none;
content:"";
display:block;
clear:both;
height:0;
}
#wrap{
width: 510px;
height:286px;
margin:0 auto;
position:relative;
background: pink;
overflow: hidden;
}
#inner{
width: 1000%;
height:100%;
position:absolute;
left:0;
top:0;
}
#inner img{
width:10%;
height:100%;
float: left;
}
.paganation{
width: 100%;
position: absolute;
bottom:10px;
text-align:center;
}
.paganation span{
padding:5px 8px;
background: #F2F2F2;
color:red;
border-radius:50%;
cursor: pointer
}
.paganation .selected{
background: red;
color:white;
}
.arrow{
position:absolute;
top:0;
width: 30px;
height: 286px;
line-height: 286px;
text-align: center;
color: red;
cursor: pointer;
}
#right{
right: 0;
}
.arrow:hover{
background: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="wrap"><!-- 图片展示区 -->
<div id="inner" class="clear"><!-- 所有图片并排的块 -->
<img style="background:red;" src="img/1.jpg" alt="">
<img style="background:orange;" src="img/2.jpg" alt="">
<img style="background:green;" src="img/3.jpg" alt="">
<img style="background:cyan;" src="img/4.jpg" alt="">
<img style="background:yellow;" src="img/5.jpg" alt="">
<img style="background:purple;" src="img/6.jpg" alt="">
<img style="background:pink;" src="img/7.jpg" alt="">
<img style="background:blue;" src="img/8.jpg" alt="">
<img style="background:red;" src="img/1.jpg" alt="">
</div>
<div class="paganation" id="paganation"><!-- 页面按钮区域 -->
<span class ="selected">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</div>
<div id="left" class="arrow"><</div><!-- 向左切换按钮 -->
<div id="right" class="arrow">></div><!-- 向右切换按钮 -->
</div>
<script type="text/javascript">
var wrap=document.getElementById("wrap");
var inner=document.getElementById("inner");
var spanList=document.getElementById("paganation").getElementsByTagName("span");
var left=document.getElementById("left");
var right=document.getElementById("right");

var clickFlag=true;//设置左右切换标记位防止连续按
var time//主要用来设置自动滑动的计时器
var index=0;//记录每次滑动图片的下标
var Distance=wrap.offsetWidth;//获取展示区的宽度，即每张图片的宽度
//定义图片滑动的函数
function AutoGo(){
var start=inner.offsetLeft;//获取移动块当前的left的开始坐标
var end=index*Distance*(-1);//获取移动块移动结束的坐标。
//计算公式即当移动到第三张图片时，图片下标为2乘以图片的宽度就是块的left值。
var change=end-start;//偏移量

var timer;//用计时器为图片添加动画效果
var t=0;
var maxT=50;//滑动的效率
clear();//先把按钮状态清除,再让对应按钮改变状态
if(index==spanList.length){
spanList[0].className="selected";
}else{
spanList[index].className="selected";
}
clearInterval(timer);//开启计时器前先把之前的清
timer=setInterval(function(){
t++;
if(t>=maxT){//当图片到达终点停止计时器
clearInterval(timer);
clickFlag=true;//当图片到达终点才能切换
}
inner.style.left=change/maxT*t+start+"px";//每个17毫秒让块移动
if(index==spanList.length&&t>=maxT){
inner.style.left=0;
index=0;
//当图片到最后一张时把它瞬间切换回第一张，由于都同一张图片不会影响效果
}
},17);
}
//编写图片向右滑动的函数
function forward(){
index++;
//当图片下标到最后一张把小标换0
if(index>spanList.length){
index=0;
}
AutoGo();
}
//编写图片向左滑动函数
function backward(){
index--;
//当图片下标到第一张让它返回到倒数第二张，
//left值要变到最后一张才不影响过渡效果
if(index<0){
index=spanList.length-1;
inner.style.left=(index+1)*Distance*(-1)+"px";
}
AutoGo();
}

//开启图片自动向右滑动的计时器
time=setInterval(forward,3000);

//设置鼠标悬停动画停止
wrap.onmouseover=function(){
clearInterval(time);
}
wrap.onmouseout=function(){
time=setInterval(forward,3000);
}

//遍历每个按钮让其切换到对应图片
for(var i=0;i<spanList.length;i++){
spanList[i].onclick=function(){
index=this.innerText-1;
AutoGo();
}
}

//左切换事件
left.onclick=function(){
if(clickFlag){
backward();
}
clickFlag=false;
}
//右切换事件
right.onclick=function(){
if(clickFlag){
forward();
}
clickFlag=false;
}

//清除页面所有按钮状态颜色
function clear(){
for(var i=0;i<spanList.length;i++){
spanList[i].className="";
}
}

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航