直接上代码了：

<!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. tomcat警告setting property 'debug' to '0' did not find a matching property

    在使用tomcat6.0版本结合myeclipse进行java web项目,运行程序显示setting property 'debug' to '0' did not find a matching ...

  2. php结合redis实现高并发下的抢购、秒杀功能 (转载)

    抢购.秒杀是如今很常见的一个应用场景,主要需要解决的问题有两个: 1 高并发对数据库产生的压力 2 竞争状态下如何解决库存的正确减少("超卖"问题) 对于第一个问题,已经很容易想到 ...

  3. python中csv文件的读取问题

    在python读取csv格式的文件时,使用csv.reader读取文件对象,出现了line contains NULL byte的错误,如下: reader = csv.reader(open(fil ...

  4. Expected MultipartHttpServletRequest: is a MultipartResolver configured解决方案

    异常信息: java.lang.IllegalArgumentException: Expected MultipartHttpServletRequest: is a MultipartResolv ...

  5. Unity 5--全局光照技术

    本文整理自Unity全球官方网站,原文:UNITY 5 - LIGHTING AND RENDERING 简介全局光照,简称GI,是一个用来模拟光的互动和反弹等复杂行为的算法,要精确的仿真全局光照非常 ...

  6. Loadrunner 中socket协议RecvBuffer接收到数据长度为空

    socket通讯,有两种方式,一种是建立长连接(TCP),建立后,不停的发送,接收.另外一种是建立短连接(UDP),建立连接,发送报文,接收响应,关闭连接.两种方式 server的开销不同. 今天出现 ...

  7. 安装cuda8.0中所遇到的问题-解决办法

    正是申请季高峰,但还是被老师抓着干活.之前一直以为cuda已经装好,才知道是骗自己的.我的显卡是640,ubuntu14.4, 比较low. 我是按照这个教程走的,http://m.blog.csdn ...

  8. Navicat for Mysql 暴力破解教程

    关于破解Navicat for MySQL的教程有很多 ,但是比较繁琐, 这里推荐一种比较简单的办法~ 网盘地址:链接: https://pan.baidu.com/s/1kVHyShL 密码: ws ...

  9. JAVA基础-----Maven项目的搭建

    Maven项目的搭建 一.前言 maven官网:http://maven.apache.org/, 文章简介:本文章从三个模块来了解Maven,分别是 Maven的基本概念~, Maven项目的安装和 ...

  10. 如何在BIOS里设置定时关机？

    如何在BIOS里设置定时关机? 通过CMOS设置实现定时开机的设置过程如下: 首先进入"CMOS SETUP"程序(大多数主板是在计算机启动时按DEL键进入): 然后将光条移到&q ...