效果如下

功能分析

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. Scheme中一些函数在C++里面的实现与吐槽

          最终我失败了,这是显而意见,我试图在一个很看重类型是什么的语言中实现无类型操作,事实上,哪怕我实现了基本的cons,car,cdr,list后面的代码也无法写下去.比如说list-n,根据 ...

  2. 数据结构笔记02：Java面试必问算法题

    1. 面试的时候,栈和队列经常会成对出现来考察.本文包含栈和队列的如下考试内容: (1)栈的创建 (2)队列的创建 (3)两个栈实现一个队列 (4)两个队列实现一个栈 (5)设计含最小函数min()的 ...

  3. 在Code first中使用数据库里的视图

    如果想在Code first中使用数据库里的视图 (不管你出于什么原因),目前的方法有2种. 一.使用Database.SqlQuery<T>("查询语句"),如: v ...

  4. mysql开启外联方法

    1.修改Mysql配置文件 /etc/mysql/my.cnf 注释掉 bind-address = 127.0.0.1 2.重启Mysql /etc/init.d/mysql restart 3.r ...

  5. Python中查找字符串方法的速度比较

  6. [未完成]关于Eclipse4RCP书中内容总结

    原文地址http://www.vogella.com/tutorials/EclipseRCP/article.html Table of Contents 1. Eclipse 4 1.1. Wha ...

  7. MongoDB - Introduction to MongoDB, Capped Collections

    Overview Capped collections are fixed-size collections that support high-throughput operations that ...

  8. Git CMD - checkout: Switch branches or restore working tree files

    命令格式 git checkout [-q] [-f] [-m] [<branch>] git checkout [-q] [-f] [-m] --detach [<branch&g ...

  9. java开发：分享一下MemCached的使用

    在项目开发中,有些不经常修改的数据,我们通常都会选择使用缓存.其中一种方式,就是memcached. windows系统中,我们需要下载并安装memcached. 地址如:D:\memcached\m ...

  10. sql常识-INNER JOIN

    SQL INNER JOIN 关键字 在表中存在至少一个匹配时,INNER JOIN 关键字返回行. INNER JOIN 关键字语法 SELECT column_name(s) FROM table ...