js特效里图片怎么不会滚动

JavaScript022

js特效里图片怎么不会滚动,第1张

js特效里图片不会滚动的原因是没有使用js里的定时器。根据查询相关资料信息，js特效里让图片无缝滚动就是要让图片集在一定时间里自动切换，需要js里的定时器来控制时间，没有使用定时器功能就无法实现图片滚动。js指JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

工具/材料

Sublime Text

01

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

02

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

03

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

04

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

05

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

1、提前准备一组图片，将图片名称设置一定规律：例如  img1.jpg、img2.jpg

2、编写鼠标点击事件

3、在鼠标点击时间里，判断鼠标点击次数

4、根据不同次数，显示不同的图片

<script type="text/javascript">

    $(function(){

        var items=new Arrays("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg")

        var i=0

        $("#bgImage").click(function(){

            i++

            if(i>items.length){

                i=1

            }

            $(this).prop("src","img"+i+".jpg")

        })

    })

</script>