直接上代码了：

<!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. struct 类型指针技巧

    此类型对于两种结构的查找和删除都十分方便,实际项目中也常常用到.

  2. makefile 中=与:=的差别

    1."=" make会将整个makefile展开后,再决定变量的值.也就是说,变量的值将会是整个makefile中最后被指定的值.看例子: x = foo y = $(x) bar ...

  3. HDU3792---Twin Prime Conjecture（树状数组）

    Twin Prime Conjecture Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  4. Thinkphp高仿陌陌网页直播

    此项目利用 TP+Redis+Nginx+nginx-rtmp-module+ffmpeg+HLS +Swoole 的架构方案 GitHub 地址:https://github.com/DOUBLE- ...

  5. Java调用C# DLL

    由于项目需要,利用了短信猫,但是一个短信猫会加载多个串口,而只需要其AT口,通过java代码,获取其AT口对应的串口号比较困难,于是通过C#获取,这里直接调用C#生成的DLL,但java不能直接调用C ...

  6. inotify软件部署及实时同步

    声明:博主使用的是CentOS6.9的系统 参考资料: https://github.com/rvoicilas/inotify-tools/wiki http://www.ibm.com/devel ...

  7. springMVC(1)---@RequestMapping详解

    @RequestMapping详解 RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径.这句话,太熟悉了.   ...

  8. 相似QQ对话框上下部分可拖动代码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. android UI布局

    一.设置反复背景 在drawable目录下建一个mybackground.xml文件 在文件里写入: <?xml version="1.0" encoding="u ...

  10. 体验CSDN-Markdown

    文件夹 文件夹 文本格式化练习 一号标题 1一号标题 二号标题 1 11 2 列表的应用 链接 图片 脚注 表格 序列图 流程图 文本格式化练习: 斜体 斜体的文字 使用鼠标,变成斜体文字 使用键盘C ...