轮播图

最新推荐文章于 2024-08-14 10:15:39 发布
最新推荐文章于 2024-08-14 10:15:39 发布
阅读量84 收藏
点赞数
分类专栏： 移动 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46139235/article/details/103923309
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<style>

 *{

     padding: 0;

     margin: 0;

     list-style: none;

 }

 div{

     height: 400px;

     width: 500px;

     /* border: 3px solid #999999; */

     margin:0 auto;

     position: relative;

     overflow: hidden;

 }

ul{  width: 100%;

    position: absolute;

    left: 0;

    top: 0;

}

ul li{

    float: left;

}

ol{

    width: 100px;

    height: 20px;

    margin-left:-50px;

    position: absolute;

    bottom: 20px;

    left: 50%;

    right: 50%;

    background: white;

    border-radius: 10px;

    display: flex;

    justify-content: space-around;

    align-items: center;

 

}

ol li{

    width: 20px;

    height: 15px;

    background: darkblue;

    border-radius: 50%;

}

a{

    text-decoration: none;

}

.box>a{

    position: absolute;

    text-align: center;

    line-height: 25px;

    top: 50%;

    font-size: 20px;

    width: 25px;

    height: 25px;

    background: #fff;

    

 

}

a{

    text-decoration: none;

    color: #000;

 

}

.box>a.left{

    left: 0;

}

.box>a.right{

    right: 0;

}

ol li.active{

    background:red;

}

</style>

<body>

    <div class="box">

        <ul>

            <li><img src="images/1.jpg" width="500" height="400"></li>

            <li><img src="images/2.jpg" width="499" height="400"></li>

            <li><img src="images/3.jpg" width="499" height="400"></li>

            

            <li><img src="images/4.jpg" width="499" height="400"></li>

            <li><img src="images/5.jpg" width="499" height="400"></li>

        </ul>

        <ol>

            <!-- <li></li>

            <li></li>

            <li></li> -->

        </ol>

        <a href="javascript:;" class="left">&lt;</a>

        <a href="javascript:;" class="right">&gt;</a>

    </div>

    

</body>

<script>

 var box=document.querySelector(".box")

 ulis=box.querySelectorAll("ul li");

 var ol=box.querySelector("ol");

//  console.log(ol)

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

 var li=document.createElement("li")

         ol.appendChild(li)

 }

 ol.children[0].className="active"

var ul=box.querySelector('ul');

var firstli=ul.children[0].cloneNode(true)

var lastli=ul.children[ul.children.length-1].cloneNode(true);

// console.log(firstli,lastli)

// console.log(ol)

ul.appendChild(firstli);// 将复制出来的第一个放到末尾

ul.insertBefore(lastli,ul.children[0]);// 将复制出来的最后一个放到开头  (新节点，旧节点   )

ul.style.width=ul.children.length*firstli.offsetWidth+"px";// 设置ul的宽度

// console.log(ul)

var flag=true;

var index=1;

 

ul.style.left=-index*firstli.offsetWidth+"px";// 设置ul的left值


 

var index=1;

 

// 获取右按钮

var rightbtn=box.querySelector("a.right")

 

rightbtn.οnclick=function(){

    if( !flag){

        return;

 

    }

    flag=false;

    index++;

    move(ul,{left:-index*firstli.offsetWidth},function(){

        if(index==ul.children.length-1){

            index=1;

            ul.style.left=-index*firstli.offsetWidth+"px";

 

        }

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

            ol.children[i].className="";

 

        }

         ol.children[index-1].className='active';

         flag=true;// 运动结束以后将开关打开

    });

}


 

// 获取左按钮

var leftbtn=box.querySelector("a.left");

leftbtn.οnclick=function(){

    if(!flag){ // 判断开关是否开着

        return; // 如果开关是关着的，就停止往下执行

    }

    flag = false; // 能走到这里，说明开关是开着的，可以运行的，将开关关上

    index--;

    // 在这里让ul调用动画函数运动

    move(ul,{left:-index*firstli.offsetWidth},function(){

        // console.log("移动了");

        if(index==0){

            index=ul.children.length-2;

            ul.style.left = -index*firstli.offsetWidth + "px";

        }

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

            ol.children[i].className = '';

        }

        ol.children[index-1].className = 'active'

            flag = true;

    });

 

}

 

// 自动轮播

var timer;

timer=setInterval(function(){

    if(!flag){ // 判断开关是否开着

        return; // 如果开关是关着的，就停止往下执行

    }

    flag = false; // 能走到这里，说明开关是开着的，可以运行的，将开关关上

    index++;

    // 在这里让ul调用动画函数运动

    move(ul,{left:-index*firstli.offsetWidth},function(){

        // console.log("移动了");

        if(index==ul.children.length-1){

            index=1;

            ul.style.left = -index*firstli.offsetWidth + "px";

        }

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

            ol.children[i].className = '';

        }

        ol.children[index-1].className = 'active'

            flag = true;

    });

    

 

},500)

 

