图片轮播 javascript

最新推荐文章于 2024-06-07 23:26:45 发布
最新推荐文章于 2024-06-07 23:26:45 发布
阅读量145 收藏
点赞数
文章标签： 前端 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58350436/article/details/128983305
版权

css ：

x;

    height: 20px;

    border: 2px solid white;

    margin: 10px;

    border-radius: 50%;

    display: block;

    float: left;

}

.xia{

    position: absolute;

    top: 90%;

    left: 20%;

}

.active{

    background-color: red;

}

导入imgRotation.js ,代码如下

var interval ;  // 定时器的名字

var index = 0 ; // 图片元素的下标

// 图片的个数

var imgLength = document.getElementsByTagName("img").length;


 

// 切换下一张图片

function nextImg(){

    index++ ;

    addStyle();

}

// 切换上一张图片

function prevImg(){

    index-- ;

    addStyle();

}


 

// 给当前元素设置样式

function addStyle(){

    $("img").eq(index % imgLength).fadeIn(); // 当前图片 淡入

    $("img").eq(index % imgLength).siblings().fadeOut();// 其他兄弟元素 淡出

    $("span").eq(index % imgLength).addClass("active");

    $("span").eq(index % imgLength).siblings().removeClass("active");

}


 

// 鼠标移入 的时候  暂停切换  

$(".wai").mouseover( function(){

        clearInterval(interval); // 停止定时器

});

// 移出是 继续轮播

$(".wai").mouseout( function(){

    action();

});

// 切换上一张图片

$("#btn1").click(function(){

    prevImg();

});

// 切换下一张图片

$("#btn2").click(function(){

    nextImg();

});


 

// 定义周期性函数

function action(){

    interval = setInterval(function(){

        nextImg();

    } , 1000);

}

action();

html：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            .wrapper {

                width: 600px;

                height: 350px;

                border: 1px solid red;

                position: relative;

                margin: auto;

            }

       

            /* 5张图片叠加到一块 */

            .wrapper img {

                width: 100%;

                height: 100%;

                position: absolute;

                left: 0;

                top: 0;

                display: none;

            }

       

            .wrapper img:nth-of-type(1) {

                display: block;

            }

       

            /* 小圆点 */

            .btn {

                width: 150px;

                display: flex;

                justify-content: space-around;

                position: absolute;

                left: 225px;

                bottom: 10px;

                z-index: 100

            }

       

            .btn span {

                display: block;

                width: 15px;

                height: 15px;

                border: 3px solid white;

                border-radius: 50%;

            }

       

            /* 左右箭头 */

            .wrapper a {

                text-decoration: none;

                font-size: 50px;

                color: red;

                position: absolute;

                top: 35%;

            }

       

            .wrapper a:nth-of-type(1) {

                left: 10px;

       

            }

       

            .wrapper a:nth-of-type(2) {

                right: 10px;

            }

       

            .active {

                background-color: red;

            }

        </style>

    </head>

    <body>

        <div class="wrapper">

            <div class="contain">

                <img src="./image/1.jpg" alt="">

                <img src="./image/2.jpeg" alt="">

                <img src="./image/3.jpg" alt="">

                <img src="./image/4.jpg" alt="">

                <img src="./image/5.jpg" alt="">

           

            </div>

            <div class="btn">

                <span class="active"></span>

                <span></span>

                <span></span>

                <span></span>

                <span></span>

            </div>

            <a href="javascript:void(0);">&lt;</a>

            <a href="javascript:void(0);">&gt;</a>

        </div>

        <script src="../04、2023-2-8图片轮播/js/jquery-3.6.3.min.js"></script>

        <script>

            var index=0;

            // 点击上一张

            $("a:first").click(function(){

                prev_pic();

            })

            // 点击下一张

            $("a:last").click(function(){

                next_pic();

            })

            // 悬浮停止

            $(".wrapper").mouseover(function(){

                clearInterval(id);

            });

            $(".wrapper").mouseout(function(){

                    autoplay();

            })

           

           

            // 下一张

            function next_pic(){

                index++;

                if(index>4){

                    index=0;

                }

                addStyle();

            }

           

            // 上一张

            function prev_pic(){

                index--;

                if(index<0){

                    index=4;

                }

                addStyle();

            }

           

            // 控制图片显示隐藏,小圆点背景色

            function addStyle(){

                $("img").eq(index).fadeIn();

                $("img").eq(index).siblings().fadeOut();

                $("span").eq(index).addClass("active");

                $("span").eq(index).siblings().removeClass("active");

            }

           

            // 自动轮播

            var id;

            autoplay();

            function autoplay(){

                id=setInterval(function(){

                    next_pic();

                },1000)

            }

           

        </script>

    </body>

