实现轮播图效果

已于 2023-03-02 09:19:02 修改
阅读量88 收藏
点赞数
文章标签： css html css3
于 2023-02-27 10:06:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50751685/article/details/129236317
版权

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            .max{

                width: 500px;

                height: 400px;

                margin: 100px auto;

                border: 1px solid red;

                position: relative;

            }

            .max img{

                width: 100%;

                height: 100%;

            }

            .zuo,.you{

                width: 50px;

                height: 100px;

                position: absolute;

                font-size: 30px;

                opacity: 0.8;

            }

            .zuo{

                left: 0px;

                top: 150px;

            }

            .you{

                right: 0px;

                top: 150px;

            }

            .anniu{

                width: 50px;

                height: 50px;

                position: absolute;

                font-size: 30px;

                opacity: 0.8;

                background-color: lightgray;

            }

            .max button:nth-of-type(3){

                left: 40px;

                bottom: 20px;

            }

            .max button:nth-of-type(4){

                left: 130px;

                bottom: 20px;

            }

            .max button:nth-of-type(5){

                left: 220px;

                bottom: 20px;

            }

            .max button:nth-of-type(6){

                left: 310px;

                bottom: 20px;

            }

            .max button:nth-of-type(7){

                left: 400px;

                bottom: 20px;

            }

        </style>

    </head>

    <body>

        <div class="max">

             <img src="./img/111.jpg" />            <!--图片地址 -->

            <button class="zuo" οnclick="left()"><</button>

            <button class="you" οnclick="right()">></button>

            <button class="anniu" οnclick="dj(0)">1</button>

            <button class="anniu" οnclick="dj(1)">2</button>

            <button class="anniu" οnclick="dj(2)">3</button>

            <button class="anniu" οnclick="dj(3)">4</button>

            <button class="anniu" οnclick="dj(4)">5</button>

        </div>

        <button οnclick="qc()">清除计时器</button>

    </body>

    <script type="text/javascript">

        //声明一个变量等会儿当下标用

        var xx=0;

       

        yanse();

       

        //拿到图片

        var img=document.querySelector("img");

        //用一个数组装图片的名字

        var arr=[111,222,333,444,555];

        //点击左得方法

        function left(){

        //先让变量减减

            xx--;

        //判断当变量小于0得时候就让它变为4

            if(xx<0){

                xx=4;

            }

        //给图片换地址 地址里用到数组取值 从上面数组里拿图片名字

            img.src="./img/"+arr[xx]+".jpg";

           

            yanse();

        }

        //点击右得方法

        function right(){

        //先让变量加加

            xx++;

        //判断当变量大于4得时候就让它变为0

            if(xx>4){

                xx=0;

            }

        //给图片换地址 地址里用到数组取值 从上面数组里拿图片名字

            img.src="./img/"+arr[xx]+".jpg";

           

            yanse();

        }

        //点击单个按钮得方法

        function dj(num){

        //在上面绑定点击事件得时候 我们传参了几个数字 直接赋值给变量 就可以当下标用了

            xx=num;

        //给图片换地址 地址里用到数组取值 从上面数组里拿图片名字

            img.src="./img/"+arr[xx]+".jpg";

           

            yanse();

        }

       

        function yanse(){

            var btn=document.querySelectorAll(".anniu");

            // btn[0].style.backgroundColor="lightgray";

            // btn[1].style.backgroundColor="lightgray";

            // btn[2].style.backgroundColor="lightgray";

            // btn[3].style.backgroundColor="lightgray";

            // btn[4].style.backgroundColor="lightgray";

            // for(var a=0;a<btn.length;a++){

            //  btn[a].style.backgroundColor="lightgray";

            // }

            btn.forEach(i=>{

                i.style.backgroundColor="lightgray";

            })

           

            btn[xx].style.backgroundColor="pink";

        }

        var jsq=setInterval(right,1000)

        var max=document.querySelector(".max");

        // onmouseenter鼠标进入

        // onmouseleave鼠标离开

        max.οnmοuseenter=function(){

            clearInterval(jsq)

        }

        max.οnmοuseleave=function(){

            jsq=setInterval(right,1000)

        }

        // 清除计时器 必须用变量装 然后清除变量

        // clearInterval(计时器)

        // clearInterval(jsq)

       

        // function qc(){

        //  clearInterval(jsq)

        // }

       

        // var shuzu=[23,4576,1243,567,3214,235253,4564564354];

        // console.log(shuzu)

        // for(var a=0;a<shuzu.length;a++){

        //  console.log(shuzu[a])

        // }

        // 数组.forEach(function(参数1){

        //  参数1就是数组得每一位

        // })

        // shuzu.forEach(function(xx,yy){

        //  console.log(xx,yy)

        // })

        // shuzu.forEach((xx,yy)=>{

        //  console.log(xx,yy)

        // })

    </script>

</html>

