效果如下

功能分析

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写一个无缝轮播图插件(支持vue)

    轮播图插件(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实现图片轮播特效(转)

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

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

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

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

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

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

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

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

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

随机推荐

  1. Discuz!X/模板标签说明

    Discuz 模板标签说明 Discuz! 的模板采用近似 PHP 表达式的语法,基本都是可识别的HTML,但涉及到变量和动态内容时,基本形式下: <!-{ 代码内容 }-> 逻辑元素包围 ...

  2. linux乱码问题

    命令输入: export LANG=zh_CN.GBK grep 匹配时高亮 先执行:export GREP_OPTIONS='--color=auto'; 后执行:grep 匹配内容 文件; 描述: ...

  3. mkimage command not found

    转载:http://blog.csdn.net/armeasy/article/details/6217621 UIMAGE  arch/arm/boot/uImage"mkimage&qu ...

  4. c语言趣味

    改编java趣味100题,c语言版 1.C语言版金字塔 #include <stdio.h> int main() { int n,i,j,k; scanf("%d", ...

  5. javascript 关于语义化作用的理解

    看代码实例1 var a=1; function m(a){ //此处为形参第一个传入函数的参数,既为arguments[0] alert(a); //此处a为与形参绑定的 } m(a);//1 此时 ...

  6. 3.4.2内核下的I2C驱动

    1. 框架1.1 硬件协议简介1.2 驱动框架1.3 bus-drv-dev模型及写程序a. 设备的4种构建方法a.1 定义一个i2c_board_info, 里面有:名字, 设备地址 然后i2c_r ...

  7. Java代码操作Redis的sentinel和Redis的集群Cluster操作

    总共四台机器,crxy99,crxy98分别是主节点和从节点.   crxy97和crxy96是两个监控此主从架构的sentinel节点. 看代码: import org.junit.Test; im ...

  8. css3 边框记

    css3 边框 border属性在css1中就已经定义了,使用它可以设置元素的边框风格,边框颜色以及边框粗细. border-width:设置元素边框的粗细. border-color:设置元素边框的 ...

  9. 如何通过PhpMyAdmin批量删除MYSQL数据库数据表

    使用这个方法前,强烈建议先备份整个数据库.至于怎么备份?你不会么?在本文下方留言吧. 具体方法:复制下面的php执行语句,保存为sql.php文件(注意配置数据库名称.密码.数据表头),通过ftp上传 ...

  10. Android通过LIstView显示文件列表

    [绥江一百]http://www.sj100.net                                                  欢迎,进入绥江一百感谢点击[我的小网站,请大家多 ...