</html>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            .wrapper {

                width: 600px;

                height: 350px;

                border: 1px solid red;

                position: relative;

                margin: auto;

            }

       

            /* 5张图片叠加到一块 */

            .wrapper img {

                width: 100%;

                height: 100%;

                position: absolute;

                left: 0;

                top: 0;

                display: none;

            }

       

            .wrapper img:nth-of-type(1) {

                display: block;

            }

       

            /* 小圆点 */

            .btn {

                width: 150px;

                display: flex;

                justify-content: space-around;

                position: absolute;

                left: 225px;

                bottom: 10px;

                z-index: 100

            }

       

            .btn span {

                display: block;

                width: 15px;

                height: 15px;

                border: 3px solid white;

                border-radius: 50%;

            }

       

            /* 左右箭头 */

            .wrapper a {

                text-decoration: none;

                font-size: 50px;

                color: red;

                position: absolute;

                top: 35%;

            }

       

            .wrapper a:nth-of-type(1) {

                left: 10px;

       

            }

       

            .wrapper a:nth-of-type(2) {

                right: 10px;

            }

       

            .active {

                background-color: red;

            }

        </style>

    </head>

    <body>

        <div class="wrapper">

            <div class="contain">

                <img src="./image/1.jpg" alt="">

                <img src="./image/2.jpeg" alt="">

                <img src="./image/3.jpg" alt="">

                <img src="./image/4.jpg" alt="">

                <img src="./image/5.jpg" alt="">

           

            </div>

            <div class="btn">

                <span class="active"></span>

                <span></span>

                <span></span>

                <span></span>

                <span></span>

            </div>

            <a href="javascript:void(0);">&lt;</a>

            <a href="javascript:void(0);">&gt;</a>

        </div>

        <script src="../04、2023-2-8图片轮播/js/jquery-3.6.3.min.js"></script>

        <script>

            var index=0;

            // 点击上一张

            $("a:first").click(function(){

                prev_pic();

            })

            // 点击下一张

            $("a:last").click(function(){

                next_pic();

            })

            // 悬浮停止

            $(".wrapper").mouseover(function(){

                clearInterval(id);

            });

            $(".wrapper").mouseout(function(){

                    autoplay();

            })

           

           

            // 下一张

            function next_pic(){

                index++;

                if(index>4){

                    index=0;

                }

                addStyle();

            }

           

            // 上一张

            function prev_pic(){

                index--;

                if(index<0){

                    index=4;

                }

                addStyle();

            }

           

            // 控制图片显示隐藏,小圆点背景色

            function addStyle(){

                $("img").eq(index).fadeIn();

                $("img").eq(index).siblings().fadeOut();

                $("span").eq(index).addClass("active");

                $("span").eq(index).siblings().removeClass("active");

            }

           

            // 自动轮播

            var id;

            autoplay();

            function autoplay(){

                id=setInterval(function(){

                    next_pic();

                },1000)

            }

           

        </script>

    </body>

</html>