临叮当
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS—实现轮播图效果
weixin_73444052的博客
04-14 1060
用JS实现轮播图效果实现功能：1、自动轮播 2、手动轮播，左右切换 3、鼠标指针悬停在图片上时停止轮播，鼠标指针移开继续轮播。提示：以下是本篇文章正文内容，下面案例可供参考。
vue实现轮播图效果
m0_63229717的博客
05-16 5380
使用vue实现完善的轮播功能详解
轮播图效果
一笑的博客
10-19 578
比较复杂，好好看。。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none;
Vue 过渡实现轮播图效果
08-31
在本文中，我们将深入探讨如何使用Vue过渡系统来实现轮播图效果。 首先，Vue的过渡效果是通过在元素上设置`transition`属性来触发的。当元素的状态发生变化（如显示或隐藏）时，Vue会自动应用这些过渡效果。在实现...
基于React Native 0.52实现轮播图效果
12-11
二、实现轮播图效果 1、通过npm安装react-native-swiper npm install react-native-swiper --save 2、在recommend.js引入react-native-swiper import Swiper from 'react-native-swiper'; 3、用 react-native-...
利用iscroll4实现轮播图效果实例代码
12-29
相信很多人和我一样，在使用iscroll的是时候只知道可以手动滑动，不知道iscroll的轮播怎么实现，那么以下就是我做的一个轮播效果，亲测有效； 一、html代码,当然可以动态添加下面的小圆点 <li><strong>1....
Swiper实现轮播图效果
08-30
Swiper实现轮播图效果 Swiper 是一个功能强大、灵活且轻量级的滑块库，主要用于实现轮播图、滑块、Tabs、Gallery 等多种交互效果。本文将详细介绍如何使用 Swiper 实现轮播图效果，并提供了完整的 HTML、CSS 和 ...
前端JavaScript实现轮播图效果
04-11
最后，我们需要编写JavaScript代码来实现轮播图的动态切换和交互功能。在`slide.js`文件中，我们可以创建一个定时器来自动切换图片，并添加点击事件来允许用户手动切换。以下是一个基本的实现： ```javascript let ...
scss概念及使用
m0_74293254的博客
07-10 1119
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2524
title>充电效果
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1219
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 15
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
05.CSS 缓动变量 && 首字下沉 & 放大缩小动画
粉丝们务必加入微信粉丝群
07-14 18
我们可以轻松定义自定义缓动变量,帮助我们的设计脱颖而出。事实上,上面提到的内置函数也可以使用。虽然这些函数适合日常使用,但还有一个功能更强大但令人生畏的选项可用,即。首字下沉，让第一段的第一个字母比其余文本大。在设计中,大多数 Web 开发人员对于。创建一个放大缩小的动画效果。的大多数用例使用内置的。
scss 语法
最新发布
True Truth
07-14 76
scss 是 css 的超集， 主要是引入了 变量， 函数， 继承， 算术计算。
CSS关于居中的问题
热爱WebGIS的博客
07-10 663
由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。我们可以用百分比来表示，子元素相对父元素移动 50%的距离后，再根据子元素的外边距进行调整。值是写死的，如果 son 的宽度发生改变，子元素也无法水平居中。是写死的，如果父元素的宽度发生改变，子元素就无法水平居中了。子绝父相，子元素设置以下属性，也能进行水平垂直居中。子元素 y 轴移动的距离是父子元素高度差的一半，子元素 x 轴移动的距离是父子元素宽度差的一半。子元素相对父元素移动 50%的距离后，使用。
如何在CSS中控制动画的触发位置？
xixixixixixixi21的博客
07-14 167
在CSS中控制动画的触发位置主要是通过transform属性来实现的。例如，如果你希望动画从某个固定的位置开始，可以设置transform: translate(x, y)，其中x和y是你想让元素偏离其原始位置的距离。通常表示元素静止在原位；可以百分比定位，比如translate(50%, 0)会让元素居中；直接用像素值指定距离。例如，如果你想让一个元素在页面加载时从左侧滑入，可以设置transform:然后配合transition或animation来创建滑动效果。
CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效
uu0216的博客
07-09 907
content:attr(alt); 通过attr函数 获取本标签的alt值，之所以要这么做，是因为after生成的填充色的图层，会覆盖到按钮上面，导致按钮上写的文字不可见。所以，我们要通过content来输出按钮上的文字。这样写，也是为了让样式和内容脱离。这样我们在html的代码上，给 button 控件写上 alt文字，就可以通过css获取这个文字并输出了。这样，也方便后台程序通过程序动态修改 alt标签输出 的文字，达到修改按钮文字的目标，而不需要去手动修改css文件中的文字。
CSS上下悬浮特效
m0_56164131的博客
07-09 545
要实现一个上下悬浮的特效，可以使用CSS的@keyframes规则和动画属性。
html实现轮播图效果
09-21
HTML实现轮播图效果可以通过使用CSS的animation动画属性来实现。首先，需要设置一个轮播盒子（box），用来包裹轮播内容。然后，在轮播盒子内部，放置多个轮播元素（box1）。每个轮播元素都是一个div元素，并设置其...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值