html 简单轮播图

最新推荐文章于 2023-09-20 16:35:19 发布
最新推荐文章于 2023-09-20 16:35:19 发布
阅读量429 收藏 2
点赞数
文章标签： html jquery css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a172108045/article/details/113445540
版权

手撸的简单轮播图，界面虽然丑了，但还实用~！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

    <style>

        *{margin: 0px; padding: 0px;}

        .div{

            width: 400px;

            height: 280px;

            margin-top: 130px;

            margin-left: 240px;

            float: top;

            position: relative;

        }

        img{

            width: 400px;

            height: 260px;

            margin-left: 240px;

            float: left;

        }

        .left{

            width: 25px;

            height: 25px;

            background-color: coral;

            text-align: center;

            padding-top: 5px;

            margin-top: 110px;

            position:absolute;

        }

        .right{

            width: 25px;

            height: 25px;

            background-color: blue;

            text-align: center;

            padding-top: 5px;

            margin-top: 110px;

            margin-left: 375px;

            position:absolute;

        }

        .btn{

            height: 20px;

            margin-top: 235px;

            margin-left: 15px;

            position:absolute;

        }

        .point{

            width: 8px;

            height: 8px;

            background-color: darkblue;

            float: left;

            margin-top: 5px;

            margin-left: 5px;

            border: 0.5px solid white;   

            border-radius:8px;

        }

        .pointSel{

            width: 8px;

            height: 8px;

            background-color: white;

            float: left;

            margin-top: 5px;

            margin-left: 5px;

            border: 0.5px solid white;   

            border-radius:8px;

        }

    </style>

</head>

<body>

    

    <img src="./images/11.jpg">

    <div class="div">

        <div class="left"></div>

        <div class="right"></div>

        <div class="btn">

            <!-- <div class="point"></div>

            <div class="point"></div>

            <div class="point"></div> -->

        </div>

    </div>

</body>

<script src="./jquery-3.5.0.min.js"></script>

<script>

    $(function(){

        //当前图片下标

        var slideindex = 0;

        //定时器

        var timer;

        //初始化图片数据

        var imgs = ['./images/11.jpg',

        './images/22.jpg',

        './images/33.jpg',

        './images/44.jpg'];

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

            if(i==0){

                $("<div></div>").appendTo("div.btn").addClass("pointSel");

            }else{

                $("<div></div>").appendTo("div.btn").addClass("point");

            }

          

        }

 

        //自动轮播和并开启or停止定时器

       function autoplay() { //创建设置定时器的方法

        timer = setInterval(function() {

            //移除当前下标的index选择样式

            $(".btn>div").eq(slideindex).removeClass("pointSel")

            //添加非选择样式

            $(".btn>div").eq(slideindex).addClass("point");

            slideindex++; //index递增

             if (slideindex === 4) slideindex = 0; //设置循环

             //添加选择样式，

            $(".btn>div").eq(slideindex).addClass("pointSel");

            //显示当前下标图片

            $("img").attr('src',imgs[slideindex]);

            console.log("当前下标："+slideindex);

           }, 3000)

       }

       //调用函数，开启定时器

        autoplay(); 

       //鼠标事件

       $(".div").hover(function(){

           //鼠标进入停止定时器

          clearInterval(timer); 

       },function(){

           //鼠标移出开始轮播

          autoplay(); 

       });

        //设置左边按钮点击事件

       $(".left").click(function() {

           //移除当前下标的index选择样式

           $(".btn>div").eq(slideindex).removeClass("pointSel")

           //添加非选择样式

           $(".btn>div").eq(slideindex).addClass("point");

           slideindex--;

           if (slideindex === -1) slideindex = imgs.length-1;

           //添加选择样式，

           $(".btn>div").eq(slideindex).addClass("pointSel");

           //显示当前下标图片

           $("img").attr('src',imgs[slideindex]);

     });

     //设置右边按钮点击事件

     $(".right").click(function() {

         //移除当前下标的index选择样式

         $(".btn>div").eq(slideindex).removeClass("pointSel")

         //添加非选择样式

         $(".btn>div").eq(slideindex).addClass("point");

         slideindex++;

         if (slideindex === imgs.length) slideindex = 0;

        //添加选择样式，

        $(".btn>div").eq(slideindex).addClass("pointSel");

        //显示当前下标图片

        $("img").attr('src',imgs[slideindex]);

     });

     //绑定所有圆点下边点击事件

     $('.btn div').click(function() {

        var pos = $(this).index();

         console.log("下标点击了:"+pos);

         if(slideindex!=pos){

            //移除当前下标的index选择样式

            $(".btn>div").eq(slideindex).removeClass("pointSel")

            //添加非选择样式

            $(".btn>div").eq(slideindex).addClass("point");

            slideindex = pos;

            //添加选择样式，

            $(".btn>div").eq(slideindex).addClass("pointSel");

            //显示当前下标图片

            $("img").attr('src',imgs[slideindex]);

         }

     });

    });

   

