有bug找不出来,求大神解救,双击或者快速点击next或者prev的时候小圆点跟不上,对应不上图片
qq_超_60
2018-07-01 01:14
window.onload = function(){
var index = 1;
var container = document.getElementsByClassName('container')[0];
var list = document.getElementsByClassName('list')[0];
var prev = document.getElementsByClassName('prev')[0];
var next = document.getElementsByClassName('next')[0];
var bottons = document.getElementsByClassName('bottons')[0].getElementsByTagName('span');
var animated = false;
var timer ;
function animate (offset){
animated = true;
var newLeft = parseInt(list.style.left) + offset;
var time = 300;
var interval = 10;
var speed = offset/(time/interval);
function go() {
if((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)){
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go,interval);
}else{
animated = false;
list.style.left = newLeft + 'px';
if (newLeft > -1024) {
list.style.left = -5120 + 'px';
}
if (newLeft < -5120) {
list.style.left = -1024 + 'px';
}
}
}
go();
}
function play(){
timer = setInterval(function(){
next.onclick();
},3000);
}
function stop(){
clearInterval(timer);
}
function showbotton(){
for(var i = 0 ; i < bottons.length; i++){
if (bottons[i].className == 'on') {
bottons[i].className = '';
break;
}
}
bottons[index-1].className = 'on';
}
next.onclick = function(){
if (index == 5) {
index = 1;
}else{
index += 1;
}
if (!animated) {
animate(-1024);
}
showbotton();
}
prev.onclick = function(){
if (index == 1) {
index = 5;
}else{
index -= 1;
}
if (!animated) {
animate(1024);
}
showbotton();
}
for (var i = 0; i < bottons.length; i++) {
bottons[i].onclick = function(){
// if (this.className == 'on') {
// return;
// }
var myIndex = parseInt(this.getAttribute('index'));
var offset = -1024 * (myIndex - index);
index = myIndex;
showbotton();
if (!animated) {
animate(offset);
}
}
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
5回答
-
- 胖子爱赞啵
- 2018-11-08 17:53:26
speed算的是当前图片在该图片可切换的时间(time)内的每一时间段(interval)中移动的距离。因为你每张图片的大小是1024，speed=1024/(300/10),结果为34.1333，图片在移动的过程中实际移动距离34.133*30=1023.99和图片实际长度1024不相等，每次移动少一点点，重复多次后，导致了你问题中描述的现象产生。解决方案，调整time的值，可以设置为var time = 320,这样就可以避免你说的情况。
-
- 胖子爱赞啵
- 2018-11-08 17:33:10
应该是设置的自动播放时间和切换图片的时间之间没有设置好
-
- qq_超_60
- 2018-07-04 20:31:39
不是没效果，而是有BUG，圆点跟不上图片切换
-
- qq_超_60
- 2018-07-04 20:30:57
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width:1024px;
height: 768px;
overflow: hidden;
margin: 0 auto;
position:relative;
}
.container:hover .btn{
display: block;
}
.list{
width: 7168px;
position: absolute;
}
.list img{
width: 1024px;
float: left;
}
.container .bottons{
position: absolute;
bottom: 10px;
left: 410px;
width: 200px;
}
.container .bottons span{
background-color: #ff8800;
height: 15px;
width: 15px;
margin: 8px;
border-radius: 50%;
display: inline-block;
border: 1px solid #ccc;
}
.btn{
display: block;
height: 40px;
width: 30px;
background-color:rgba(0,0,0,0.3);
position:absolute;
top: 350px;
font-size:40px;
color: #ff8800;
font-weight:900;
text-align: center;
line-height: 40px;
display: none;
}
.btn:hover{
background-color:rgba(255,255,255,0.8);
transition: all 0.4s linear;
}
.prev{
left: 10px;
}
.next{
right: 10px;
}
.container .bottons .on{
background-color:#f00;
}
</style>
</head>
<body>
<div class="container">
<div class="list" style="left:-1024px;">
<img src="img/5.jpg">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/1.jpg">
</div>
<div class="bottons" id="btn">
<span index='1' class="on"></span>
<span index='2'></span>
<span index='3'></span>
<span index='4'></span>
<span index='5'></span>
</div>
<span class="prev btn" ><</span>
<span class="next btn">></span>
</div>
<script>
window.onload = function(){
var index = 1;
var container = document.getElementsByClassName('container')[0];
var list = document.getElementsByClassName('list')[0];
var prev = document.getElementsByClassName('prev')[0];
var next = document.getElementsByClassName('next')[0];
var bottons = document.getElementById('btn').getElementsByTagName('span');
var animated = false;
var timer ;
function animate (offset){
animated = true;
var newLeft = parseInt(list.style.left) + offset;
var time = 300;
var interval = 10;
var speed = offset/(time/interval);
function go() {
if((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)){
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go,interval);
}else{
animated = false;
list.style.left = newLeft + 'px';
if (newLeft > -1024) {
list.style.left = -5120 + 'px';
}
if (newLeft < -5120) {
list.style.left = -1024 + 'px';
}
}
}
go();
}
function play(){
timer = setInterval(function(){
next.onclick();
},3000);
}
function stop(){
clearInterval(timer);
}
function showbotton(){
for(var i = 0 ; i < bottons.length; i++){
if (bottons[i].className == 'on') {
bottons[i].className = '';
break;
}
}
bottons[index-1].className = 'on';
}
next.onclick = function(){
if (index == 5) {
index = 1;
}else{
index += 1;
}
if (!animated) {
animate(-1024);
}
showbotton();
}
prev.onclick = function(){
if (index == 1) {
index = 5;
}else{
index -= 1;
}
if (!animated) {
animate(1024);
}
showbotton();
}
for (var i = 0; i < bottons.length; i++) {
bottons[i].onclick = function(){
// if (this.className == 'on') {
// return;
// }
var myIndex = parseInt(this.getAttribute('index'));
var offset = -1024 * (myIndex - index);
index = myIndex;
showbotton();
if (!animated) {
animate(offset);
}
}
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
</script>
-
- 丶沉逑
- 2018-07-04 16:39:07
你的js 设置的 buttons 只有 getElementById('buttons').getElementsByTagName('span')才有用
焦点图轮播特效
65279 学习 · 611 问题
相似问题