直接上代码了：

<!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. O（nlogn）算法，最长上升子序列，，非动规

    //最长上升子序列最快算法,非动态规划,运用了二分思想,还有栈的思想, //用每一个数去和栈中的栈顶元素相比较,如果大于栈顶元素,则入栈,否则运用二分查找,寻找出第一个比这个数大的那个数替换 #inc ...

  2. mysql 索引类型

    根据类型分为普通索引2种类型,hash 和b-tree   最常用    hash是按一对一索引的.速度 最快但不支持范围 比如where name = 'dd' 最快.但是使用 date >3 ...

  3. WampSever 安装问题解析

    鉴于有些电脑安装wampsever出现的几种问题 [1] 2.2版本问题 这里端口配置正确,本地服务器没有开启(也就是80端口没有占用) 还是出现这种情况 也就是Apache service 和 PH ...

  4. Java解决Hanoi问题

    package fa.ct; import java.util.Scanner; public class Hanoi { public static void hanoi(int num,char ...

  5. 剑指Offer_4_二维数组中的查找

    题目描述       在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数.       ...

  6. codevs1050

    题目地址:http://codevs.cn/problem/1050/ 分析: 最開始想直接用状压做,发现怎么都想不出来.就和当年的多行多米诺骨牌(这道题至少最后还是把普通状压做法看懂了). 直到听到 ...

  7. 支持国内版Office 365的PowerShell模块现已发布

    作者:陈希章 发表于2017年5月12日 上一篇文章我详细介绍了如何在PowerShell中访问到Office 365的Graph API,在文章结尾处我留了一个问题,希望有朋友可以根据那个思路,尝试 ...

  8. 转：Natas Wargame Level28 Writeup(EBC加密破解)

    From:http://alkalinesecurity.com/blog/ctf-writeups/natas-28-getting-it-wrong/ Now that I knew it was ...

  9. redis远程连接问题（安全模式问题）

    我在windows上远程连接linux上的redis(我虚拟机上的)遇到了问题,我是在windows上php代码中的调用redis接口来远程连接的,代码中ping()的时候报错. 服务器端我确定了ip ...

  10. MyBatis学习总结（一）简单入门案例

    MyBatis学习总结(一)简单入门案例 主要内容:本文主要通过对数据库中的use表进行增删改查总结mybatis的环境搭建和基本入门使用 一.需要的jar包: 1.核心包 2.依赖包 3.jdbc数 ...