</script>

</html>

鼠标移入 停止轮播，鼠标移出自动轮播，左右按钮可以切换，点击小圆点可以切换。

 

 

 

音符跳跃思念每天
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个很简单的轮播图.html
11-15
初学者
HTML简单实现轮播图
热门推荐
qq_45225221的博客
01-09 9万+
html + js 简单实现轮播图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/82ed6054639544ae93ff737ecca71d49.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGltYWtyaW3kuLY=,size_20,color_FFFFFF,t_70,g_se,x_16 附上代码： <!DOCTYPE html> <ht
简单的HTML网页图片轮播自动切换
qq_51727668的博客
10-10 6万+
简单的HTML网页图片轮播切换[代码注释详解]效果展示1.必须的html元素2.css代码3.JavaScript代码4.思路总结觉得有帮助点个赞吧 效果展示 具体解释请参考代码中的注释! 总共展示5张图片，图片中间下方5个点的代表展示顺序。（如图可知播放到第二张图片） 图片左右两边的箭头上一张和下一张！ 1.必须的html元素 <!doctype html> <html> <head> <meta charset="utf-8"> <title&gt
css学习：轮播图
m0_56424512的博客
11-29 1550
css学习
学过html都会的html轮播图
Turing158的博客
03-25 7112
教你如何创建轮播图 JavaScript方法 bootstrap方法
html轮播图
jakelihua
11-04 2万+
简介：本博客以最通俗移动的详细代码，告诉用户如何用html构建轮播图。 第二步：CSS渲染 第三步：JS逻辑 运行结果：
Html简单图片轮播效果
11-13
Html简单图片轮播效果
html好看的图片轮播多种风格（源码）
10-17
多种轮播效果图，支持配置，可以自动切换，鼠标拖动，角标按钮切换，不一样的切换效果，可以直接嵌入项目使用，简单灵活。 示例地址：https://blog.csdn.net/weixin_43151418/article/details/125842089
HTML5课程轮播图的学习
01-28
跟我一样的小白
js简单图片轮播切换.zip
11-24
js简单图片轮播切换.zip
html------轮播图
bulbboy的博客
07-12 3万+
  1.先分块并加入图片 2.用ul和li标签实现轮播图中的小圆点 float:left;  让li标签横着排列 list-style:none;  去除小圆点 border-radius:10px;  圆形边框 line-height:2px; text-align:center;   左右上下居中 3.将小圆点移动到图片的右下角 需要用到绝对定位（absolute）...
网页轮播图制作（html+css+js）
qq_53767416的博客
10-03 2万+
运用html+css+js实现网络轮播图效果
HTML图片轮播
m0_45329584的博客
03-14 3万+
一、简介： 之前我也写过图片轮播的 文章，写的不是很详细只有效果图片展示及相应的代码展示，而且js代码也写得很乱。这一次我又重新学习了一遍图片轮播，并对它进行了代码整理让你们更容易理解 二、文件目录： 三、图片素材： 四、图片轮播得二种方式： 第一种： 使用background: url()设置标签背景的方式，通过js对css样式进行修改实现图片轮播 <!DOCTYPE htm...
用html写轮播图
wenqi1的博客
08-28 2万+
先放代码和效果图再讲解 <!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title>轮播图</title> <style> #pp2{ width:9999px; height:9999px; animation:switch 15s infinite; } #pp2>img{ float:
记录：完整版轮播图
05-14 895
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&...
轮播图 原生代码（HTML+CSS+JQuery）
qq_69635978的博客
03-29 4634
【代码】轮播图 原生代码（HTML+CSS+JQuery）
HTML——轮播图
weixin_45951601的博客
12-16 1万+
轮播图 一、 首先制作轮播图需要几个元素，图片（大小最好一致）、焦点（这个可以自己写）、左右箭头的按钮 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<link rel="stylesheet" type="text/css" href="styles.css">--
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
未休的博客
02-18 3万+
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
HTML自动轮播图
入门小编程
09-20 3242
【代码】HTML自动轮播图。
html实现简单轮播图
最新发布
01-03
以下是一个使用HTML和CSS实现简单轮播图的例子： ```html <!DOCTYPE html> <html lang="zh-CN"> .slideshow { width: 400px; height: 300px; overflow: hidden; position: relative; } .slideshow ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值