直接上代码了：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>轮播2</title>

    </head>

    <style type="text/css">

        *{margin:0px;padding:0px;}

        #banner{width:400px;margin:30px auto 0;position:relative;}

        #tab{width:400px;height:320px; margin:0px auto;overflow:hidden;}

        #banner ul li{list-style:none;}

        #tab>li:not(:first-child){display:none;}

        #list{position:absolute;z-index:2;bottom:10px;right:10px;}

        #list li{display: inline-block;height:10px;width:10px;background:#CCCCCC;border:1px solid #666666;

            margin-left:5px;color:#000000;line-height: 10px;font-size:8px;text-align: center;cursor:pointer;}

        #list .on{background:red;color:#FFFFFF}

        #btn{z-index: 3;display: none;}

        #btn a{width:60px;height:60px;position:absolute;top:130px;opacity:0.5;}

        #btn .prev{left:20px;background:url(img/btn.gif) left 0px no-repeat;}

        #btn .next{right:20px;background:url(img/btn.gif) left -60px no-repeat;}

    </style>

    <script type="text/javascript">

        window.onload=function()

        {

            var oBanner=document.getElementById('banner');//获取图片列表id

            var oTab=document.getElementById('tab');//获取图片列表id

            var aPic=oTab.getElementsByTagName('li');//将图片li定义为数组

            var oList=document.getElementById('list');//获取编号列表id

            var aList=oList.getElementsByTagName('li');//将编号列表Li定义为数组

            var oBtn=document.getElementById('btn');

            var oPrev=document.getElementById("prev");

            var oNext=document.getElementById("next");

            var index=0;

            var timer=null;

            //自动播放

            timer=setInterval(autoPlay,1000);//此处调用autoPlay函数时，（）不能带，带就出错

            //鼠标悬浮时，停止轮播

            oBanner.onmousemove=function()

            {

                oBtn.style.display='block';

                clearInterval(timer);

            }

            //鼠标离开，继续轮播

            oBanner.onmouseout=function()

            {

                oBtn.style.display='none';

                timer=setInterval(autoPlay,1000);//此处必须重新设置定时器

            }

            //点击左边按钮，上一页

            oPrev.onclick=function()

            {

                index=index-1;

                if(index<0)

                {

                    index=aPic.length-1;

                }

                changePic(index);

            }

            //点击右边按钮，下一页

            oNext.onclick=function()

            {

                index=index+1;

                if(index==aPic.length)

                {

                    index=0;

                }

                changePic(index);

            }

            //播放函数

            function autoPlay()

            {

                index=index+1;

                if(index==aPic.length)

                {

                    index=0;

                }

                changePic(index);

            }

            //把数字与图片对应起来

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

            {

                aList[i].onmouseover=function()

                {

                    clearInterval(timer);

                    index=this.innerText-1;

                    changePic(index);

                }

            }

            //图片、编号切换

            function changePic(curIndex)

            {

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

                {

                    aPic[i].style.display='none';

                    aList[i].className='';

                }

                aPic[curIndex].style.display="block";

                aList[curIndex].className="on";

            }

        }

    </script>

    <body>

        <div id="banner">

            <ul id="tab">

                <li><img src="img/1.jpg" width="400" height="320"/></li>

                <li><img src="img/2.jpg" width="400" height="320"/></li>

                <li><img src="img/3.jpg" width="400" height="320"/></li>

                <li><img src="img/4.jpg" width="400" height="320"/></li>

                <li><img src="img/5.jpg" width="400" height="320"/></li>

                <li><img src="img/6.jpg" width="400" height="320"/></li>

            </ul>

            <ul id="list">

                <li class="on">1</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

                <li>5</li>

                <li>6</li>

            </ul>

            <div id="btn">

                <a href="javascript:;" class="prev" id="prev"></a>

                <a href="javascript:;" class="next" id="next"></a>

            </div>

        </div>

    </body>

