js如何制作图片轮播

JavaScript021

js如何制作图片轮播,第1张

工具/材料

Sublime Text

01

首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示

02

然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头

03

接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明

04

最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能

05

最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图

//轮播器

var crs_num=1

function interval(){

carousel=setInterval(function(){

num2=crs_num*-800

$('.crs_img').animate({

attr:'x',

target:num2,

time:50,

speed:10,

})

$('.crs_words p').html($('.crs_img img').getnum(crs_num).attr('alt'))

$('#carousel li').css('color','#999')

$('#carousel li').getnum(crs_num).css('color','#333')

crs_num++

if(crs_num==3)crs_num=0

},3000)

}

interval()

$('#carousel li').hover(function(){

var num=$(this).childNum()*-800

clearInterval(carousel)

$('.crs_img').animate({

attr:'x',

target:num,

time:50,

speed:5,

})

$('.crs_words p').html($('.crs_img img').getnum($(this).childNum()).attr('alt'))

$('#carousel li').css('color','#999')

$(this).css('color','#333')

},function(){

interval()

})

animate是自己封装的，可能和jq不兼容

js一加载网页就自动播放是通过iframe的方式。通过iframe的方式加载带音视频的网页。此页面已经获取了使用音视频设备权限。就是此页面可以获得了使用麦克风和摄像头的权限就可以自动播放。