// box鼠标移入清除定时器

box.οnmοuseenter=function(){

    clearInterval(timer);

}


 

// box鼠标移出设置定时器

box.οnmοuseleave=function(){

    timer = setInterval(function(){

    if(!flag){ // 判断开关是否开着

        return; // 如果开关是关着的，就停止往下执行

    }

    flag = false; // 能走到这里，说明开关是开着的，可以运行的，将开关关上

    index++;

    // 在这里让ul调用动画函数运动

    move(ul,{left:-index*firstli.offsetWidth},function(){

        // console.log("移动了");

        if(index==ul.children.length-1){

            index=1;

            ul.style.left = -index*firstli.offsetWidth + "px";

        }

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

            ol.children[i].className = '';

        }

        ol.children[index-1].className = 'active'

            flag = true;

    });

},500);

 

}

 

// 小圆点的点击事件

for(let i=0;i<ol.children.length;i++ ){

    ol.children[i].οnclick=function(){

        if( !flag){

        return;

 

    }

    flag=false;

    index=i+1;

    move(ul,{left:-index*firstli.offsetWidth},function(){

        if(index==ul.children.length-1){

            index=1;

            ul.style.left=-index*firstli.offsetWidth+"px";

 

        }

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

            ol.children[i].className="";

 

        }

         ol.children[index-1].className='active';

         flag=true;// 运动结束以后将开关打开

    });

 

    }

 

}


 

//移动函数   元素 对象 函数  

function move(ele,obj,cb){

    var timerObj = {}

    for(let attr in obj){

        if(attr == "opacity"){

            obj[attr] *= 100;

        }

        timerObj[attr] = setInterval(function(){

            let l = window.getComputedStyle(ele)[attr];

            if(attr == "opacity"){

                l *= 100;

            }

            l = parseInt(l);

            let diff = obj[attr] - l;

            let percent = diff/10; 

            if(percent>=0){

                percent = Math.ceil(percent);

            }else{

                percent = Math.floor(percent);

            }

            l+=percent;

            if(l==obj[attr]){ 

                clearInterval(timerObj[attr]); 

                delete timerObj[attr]

                var k=0;

                for(var i in timerObj){

                    k++;

                }

                if(k==0){

                   cb();

                }

            }else{

                if(attr == "opacity"){

                    ele.style[attr] = l/100;

                }else{

                    ele.style[attr] = l+"px";

                }

            }

        },20);

    }

}


 

</script>

 

 

</html>

