<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大图滚动2</title>
<style>
*{
margin:0;
padding:0;
}
#outer{
width: 1000px;
height: 500px;
margin:100px auto;
overflow: hidden;
position: relative;
}
#inner{
height: 500px;
position: absolute;
top:0px;
/*left:0px;*/
/*transition: all 0.5s;*/
}
#inner img{
width: 1000px;
height: 500px;
float:left;
}
#btn_box{
position: absolute;
list-style-type: none;
width: 100%;
left:0;
bottom:30px;
text-align: center;
}
#btn_box li{
display: inline-block;
height: 30px;
width: 30px;
border-radius: 50%;
background-color: #fff;
font-size: 20px;
line-height: 30px;
}
#btn_box li.active{
color:#fff;
background-color:red;
}
#prevBtn,
#nextBtn{
width: 50px;
height: 100px;
position: absolute;
top:200px;
background-color: rgba(0,0,0,.5);
font-size: 30px;
text-align: center;
line-height: 100px;
opacity:0;
transition: all 1.5s;
}
#prevBtn{
left:0px;
}
#nextBtn{
right:0px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<img src="../img/01.jpg">
<img src="../img/02.jpg">
<img src="../img/03.jpg">
<img src="../img/04.jpg">
<img src="../img/05.jpg">
<img src="../img/06.jpg">
<img src="../img/01.jpg">
</div>
<ul id="btn_box">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div id="prevBtn"><</div>
<div id="nextBtn">></div>
</div>
<script src="../tween.js"></script>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var imgs = inner.getElementsByTagName('img');
var btn_box = document.getElementById('btn_box');
var btns = btn_box.getElementsByTagName('li');
var prevBtn = document.getElementById('prevBtn');
var nextBtn = document.getElementById('nextBtn');
var pieceWidth = imgs[0].offsetWidth;
inner.style.width = imgs.length*pieceWidth + 'px';
var index = 0;
var contorl = true;//定义一个布尔值,用来控制切换的时机(图片在滚动过程中是禁止切换)
var time = null;//图片自动轮播计时器
var time1 = null;//图片滑动计时器
function tab(){
if(index >= imgs.length){
index = 1;
inner.style.left = 0;
}
if(index < 0){
index = btns.length - 1;
inner.style.left = -pieceWidth*(imgs.length-1) +'px';
}
var t = 0;
var maxT = 100;
var start = inner.offsetLeft;
var end = -pieceWidth*index;
var change = end - start;
clearInterval(time1);
time1 = setInterval(function(){
t++;
if(t >= maxT){
clearInterval(time1);
contorl = true;
}
// inner.style.left = change/maxT*t + start + 'px';
inner.style.left = Tween.Quart.easeOut(t,start,change,maxT) + 'px';
},10);
// inner.style.left = -pieceWidth*index + 'px';
for(var i=0; i<btns.length; i++){
btns[i].className = '';
}
if(index == btns.length){
btns[0].className = 'active';
}else{
btns[index].className = 'active';
}
}
function next(){
index++;
tab();
}
function prev(){
index--;
tab();
}
time = setInterval(next,3000);
for(var i=0; i<btns.length; i++){
btns[i].index = i;
btns[i].onclick = function(){
if(contorl){
clearInterval(time);
if(this.index == 0 && index == btns.length){
index = btns.length;
}else{
index = this.index;
}
tab();
time = setInterval(next,3000)
}
contorl = false;
}
}
outer.onmouseover = function(){
prevBtn.style.opacity = 1;
nextBtn.style.opacity = 1;
}
outer.onmouseout = function(){
prevBtn.style.opacity = 0;
nextBtn.style.opacity = 0;
}
prevBtn.onclick = function(){
if(contorl){
clearInterval(time);
prev();
time = setInterval(next,3000);
}
contorl = false;
}
nextBtn.onclick = function(){
if(contorl){
clearInterval(time);
next();
time = setInterval(next,3000);
}
contorl = false;
}
</script>
</body>
</html>
JS实现大图滚动、无缝连接
最新推荐文章于 2024-01-05 10:46:26 发布