实现样式：

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. 使用supervisor 管理 laravel 框架中的进程

    前言:在laravel中,经常要在项目根目录下执行 php artisan queue:work  来执行队列中的任务,由此,我们想到用supervisor来管理这个进程 Supervisor是用Py ...

  2. ABAP 删除内表重复数据

    SORT <内表> BY <字段> [ascending/descending]. DELETE ADJACENT DUPLICATES FROM <内表> COM ...

  3. springboot+mybais配置多数据源（分包实现）

    一.分包方式实现: 1.在application.properties中配置两个数据库: #druid连接池 #dataSoureOne(这里是我本地的数据源) spring.datasource.o ...

  4. lg9035题解

    考虑枚举\(a_{n-1}=l\),根据题意\(l\leq a_n\leq k+1-l\),这说明\(a_n\)有\(k+1-2l\)种取值. 令\(b_i=a_i-a_{i-1}\),则\(b_1\ ...

  5. Software--Java--远程调试

    Java 远程调试的原理是两个 VM 之间通过debug 协议进行通信,然后以达到远程调试的目的.两者之间可以通过socket进行通信. 步骤: 1. 首先被 debug 程序的虚拟机在启动时要开启d ...

  6. golang实现请求cloudflare修改域名A记录解析

    现在有些DNS解析要收费,国内的几个厂商需要实名制.下面给出golang请求cloudflare修改域名A记录解析的代码. 准备工作: 在域名购买服务商处,将dns解析服务器改为cloudflare的 ...

  7. laravel facebook等第三方授权登录

    https://laravelacademy.org/post/9043.html 使用laravel此扩展组件处理 https://developers.facebook.com/apps/?sho ...

  8. vue3+ts获取dom元素高度

    vue3+ts获取dom元素高度 <template> <div class="digestDetail-indedx"> <div class=&q ...

  9. mongodb地理位置坐标加了索引，操作时报错 Location object expected, location array not in correct format

    别犹豫了,将坐标中的数据改为数字类型即可,如: location:[113.45,34,191]

  10. 使用Dapr和Tye启动服务

    自 2019 年开源以来,Dapr(Distributed Application runtime )已迅速成为非常流行的构建微服务的开源框架.它提供了分布式应用程序中常用的构建块和已打包的服务,例如 ...