</html>

轮播插件、原生js编写，弄懂这个，基本上各种轮播都可以自己写了的更多相关文章

  1. 关于错位动画的练习，原生js编写

    最近在网上看到一个关于错位动画的文章,感觉非常有趣,便自己练习了一下,文章连接:http://www.w3cplus.com/animation/staggering-animations.html ...

  2. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

  3. 轮播图原生js实现和jquery实现和js面向对象方式实现

    原生JS实现 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  4. js万年历，麻雀虽小五脏俱全，由原生js编写

    对于前端来说,我们可能见到最多的就是各种各样的框架,各种各样的插件了,有各种各样的功能,比如轮播啊,日历啊,给我们提供了很大的方便,但是呢?我们在用别人这些写好的插件,框架的时候,有没有试着问一问自己 ...

  5. 原生JS编写getByClass、addClass、removeClass、hasClass

    前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...

  6. 原生js编写的安全色拾色器

    <html > <head> <meta http-equiv="Content-Type" content="text/html; cha ...

  7. 最简单的轮播广告(原生JS)

    改变每个图片的opacity属性:来自学友刘斌 素材图片: <!DOCTYPE html> <html lang="en"> <head> &l ...

  8. (转)jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)也可以做纯文本轮播

    ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...

  9. 全屏轮播插件 fullPage.js应用(基础版兼容IE7， 背景图版兼容IE8)

    /** * fullPage 1.4.5 * https://github.com/alvarotrigo/fullPage.js * MIT licensed * * Copyright (C) 2 ...

随机推荐

  1. Linux 链接详解----动态链接库

    静态库的缺点: 库函数被包含在每一个运行的进程中,会造成主存的浪费. 目标文件的size过大 每次更新一个模块都需要重新编译,更新困难,使用不方便. 动态库: 是一个目标文件,包含代码和数据,它可以在 ...

  2. codeblocks+mbedtls库配置

    网上都没有找到window下mbedtls的相关配置,或许是太简单了.希望可以帮助那些像我这样的小白一枚. 下载 github的下载:https://github.com/ARMmbed/mbedtl ...

  3. mysql的explain

    explain 一般用于分析sql.  如下 [SQL] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 2 ...

  4. yii2.0框架debug模式

  5. Springmvc ModelAndView踩过的坑之HttpServletResponse response

    先抛出问题.以下两个方法声明有毛区别: @RequestMapping(value = "/rg") public void rg(@PathVariable Long pageI ...

  6. google软件测试之道读后感（一）

    这几天在抽空读一本新书,久负盛名的<google软件测试之道>.之前在网络上一点一点地看过它的英文版,很受触动,还做了很长的读书笔记,现在看到了中文版,才恍觉之前的好些理解存在不恰当的地方 ...

  7. Web前端学习——CSS

    一.CSS简介CSS全称cascading style sheeding,层叠样式列表.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.二.CSS组成1.选择器(1) ...

  8. ElasticSearch 学习记录之 分布式文档存储往ES中存数据和取数据的原理

    分布式文档存储 ES分布式特性 屏蔽了分布式系统的复杂性 集群内的原理 垂直扩容和水平扩容 真正的扩容能力是来自于水平扩容–为集群添加更多的节点,并且将负载压力和稳定性分散到这些节点中 ES集群特点 ...

  9. C# Winform 实现Ajax效果自定义按钮

    技术看点 WinForm自定义控件的使用 自定义控件gif动画的播放 需求及效果 又来一波 C# GDI自定义控件show .这个控件已经使用几年了,最近找出来重构一下.原来是没有边框的,那么导致导航 ...

  10. POJ 3616 Milking Time DP题解

    典型的给出区间任务和效益值,然后求最大效益值的任务取法. 属于一维DP了. 一维table记录的数据含义:到当前任务的截止时间前的最大效益值是多少. 注意. 这表示当前任务一定要选择,可是终于结果是不 ...