实现样式：

tplb.css

ul,

li {

    padding: 0;

    margin: 0;

    list-style: none;

}

.adver {

    margin: 0 auto;

    width: 700px;

    overflow: hidden;

    height: 454px;

    position: relative;

    background: url(../img/adver01.jpg);

}

ul {

    position: absolute;

    bottom: 10px;

    z-index: 100;

    width: 100%;

    text-align: center;

}

ul li {

    display: inline-block;

    font-size: 10px;

    line-height: 20px;

    font-family: "楷体";

    margin: 0 1px;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: #333333;

    text-align: center;

    color: #ffffff;

}

.arrowLeft,

.arrowRight {

    position: absolute;

    width: 30px;

    background: rgba(0, 0, 0, 0.2);

    height: 50px;

    line-height: 50px;

    text-align: center;

    top: 200px;

    z-index: 150;

    font-family: "楷体";

    font-size: 28px;

    font-weight: bold;

    cursor: pointer;

    display: none;

}

.arrowLeft {

    left: 10px;

}

.arrowRight {

    right: 10px;

}

li:nth-of-type(1) {

    background: orange;

}

html(6张图片轮播)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <link rel="stylesheet" href="css/tplb.css" />

    </head>

    <body>

            <!--

                1.完成点击 》、《 切换图片

                    1.1 鼠标进到 id="adver" 显示 》《

                    1.2 给绑定 》 单击事件，将 div 的背景图片切换到下一张

                        1.2.1 将所有被切换的图片存储在数组

                        1.2.2 存储的是现在显示的图片的在数组中的索引

                        1.2.3 将 索引 + 1，通过计算之后的索引到数组中获取图片的路径

                        1.2.4 如果 计算索引 超过了数组长度，索引从 0 开始

                    1.3 给绑定 》 单击事件，将 div 的背景图片切换到上一张

                        1.2.1 将 索引 - 1，通过计算之后的索引到数组中获取图片的路径

                        1.2.2 如果 计算索引 < 0，索引从 数组.length-1 开始

                    1.4 移出 id="adver" 隐藏 》《

                 -->

        <div class="adver" id="adver" onmouseover="showArrow()" onmouseout="hideArrow()">

            <ul>

                <li onclick="changeNumberImage(this)">1</li>

                <li onclick="changeNumberImage(this)">2</li>

                <li onclick="changeNumberImage(this)">3</li>

                <li onclick="changeNumberImage(this)">4</li>

                <li onclick="changeNumberImage(this)">5</li>

                <li onclick="changeNumberImage(this)">6</li>

            </ul>

            <div class="arrowLeft" id="arrowLeft" onclick="changePrveImage()">

                &lt;

            </div>

            <div class="arrowRight" id="arrowRight" onclick="changeNextImage()">

                &gt;

            </div>

        </div>

        <script type="text/javascript">

            // 存储所有被切换的图片

            var imageArray = ["url('img/adver01.jpg')", "url('img/adver02.jpg')", "url('img/adver03.jpg')",

                "url('img/adver04.jpg')", "url('img/adver05.jpg')", "url('img/adver06.jpg')",

            ];

            // 存储的是现在显示的图片的在数组中的索引

            var index = 0;

            //轮播

            function show(){

                setInterval(function(){

                    index++;

                    if(index>=imageArray.length){

                        index=0;

                    }

                    //切换图片地址，修改li样式

                    changeImage();

                },3000)

            }

            show();

            // 鼠标移入

            function showArrow(){

                document.getElementById("arrowLeft").style.display="block";

                document.getElementById("arrowRight").style.display="block";

            }

            //鼠标移出

            function hideArrow(){

                document.getElementById("arrowLeft").style.display="none";

                document.getElementById("arrowRight").style.display="none";

            }

            //切换下一张图片

            function changeNextImage(){

                // 1 将 索引 + 1，通过计算之后的索引到数组中获取图片的路径

                index++;

                // 2 如果 计算索引 超过了数组长度，索引从 0 开始

                if(index>=imageArray.length){

                    index=0;

                }

                changeImage();

            }

            //切换上一张图片

            function changePrevImage(){

                // 将 索引 - 1

                index--;

                // 如果 计算索引 < 0，索引从 数组.length-1 开始

                if(index<0){

                    index=imageArray.length-1;

                }

                changeImage();

            }

            //切换图片

            function changeImage(){

                // 数组中获取图片的路径

                var imagePath=imageArray[index];

                // 设置图片背景图片

                document.getElementById("adver").style.background=imagePath;

                // 获取所有的li

                var lis=document.getElementsByTagName("li");

                // 将 所有的li设置为黑色

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

                    lis[i].style.backgroundColor="black";

                }

                lis[index].style.backgroundColor="orange";

            }

            //点击li切换图片

            function changeNumberImage(liObj){

                // 获取到 li 内容

                var liNumber=liObj.innerText;

                // 通过 liNumber 获取图片的下标

                index=parseInt(liNumber)-1;

                changeImage();

            }

        </script>

    </body>