奔跑的DIV
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js点击切换的轮播图
猿码互联
06-12 592
通过上述代码，我们实现了一个简单的点击切换的轮播图。其中，点击上一张按钮会切换到前一张图片，点击下一张按钮会切换到下一张图片。当切换到第一张图片时，再点击上一张按钮会切换到最后一张图片；当切换到最后一张图片时，再点击下一张按钮会切换到第一张图片。
Vuetify Carouse轮播图 图片切换导致页面总是自动跳转到轮播图位置
♡ 脚下的每一步都叫远方 ♡
07-14 1412
vuetify carouse轮播图 的图片自动切换的时候, 会自动聚焦跳转到轮播图自身的位置. 这导致了一个问题, 当屏幕同时显示着轮播图和其他内容时, 轮播图一自动切换, 页面就会自动跳转到轮播图的位置… Solution1 Solution2 我在找问题的时候, 也发现了一个有趣的问题 如果有 v-container 标签包裹的 带淡入特效的轮播图, 那么他会自动跳转 如下问题重现: https://codepen.io/syousui/pen/pogZKPV?editors=1010 那么这样解
JS 轮播图 图片切换（定时器）
热门推荐
qq_38318589的博客
08-13 4万+
JS 轮播图 图片切换（定时器） 这次的轮播图与上次的图片切换相比，仅仅是加上了定时器，使其可以自动切换。 上次的图片切换的链接：https://blog.csdn.net/qq_38318589/article/details/99050117
用JS实现图片切换、定时器、轮播图
DDL_lalala的博客
09-09 8893
一. 图片切换 实现功能： 当点击“下一页”时，跳转到下一张图片； 当点击“上一页”时，跳转到上一张照片； 显示当前页/总页数，如：2/6。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片切换</title> <style t...
轮播图切换圆点html,图片轮播器，点击小圆点按钮实现图片切换。别的都对。哪里错了呀！...
weixin_39969143的博客
05-31 1371
按照阿安老师的《焦点图轮播特效》这部教程，5-1课。一步一步做的。检查了好几遍都没有错呀？为什么就是不执行呢？别的都好了，就是点击小圆点切换到相应的图片不行，代码见69-76行，哪里错了呢？74行中的animate(offset);是起到什么作用的？html>焦点轮播图*{margin:0;padding:0;text-decoration:none;}body{paddin...
JavaScript 实战（图片切换）【轮播图】
HuoZhiyan 的博客
04-10 3531
JavaScript 实现简单的轮播图效果。
使用CSS实现简单的图片切换（轮播图）
qq_43452286的博客
03-29 3万+
使用CSS实现简单的图片切换（轮播图） 预览图如下： 一:首先创建基本布局 创建一个div容器 ，里面的ul与ol标签分别对应轮播图片和下方圆点； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont...
微信小程序开发-图片切换功能，小程序切图功能，给轮播图添加点击左右滑动效果，给轮播图添加点击切换效果，循环切换
2401_83100107的博客
05-17 1516
微信小程序开发-图片切换功能，小程序切图功能，给轮播图添加点击左右滑动效果，给轮播图添加点击切换效果，循环切换，按钮切换下一张图片，按钮切图，实现在小程序分页中展示多张图片，并利用索引触发来实现切换到上一张和下一张图片的功能。通过维护一个变量来记录当前显示的图片索引，并通过点击事件触发不同的处理函数来实现对应功能，横屏显示
html实现网页图片切换,前端开发 纯CSS实现网页轮播图切换！
weixin_39611049的博客
06-09 737
/p><body {margin: 0px;padding: 0px;}.carousel {position: relative;box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);margin-top: 26px;}.carousel-inner {position: relative;overflow: hidden;width: 100%;}...
b站黑马的Vue快速入门案例代码——图片切换（类似手动播放的轮播图）
weixin_72322475的博客
12-13 4965
b站黑马的Vue快速入门案例代码——图片切换（类似手动播放的轮播图）
jquery图片轮播图多图切换效果（带小图左右箭头）
03-16
jQuery提供了一系列的动画方法，如`fadeIn`、`fadeOut`等，可以用来实现平滑的图片切换效果。同时，Swiper也内置了丰富的过渡动画效果，可以根据需求进行设置。 总的来说，“jquery图片轮播图多图切换效果（带小图...
纯div+css轮播图片切换图片
11-07
下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 图片切换是通过CSS控制图片的显示和隐藏，实现图片的动态变化。这通常涉及到CSS的`display`属性，通过改变...
图片切换，轮播图
03-17
在网页设计和开发中，图片切换与轮播图是一种常见的元素，用于展示多张图片或内容，特别是当页面空间有限但需要展示的信息量较大时。它们通常被用于产品展示、新闻更新、广告轮播等场景。轮播图设计的核心目标是提供...
css轮播图片百叶窗切换
12-29
在网页设计中，动态效果的使用可以极大地提升用户体验，其中轮播图（Slider）是一种常见的展示方式，它能够以优雅的方式展示多张图片或内容。而“百叶窗”切换效果则是轮播图动画中的一种独特设计，它模拟了百叶窗...
IOS轮播图合集（视频+图片）
02-16
在iOS开发中，轮播图（Carousel）是一种常见的UI组件，用于展示一组可滑动的图片或视频，常用于广告、推荐内容或者展示多种产品。本资源“IOS轮播图合集（视频+图片）”显然是一个包含了实现这种功能代码示例的...
前端案例：极速问诊项目（移动端自适应）（HTML+CSS+JS）
li3123537691的博客
08-13 299
一个简单的移动端案例，模拟不同设备下逻辑分辨率不同，宽高自适应正常打开整体布局打开 f12 （ctrl + shift + M）或者点击左上角图标,将其模拟为移动端设备在移动设备iPhone6/7/8，逻辑分辨率375的整体布局其banner图尺寸现在切换设备为iPad，逻辑分辨率为768，此设备下banner图尺寸自适应再切换设备为iPhone 14 Pro Max，逻辑分辨率为430，此设备下banner图尺寸自适应。
怎么将两首音乐合拼接在一起？音乐拼接的常见方法
ZCR20000的博客
08-12 979
接下来，给你的项目起一个易于识别的名称，并选择一个合适的保存位置，最后点击“创建”按钮，一个新的音乐项目就建立好了。再次点击“文件”（File）菜单，选择“导入”（Import）命令（注意，在某些版本的Audition中，“导入”可能直接位于“文件”菜单下，无需先选择“打开”）。这时，一个文件选择窗口将会弹出，允许你浏览你的电脑文件夹，寻找并挑选你想要合并的音频文件。在数字音乐制作的浩瀚宇宙中，将两首音乐巧妙地合并成一段无缝的混音，不仅是技术上的挑战，更是艺术灵感的碰撞与融合。
移动端的知识 以及 排静态网页的步骤
最新发布
x15514104477的博客
08-14 903
移动端的知识（基础知识） 以及 排静态网页的示例步骤
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能
qq_42431718的博客
08-13 261
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
轮播图图片切换背景根据图片颜色渐变怎么弄
07-22
要实现轮播图图片切换背景根据图片颜色渐变的效果，可以使用CSS和JavaScript来实现。下面是一种实现方式的示例代码： HTML部分： ```html ``` CSS部分： ```css .slideshow { position: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值