用JS写的简单轮播特效

时间：2022-09-05 00:23:13

效果如下

用JS写的简单轮播特效

功能分析

1.每隔1秒换一张图片

2.鼠标移入停止切换、鼠标离开继续切换

3.鼠标移入到数字上面的时候,显示和数字对应的图片,并且停止切换,被选中的数字,背景显示橙色

4.鼠标离开数字,从该数字后面继续显示

代码如下

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <style type="text/css">

        div,img,ul,li{margin:0;padding:0;}

        #pic{width:480px;height:300px;margin: 100px auto}

        #pic img{width: 100%;height: 300px;border: 1px solid #ccc}

        #pic li{list-style: none;float: left;border:1px solid orange;width:58px;height:30px;text-align: center;line-height: 30px}

    </style>

</head>

<body>

    <div id="pic">

        <img src="img/1.jpg">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

            <li>7</li>

            <li>8</li>

        </ul>

    </div>

    <script type="text/javascript">

        //1. 设置定时器，每隔1000毫秒执行changePic函数

        var interID = setInterval(changePic, 1000);

        var oImg = document.getElementsByTagName('img')[0];

        //3. 鼠标移入到数字上的时候，显示对应的图片

        var oLis = document.getElementsByTagName('li');

        var count = 1;

        function changePic(){

            oImg.src = 'img/'+count+'.jpg';

            //先让所有的li标签背景都为空

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

                oLis[i].style.background = '';

            }

            //让和图片序号对应的li标签背景显示橙色  count-1

            oLis[count-1].style.background = 'orange';

            count ++;

            if(count>8){

                count = 1;

            }

        }

        //鼠标移入停止播放

        oImg.onmouseover = function(){

            clearInterval(interID);

        }

        //鼠标离开继续播放

        oImg.onmouseout = function(){

            clearInterval(interID);

            interID = setInterval(changePic, 1000);

        }

        console.log(oLis.length);

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

            //给每个li标签增加属性oindex保存当前的索引

            oLis[i].oindex = i;

            oLis[i].onmouseover = function(){

                //console.log(i);    //

                //停止播放

                clearInterval(interID);

                //设置li标签的背景颜色

                this.style.background = 'orange';

                count = this.oindex+1;

                changePic();

            }

            oLis[i].onmouseout = function(){

                clearInterval(interID);

                interID = setInterval(changePic, 1000);

            }

        }

    </script>

</body>

</html>

　　

用JS写的简单轮播特效的更多相关文章

  1. js写的简单轮播图

    这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...

  2. 原生js写一个无缝轮播图插件&lpar;支持vue&rpar;

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  3. 运用CSS和JS写的大图轮播-带箭头

    <style type="text/css"> #datu { width:500px; height:400px; position:relative; margin ...

  4. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  5. 原生js和jquery实现图片轮播特效&lpar;转&rpar;

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  6. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  7. 纯js轮播图练习-2，js&plus;css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  8. JS---案例：简单轮播图

    案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 &lt ...

  9. 分享：计算机图形学期末作业！！利用WebGL的第三方库three&period;js写一个简单的网页版&OpenCurlyDoubleQuote;我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

随机推荐

  1. javascript中获取元素节点的文本

    <div id="test"> <strong>i'm strong</strong> </div> 1.elementNode.i ...

  2. Deep Learning and Shallow Learning

    Deep Learning and Shallow Learning 由于 Deep Learning 现在如火如荼的势头,在各种领域逐渐占据 state-of-the-art 的地位,上个学期在一门 ...

  3. g&plus;&plus; error&colon; extra qualification on member &lbrack;-fpermissive&rsqb;

    以下这段代码是在头文件里面的,DmaOpen DmaClose函数也是直接在class pcie_chip{}里面的.加了个额外的pcie_chip::才会报错. //delete pcie_chip ...

  4. 05-C语言运算符

    目录: 一.进制转换 二.常量 三.sizeof 四.运算符 五.赋值运算符 六.自增减运算符 七.关系运算符 八.逻辑运算符 九.取址寻址运算符 回到顶部 一.进制转换 1 进制转换是人们利用符号来 ...

  5. cocos2d-x 3&period;0游戏实例学习笔记 《跑酷》第一步--- 开始界面

    说明:这里是平局:晓风残月前辈的博客.他是将泰然网的跑酷教程.用cocos2d-x 2.X 版本号重写的,眼下我正在学习cocos2d-X3.0 于是就用cocos2d-X 3.0重写,并做相关笔记 ...

  6. Android7&period;0 PowerManagerService 之亮灭屏（一）

    本篇从按下power按键后,按键事件从InputManagerService 传到PhoneWindowManager.java开始分析power 按键做屏幕亮灭过程的分析,关于power 按键的其他 ...

  7. iptables snat和dnat

    iptables中的snat和dnat是非常有用的,感觉他们二个比较特别,所以单独拿出来说一下. dnat是用来做目的网络地址转换的,就是重写包的目的IP地址.如果一个包被匹配了,那么和它属于同一个流 ...

  8. 1002 A&plus;B for Polynomials 可弃

    使用类似桶排序的计数方式来存储

  9. django model 插入数据方法

    需要插入的数据表结构如下: class UserInfo(models.Model): user_id =models.AutoField(primary_key=True) user_name=mo ...

  10. Atitit&period;软件开发的非功能性需求attilax&&num;160&semi;总结At

    Atitit.软件开发的非功能性需求attilax 总结 1. 运行环境约束:用户对软件系统运行环境的要求. 1 2. 兼容性 2 3.   7.6 数据库 database (imp by ati) ...

相关文章