weixin_58350436
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 实现图片轮播
m0_58225312的博客
10-10 1940
今天给大家介绍下怎么用 JS 实现图片轮播效果。 原理描述： 使用JS实现轮播的原理是这样的： 假设初始的情况，下图一个网格代表一个图，初始时，显示1 ： 代码实现： 1 JS 代码： <script type="text/javascript"> window.οnlοad=function(){ //获得ul的元素 var imgList=document.getElementById("imgList"); //...
JavaScript实现简单图片轮播效果
10-19
主要介绍了JavaScript实现简单图片轮播效果，点击下标切换到该图片上，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用JavaScript实现图片的自动轮播
Sun_blog
09-21 4975
在网站开发中，经常会遇到需要展示多张图片并自动切换的需求，这就需要使用JavaScript来实现图片的自动轮播功能。本文将通过一个简单的例子，演示如何用JavaScript实现图片的自动轮播，并确保代码占比不高于50%。通过上述步骤，我们成功实现了使用JavaScript来实现图片的自动轮播。在HTML结构中，我们使用标签来表示图片，并给每个图片设置了唯一的id。在CSS样式中，我们使用绝对定位和过渡效果来实现图片切换的动画效果。
JavaScript实现图片自动轮播
weixin_45746811的博客
11-07 8886
轮播图片、页面定时弹出广告、表单校验。
JavaScript实现图片切换
weixin_43228946的博客
08-15 833
JavaScript实现点击按钮从而使图片切换
JavaScript图片动态轮播，切换图片
qq_39263716的博客
05-17 307
JavaScript图片动态轮播，点击分页编号转到指定图片 鼠标事件，放上去暂停，移开继续
JavaScript图片轮播
bestlove12345的博客
07-07 725
JavaScript图片轮播 "text/javascript">   var arr= new Array;   arr[0] = "image/a.jpg";   arr[1] = "image/b.jpg";   arr[2] = "image/c.jpg";   arr[3] = "image/d.jpg";   arr[4] = "image/f.jpg
JavaScript图片切换
weixin_57769777的博客
06-07 2392
本次使用的是图片切换的效果主要javaScript来实现功能。 一、什么是HTML，HTML怎么作用法，HTML具体能做什么？ HTML是超文本标签语言（Hyper Text Markup Labguage）,标准用过标记语言下的一个应用。HTML不是编程语言，而是一种标记语言（markup language）,是自作网页的首选。 HTML 超文本编程语言定于：超文本标记语言是标准 用标记语言下的一个应用，也是个一种规范，一种标准。它通过标记符号来标记要，起到标记的重要作用，那么本次就是使用到了jav
用javascript实现图片轮播效果
HeiSeHuoEr的博客
12-19 1446
如何用javascript实现图片轮播效果 先上实现的效果图： 其中包括三种轮播效果，（有序，无序，上一页下一页） 以下是我的实现代码，大家有更好的实现方式，可以给我留言，让我学习下。 // An highlighted block &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;t...
JavaScript笔记-点击切换图片
IT1995的博客
05-23 907
最近（2022-03-25）想做个导航页。 涉及这个知识点，在此记录下，实现的效果如下： 点击那个百度后，会切换： 关键代码如下： 图片相关的html代码： <div id="engine-logo" class="search-logo my-2"> <img id="searchLogo" style="width: 220px; height:80px;" alt="搜索引擎Logo" onclick="changePic()" src="img/baidu
简易javascript图片轮播代码
rubbish_Timor的博客
07-05 9677
javascript图片轮播代码 因为自己是新手自学不久，所以代码有很多不规范的地方，请原谅。 html部分代码： <div id="head"> <button id="prev" onmousedown="p()" onmouseout="cal()"><</button> <img height="500px" width="500px"...
JavaScript 图片轮播特效代码
03-20
一个用 Javaｓｃｒｉｐｔ 实现的图片轮播效果，兼容各种浏览器（IE、Firefox、Chrome），体积小，不压缩也只有 10kb，调用方便，比一般的 flash 轮播效果更省资源，更快的加载速度。 示例： 页面中已经存在名为...
javascript实现图片轮播效果
10-22
主要为大家介绍了javascript实现图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
轻松实现JavaScript图片切换
10-22
主要帮助大家轻松实现JavaScript图片切换，内容很精简，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
轻松实现javascript图片轮播特效
10-22
主要帮助大家轻松实现javascript图片轮播特效，点击标签还可以实现图片切换，感兴趣的小伙伴们可以参考一下
前端性能优化：提升网站加载速度的终极指南
最新发布
喔的嘛呀的博客
06-07 732
综上所述，通过以上优化方案和具体措施，我们可以有效地提升网站的加载速度，改善用户体验，提高转化率，从而在激烈的市场竞争中脱颖而出，取得更好的业绩和口碑。作为前端工程师，我们应该不断学习和探索，不断优化和提升网站性能，为用户创造更好的上网体验。
浏览器阻止屏幕息屏,js阻止浏览器息屏,Web网页阻止息屏
lianmindiandi
06-04 167
比如打开一个浏览器页面(比如大屏),想让它一直显示着,而不是过几分钟不操作就屏幕黑了.(电脑有设置电脑不操作就会多长时间就会息屏睡眠,如果要求每个客户都去操作一下电脑设置一下从不睡眠,这很不友好和现实.而且我也只想客户在大屏的时候才这样,其他页面就正常,按电脑设定走)如果想看看效果,可以试试,最好把电脑息屏改成1分钟,要不然等太久了, 累啊…(除非等待时间玩把手游😁)这是看了前端css大佬张鑫旭写的一波文章,观后有感😄,如果大家不认识,百度一波。是不是很简单,但是这里面还有一些注意点,
Typescript高级: 深入理解extends keyof语法
Wang的专栏
06-02 821
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
NSSCTF WEB 题解（一）
2301_81105268的博客
06-04 1015
题目提示：F12下发环境，打开网址，进入网页后点击F12查看源代码直接查找flag可以得到flag。
javascript图片轮播
09-09
### 回答1： 下面是一个简单的 JavaScript 图片轮播示例： HTML 代码： ```html <div class="slideshow-container"> <div class="mySlides fade"> <img src="1.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="2.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="3.jpg" style="width:100%"> </div> </div> <!-- 下面是轮播图的点点 --> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> ``` CSS 代码： ```css /* 隐藏所有的轮播图 */ .mySlides { display: none; } /* 轮播图容器 */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* 图片的样式 */ .mySlides img { vertical-align: middle; } /* 点点的样式 */ .dot { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } /* 当点点被选中时的样式 */ .active { background-color: #717171; } ``` JavaScript 代码： ```javascript // 获取所有的轮播图和点点 var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); // 设置初始值 var slideIndex = 1; showSlides(slideIndex); // 下一张/上一张按钮的点击事件 function plusSlides(n) { showSlides((slideIndex += n)); } // 点点的点击事件 function currentSlide(n) { showSlides((slideIndex = n)); } // 轮播图的显示函数 function showSlides(n) { // 如果 n 大于轮播图的数量，则回到第一张 if (n > slides.length) { slideIndex = 1; } // 如果 n 小于 1，则跳到最后一张 if (n < 1) { slideIndex = slides.length; } // 隐藏所有的轮播图 for (var i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } // 取消所有点点的 active 样式 for (var i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } // 显示当前轮播图和点点 slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } // 每 3 秒钟自动切换一张图片 setInterval(function () { plusSlides(1); }, 3000); ``` 这个示例中，我们使用 JavaScript 来控制轮播图的显示。通过设置 `slideIndex` 变量的值来切换轮播图，然后更新轮播图和点点的显示状态。我们也添加了一个定时器来自动切换轮播图。如果你想要更加复杂的轮播图效果，可以使用一些第三方的 JavaScript 库，例如 Swiper 和 Slick。 ### 回答2： JavaScript图片轮播是一种常见的网页功能，可以通过编写JavaScript代码来实现。下面我将使用300字中文回答如何制作一个简单的JavaScript图片轮播。 首先，我们需要HTML网页来放置轮播图。创建一个带有`<div>`标签的容器元素，并设置其样式使其具有固定的高度和宽度。在该容器内，创建一个带有`<img>`标签的图片元素，用于显示图片。 接下来，在JavaScript代码中，我们需要定义一个数组来存放所有要轮播的图片的URL。可以使用`var`关键字创建一个数组变量，并在其中添加所有图片的URL地址。 然后，定义一个变量`currentIndex`来保存当前显示的图片的索引。初始化时，可以将其设置为0，表示显示第一张图片。 接下来，我们需要编写一个函数来实现图片的轮播效果。可以给容器元素添加一个事件监听器，当触发轮播事件时，调用该函数。在函数中，首先获取到图片容器和图片数组。然后，通过改变图片的`src`属性，将当前显示的图片更换为下一张图片。同时，更新`currentIndex`以指示下一张要显示的图片。 最后，为了实现连续轮播效果，可以使用`setTimeout`函数来设置一个时间间隔，在每次轮播后，等待一段时间再进行下一次轮播。 完整的JavaScript图片轮播代码如下所示： ```html <div id="slideshow"> <img id="image" src=""> </div> <script> var images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片URL数组 var currentIndex = 0; // 当前显示图片的索引 function slideShow() { // 图片轮播函数 var image = document.getElementById('image'); image.src = images[currentIndex]; currentIndex = (currentIndex + 1) % images.length; setTimeout(slideShow, 2000); // 设置时间间隔，单位为毫秒 } slideShow(); // 调用图片轮播函数 </script> ``` 上述代码实现了一个简单的JavaScript图片轮播功能。每2秒钟，页面中的图片将自动切换为下一张图片。你可以根据自己的需求修改代码中的图片URL和时间间隔等设置。 ### 回答3： JavaScript图片轮播是一种通过JavaScript代码实现的图片轮播效果。它可以在网页上呈现出多张图片，并以一定的时间间隔自动切换图片，以展示多个图片内容。 使用JavaScript实现图片轮播的基本步骤如下： 1. 首先，我们需要在HTML中创建一个容器元素，用于包裹图片元素，并设置合适的宽高以适应图片大小。 2. 然后，在JavaScript代码中，我们需要获取到容器元素和图片元素，可以通过元素的id或者class进行获取。 3. 接下来，我们可以定义一个变量，用来记录当前显示的图片序号。 4. 使用定时器函数（如setTimeout或setInterval）来控制图片切换的时间间隔。在定时器函数中，我们可以通过改变当前显示图片的序号，将显示的图片切换到下一张。 5. 切换图片时，可以通过修改图片元素的src属性来改变图片内容。 6. 添加事件监听器，使得用户可以手动切换图片。可以使用click事件监听器，当用户点击切换按钮时，改变当前显示图片的序号，从而实现手动切换图片。 7. 最后，为了达到循环播放的效果，当显示的图片序号超过最后一张图片时，可以将当前显示的图片序号重置为第一张。 通过以上步骤，我们就可以实现一个简单的JavaScript图片轮播效果。可以根据实际需求进行扩展，如添加过渡效果、添加图片描述等，以提升用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值