php js轮播图片代码,JavaScript实现轮播图效果(代码实例)

本文给大家介绍JavaScript实现轮播图效果的,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

学习前端也有一小段时间了,当初在学习javascript的时候,练手的一个轮播图实例,轮播图也是挺常见的了。

着是通过获取图片偏移量实现的。也实现了无缝切换。还有一点问题就是没有加上图片切换的时候的延迟了,哈哈

html:

5

1

2

3

4

5

1

js:window.onload = function(){

//获取元素

var container = document.getElementById('container');

var list = this.document.getElementById('list');

var buttons = document.getElementById('buttons').getElementsByTagName('span');

var prev = document.getElementById('prev');

var next = document.getElementById('next');

var index = 1;//默认第一个小圆点亮

//小圆点的点亮

function showButton() {

//遍历小圆点的个数,当触发onclick事件后,className为‘on’的变为‘’。

for(var i = 0;i < buttons.length; i++){

if(buttons[i].className == 'on'){

buttons[i].className = '';

break;

}

}

buttons[index - 1].className = 'on'; //原始第一个小圆点点亮,onclick事件触发后,index+1

}

function animate (offset) {

//获取从第一张图片开始发生的偏移量

var newLift = parseInt(list.style.left) + offset;

list.style.left = newLift + 'px';

if(newLift > -600){

//如果偏移量的位置大于-600的时候,图片跳转到第五张图片

list.style.left = -3000 + 'px';

}

if(newLift < -3000){

//如果偏移量的位置大于-3000的时候,图片跳转到第一张图片

list.style.left = -600 + 'px';

}

}

next.onclick = function () {

//如果button的index为5的时候,再点击next按钮会返回 1;

if(index == 5){

index = 1;

}else{

index += 1;

}

showButton();

animate(-600);

}

prev.onclick = function () {

if(index == 1){

index = 5;

}else{

index -= 1;

}

showButton();

animate(600);

}

}

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程!

相关推荐:

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值