</html>

js/css实现图片轮播的更多相关文章

  1. 纯js轮播图练习-2，js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  2. 纯CSS 多图片轮播

    今天做东西的时候,遇到一个问题关于图片轮播的问题,以前也接触过(百度 人家的demo改改..),再次遇到这个问题的时候,根据以前的印象找到了demo正信心满满的准备改一下嵌进去,发现 jquery.m ...

  3. JS+html--实现图片轮播

    大家肯定见过某些网站一个炫酷的页面,就是图片轮播,也就是我们常说的幻灯片播放.对于初学者来说,可能会有点头疼,没关系,小李在这给大家献上自己刚刚写好的关于图片轮播的代码. 以下功能的实现用了jQuer ...

  4. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  5. js定时器实现图片轮播

    效果展示如下: setInterval(moverleft,3000);定时器设置为3秒,而且实现图片下方的小圆点序号跟图片对应,点击小圆点也能切换图片. 代码如下: <!DOCTYPE htm ...

  6. 项目实践2:使用html和CSS实现图片轮播

    好家伙, 使用html和CSS实现简单的图片切换(轮播图) 来自:(7条消息) 使用CSS实现简单的图片切换(轮播图)_LexingtonCV16的博客-CSDN博客_css实现图片切换 1.首先创建 ...

  7. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  8. html学习之路--简单图片轮播

    一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...

  9. 推荐一款超级漂亮的HTML5 CSS3的图片轮播器

    最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...

  10. HTML图片轮播

    一.纯 CSS 实现图片轮播 引自原文作者:南张人 原文链接:https://blog.csdn.net/u011848617/article/details/80468463 理论基础 CSS3 a ...

随机推荐

  1. Visual Studio NuGet的地址（记录）

    NuGet源地址 : https://nuget.org/api/v2/ https://api.nuget.org/v3/index.json  (推荐)

  2. keypress和keydown的区别

    keypress不识别功能键,比如ctrl,alt,shift,上下左右.keypress返回的ascII码区分大小写.输入小写a返回97,输入大写A返回65. keydown识别.keydown返回 ...

  3. 手动收集oracle的统计信息脚本及相关操作

    我们一般习惯使用oracle自带的统计信息收集,但很多时候我们会发现,有很多关键的表始终没有被收集过. connect 用户/密码grant create any table to 用户;-- 这一步 ...

  4. TS语法中interface和class的理解

    在TS中interface和后端语言如c#中的概念是不一样的,在TS中interface相当于定义了一种类型,是设置自定义类型的方式,区分与基础类型(number.string等),当定义变量时,就可 ...

  5. 8.golang语言学习，运算符介绍

    1.算术运算 自增,自减,只能单独使用,++,--只能写在变量后面 2.赋值运算符 优先级,单目运算,赋值运算从右到左运算,其余从左到右,无三目运算,用if实现 3.比较运算符/关系 4.逻辑运算符 ...

  6. 专业家庭影音服务器-硬件平台x86+固态盘+sata机械盘

    提到影音绕不开的就是大容量存储,就目前情况机械硬盘的海量存储还是唯一选择,所以实现起来总是绕不开NAS这个思路,比较起来,常规PC系统,固态和机械相结合,或许才是终极解决方案. 老式硬件 过失的产品在 ...

  7. 我眼中的Serverless

    https://cloud.tencent.com/document/product/583 摆脱服务器.存储等底层设备,只上传代码,由云服务器提供服务的触发,维护,调用.

  8. 如何保证RabbitMQ的消息按照顺序执行？？？

    可以采用单线程的消费保证消息的顺序性.对消息进行编号,1,2,3,4--消费时按照编号的顺序去消费消息.这样就可以保证消息 按照一定顺序执行.

  9. Day12-面向对象初识

    面向对象编程 Java的核心思想就是OOP 一.面向过程&面向对象 面向过程思想: 步骤清晰简单,第一步做什么,第二步做什么...... 面对过程适合处理一些较为简单的问题 面向对象思想: 物 ...

  10. memoize

    function getArea(r){ console.log(r); return Math.PI * r * r } function memoize(f){ let cache = {}; r ...