直接上代码了：

<!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. 将后面的m个数移到前面

    #include<iostream> #include<algorithm> #include<stdio.h> #include<numeric> u ...

  2. leetcode算法题2: 合并两个二叉树。递归，如何切入并保持清醒？

    /* Given two binary trees and imagine that when you put one of them to cover the other, some nodes o ...

  3. sql执行时间过长，请高手指点！

    需求:查询出每一位"社工员"通过23门社工课进度100%的数量和23门社工课对应的考试通过的数量. 业务解析: 1.社工员--针对特定学员的一批人.在表USERS_SW_REGIS ...

  4. QT之TCP通信

    QT中可以通过TCP协议让服务器和客户端之间行通信.所以下面我就围绕服务器和客户端来写. 这是我么写服务器和客户端的具体流程: A.服务器: 1.创建QTcpServer对象         2.启动 ...

  5. pku 1061 青蛙的约会 扩展欧几里得

    青蛙的约会Time Limit: 1000MS Memory Limit: 10000KTotal Submissions: 120482 Accepted: 25449Description 两只青 ...

  6. Chrome浏览器调试技巧

    本文主要讲解针对chrome浏览器的调试方案,对于其他浏览器其实大同小异. 先来入门一点的 DOM元素调试 看上图: 以上图表明的1,2,3,4,5标记说明: 1,为移动设备模拟器,chorme现在是 ...

  7. Cocos2d-x 3.1.1 学习日志10--一进来你就知道了Box2D了

    error LNK2019: 无法解析的外部符号 "public: __thiscall b2Draw::b2Draw(void)" (? ?0b2Draw@@QAE@XZ),该符 ...

  8. 剑指offer面试题14-调整数组顺序使奇数位于偶数前面

    题目: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得全部奇数位于数组的前半部分.全部偶数位于数组的后半部分. 前后分的这个.,让我想起来高速排序.好吧,就用这个做. 考虑到了排序的可扩 ...

  9. JavaScript 定义类的最佳写法——完整支持面向对象（封装、继承、多态），兼容所有浏览器，支持用JSDuck生成文档

    作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...

  10. Lua的数学函数

    ua5.1中数学库的所有函数如下表: ​ math.pi 为圆周率常量 = 3.14159265358979323846 函数名 函数功能 示例 示例结果 abs 取绝对值 math.abs(-15) ...