HTML+css+jQuery轮播图修改思路以及过程

已于 2022-10-10 16:27:03 修改
阅读量389 收藏 3
点赞数 1
分类专栏： 入门 前端 文章标签： jquery html css
于 2022-10-08 14:34:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_49765699/article/details/127207534
版权

本来按照B站上的视频教程敲了一遍，视频链接：【【前端研究所】前端开发教程-jQuery特效案例精讲- jquery常用焦点轮播图】 https://www.bilibili.com/video/BV1Dt411B72y?share_source=copy_web&vd_source=ecb2eb0190c26c9a8538d087481562ec

敲出来的效果如下

视频中的JS代码

    <script>
        $(function(){
            //arryImgs[ times ] 
            var arryImgs = new Array(
                "img/1.png",
                "img/2.png",
                "img/3.png",    
                "img/4.png",
                "img/5.png"
            ); 
            var times = 1;
            function changeImage(){
                if(times==6){
                    times=1;
                }
                $(".btn a").removeClass("active");
                $(".btn a:nth-child("+times+")").addClass("active");
                $(".imgs img").attr("src",arryImgs[times-1]);
                times++;
            }
            var interval = window.setInterval(function(){
                changeImage();
            },2000);
            $(".btn a").each(function(index){
                $(this).hover(function(){
                    $(".btn a").removeClass("active");
                    $(this).addClass("active");
                    clearInterval(interval);
                    $(".imgs img").attr("src",arryImgs[index]);
                    times=index+1;
                },function(){
                    interval = window.setInterval(function(){
                        changeImage();
                    },1000)
                })
            })
            console.log(times);
            
        })
    </script>

敲完后想要添加上一页 下一页的切换按钮，并将视频中下方缩略图:hover属性改为jQuery的click切换。

我根据自己思路将JS部分代码重新编写了

最终效果

开始的HTML部分比较简单

<div class="slider">
        <!-- 大图 -->
        <div class="imgs">
            <a href="#">
                <img src="img/1.png" width="800" height="500">
            </a>
        </div>
        <!-- 缩略图 -->
        <div class="btn">
            <div id="1" class="xuanzhong"><img src="img/1.png" width="80" height="50"></div>
            <div id="2" class="#"><img src="img/2.png" width="80" height="50"></div>
            <div id="3" class="#"><img src="img/3.png" width="80" height="50"></div>
            <div id="4" class="#"><img src="img/4.png" width="80" height="50"></div>
            <div id="5" class="#"><img src="img/5.png" width="80" height="50"></div>
        </div>
        <div class="prve">◀</div>
        <div class="next">▶</div>
    </div>

css部分  可以自行修改

*{
    margin: 0;
    padding: 0;
}
.sloder{
    height: 500px;
    border-bottom: 1px solid #666;
    box-shadow: 3px 4px #333;
}
.btn{
    position: absolute;
    display: flex;
    width: 80px;
    height: 50px;
    margin-top: -70px;
    margin-left: 60px;
    align-items: center;
}
.btn div{
    height: 50px;
    margin: 10px;
    padding: 2px;
    border: 3px solid #999;
    float: left;
}
div.xuanzhong{
    border-color: rgb(200, 84, 235);
}
.prve{
    background-color: rgb(255, 255, 255, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 40px;
    position: absolute;
    margin-top: -280px;
    cursor: pointer;
}
.next{
    background-color: rgb(255, 255, 255, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 40px;
    position: absolute;
    cursor: pointer;
    margin-top: -280px;
    margin-left: 759px;
}

JS部分代码

我的思路是   无论是自动切换还是点击缩略图或者左右两个切换按钮，都将其转换为i的变换，将操作后的 i 传入切换代码，每进行一次操作，都将产生的 i 放入函数中运行，来达到转换图片的效果

$(function(){
            //arryImgs[ times ] 将图片地址存入数组中
            var arryImgs = new Array(
                "img/1.png",
                "img/2.png",
                "img/3.png",    
                "img/4.png",
                "img/5.png"
            ); 
            // 大图切换函数
            function qiehuan(num){
                $(".imgs img").attr("src",arryImgs[num-1]);
            }
            //缩略图切换
            function xqiehuan(num) {
                $(".btn div").each(function(index){
                        $(".btn div").removeClass("xuanzhong");
                    })
            $(".btn div:nth-child("+i+")").addClass("xuanzhong");
            }
            
            $(".btn div").each(function(index){
                        $(".btn div").removeClass("xuanzhong");
                    })
            //点击缩略图函数
            dianji();
            var i =0;
            function dianji(){
                
                $(".btn div").click(function() {
                    $(".btn div").each(function(index){
                        $(".btn div").removeClass("xuanzhong");
                    })
                    $(this).addClass("xuanzhong")
                    i = $(this).attr("id");
                    console.log(i);
                    qiehuan($(this).attr("id"));
            })
        }
        
        //自动切换
        function run(){
            if(i<5){
                    i++
                }else{
                    i=1;
                }
                qiehuan(i);
                xqiehuan(i);
        }
        var interval = window.setInterval(function(){
                run()
            },2000);
        // 上一页
        $(".prve").click(function(){
            if(i<1){
                i=4;
            }else{
                i--
            }
            console.log(i);
            run();
            i--;
        })
        // 下一页
        $(".next").click(function(){
            if(i>4){
                i=0;
            }else{
                i++
            }
            console.log(i);
            run();
            i--;
        })
            //鼠标移入关闭定时器
            $('.slider').mouseover(function() {
                    clearInterval(interval);
                })
            //鼠标离开继续定时器
            $('.slider').mouseout(function() {
                clearInterval(interval); //定时器先清后开
                interval = setInterval(function() {
                    run();
                }, 2000);
            })
        })

总的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
        margin: 0;
    padding: 0;
}
.sloder{
    height: 500px;
    border-bottom: 1px solid #666;
    box-shadow: 3px 4px #333;
}
.btn{
    position: absolute;
    display: flex;
    width: 80px;
    height: 50px;
    margin-top: -70px;
    margin-left: 60px;
    align-items: center;
}
.btn div{
    height: 50px;
    margin: 10px;
    padding: 2px;
    border: 3px solid #999;
    float: left;
}
div.xuanzhong{
    border-color: rgb(200, 84, 235);
}
.prve{
    background-color: rgb(255, 255, 255, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 40px;
    position: absolute;
    margin-top: -280px;
    cursor: pointer;
}
.next{
    background-color: rgb(255, 255, 255, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 40px;
    position: absolute;
    cursor: pointer;
    margin-top: -280px;
    margin-left: 759px;
}
    </style>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
    <div class="slider">
        <!-- 大图 -->
        <div class="imgs">
            <a href="#">
                <img src="img/1.png" width="800" height="500">
            </a>
        </div>
        <!-- 缩略图 -->
        <div class="btn">
            <div id="1" class="xuanzhong"><img src="img/1.png" width="80" height="50"></div>
            <div id="2" class="#"><img src="img/2.png" width="80" height="50"></div>
            <div id="3" class="#"><img src="img/3.png" width="80" height="50"></div>
            <div id="4" class="#"><img src="img/4.png" width="80" height="50"></div>
            <div id="5" class="#"><img src="img/5.png" width="80" height="50"></div>
        </div>
        <div class="prve">◀</div>
        <div class="next">▶</div>
    </div>
    <script>
        $(function(){
            //arryImgs[ times ] 
            var arryImgs = new Array(
                "img/1.png",
                "img/2.png",
                "img/3.png",    
                "img/4.png",
                "img/5.png"
            ); 
            // 大图切换
            function qiehuan(num){
                $(".imgs img").attr("src",arryImgs[num-1]);
            }
            //缩略图切换
            function xqiehuan(num) {
                $(".btn div").each(function(index){
                        $(".btn div").removeClass("xuanzhong");
                    })
            $(".btn div:nth-child("+i+")").addClass("xuanzhong");

            }
            
            $(".btn div").each(function(index){
                        $(".btn div").removeClass("xuanzhong");
                    })
            //点击缩略图函数
            dianji();
            var i =0;
            function dianji(){
                
                $(".btn div").click(function() {
                    $(".btn div").each(function(index){
                        $(".btn div").removeClass("xuanzhong");
                    })
                    $(this).addClass("xuanzhong")
                    i = $(this).attr("id");
                    console.log(i);
                    qiehuan($(this).attr("id"));
            })
        }
        
        //自动切换
        function run(){
            if(i<5){
                    i++
                }else{
                    i=1;
                }
                qiehuan(i);
                xqiehuan(i);
        }
        var interval = window.setInterval(function(){
                run()
            },2000);
        // 上一页
        $(".prve").click(function(){
            if(i<1){
                i=4;
            }else{
                i--
            }
            console.log(i);
            run();
            i--;
        })
        // 下一页
        $(".next").click(function(){
            if(i>4){
                i=0;
            }else{
                i++
            }
            console.log(i);
            run();
            i--;
        })
            //鼠标移入关闭定时器
            $('.slider').mouseover(function() {
                    clearInterval(interval);
                })
            //鼠标离开继续定时器
            $('.slider').mouseout(function() {
                clearInterval(interval); //定时器先清后开
                interval = setInterval(function() {
                    run();
                }, 2000);
            })
        })
        
    </script>
</body>
</html>

基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城
网页设计与制作 | HTML+CSS+JS
05-23 992
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
jQuery+css 流程图插件
10-27
jquery+css 实现的单分支流程图插件。提供常用事件监听
纯html+css+jq实现流程图
HuangsTing的博客
10-12 4594
效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流程图</title> <script src="../assets/lib/jQuery.js"></script> <...
用HTML+CSS+jquery横向动态平滑移动轮播切换效果
最新发布
weixin_44161225的博客
09-18 473
【代码】用HTML+CSS+jquery横向动态平滑移动轮播切换效果。
HTML+CSS+JQuery实现轮播图
qq_22317389的博客
05-17 752
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
前端修改轮播图
samgreat911的博客
12-03 180
对轮播图进行修改
html+css+js漂亮的个人主页
06-09
JavaScript会根据用户的选择更改body或特定元素的CSS类，从而改变背景样式。 5. **响应式设计**：为了适应不同设备的屏幕尺寸，个人主页应该采用响应式设计。这可以通过CSS的媒体查询@media实现，确保在手机、平板...
jQuery实现的自定义轮播图功能详解
10-17
jQuery实现的自定义轮播图是一种常见的网页动态效果，用于展示多张图片或内容，通常用于首页或者产品展示页面。相较于使用第三方轮播插件，自定义轮播图有以下几个优势： 1. **功能全面**：可以根据需求定制各种...
jQuery+CSS3实现3D立方体旋转效果
10-23
整个3D立方体的实现思路是利用CSS3的3D变换属性创建视觉效果，结合JavaScript（在这个例子中是jQuery）来动态控制效果，如触发旋转和切换图片。通过理解并使用这些CSS3和jQuery的功能，开发者可以创建出既美观又互动...
使用JS+CSS创建图片轮播效果
这是一个基本的图片轮换实现思路，具体实现可能需要根据实际需求进行调整，例如添加动画效果、添加导航箭头等交互元素，或者使用现有的库如jQuery的`.fadeIn()`和`.fadeOut()`方法来简化代码。 通过理解这个基本...
html修改轮播高度,15行css,15行js教你实现html自动轮播！无敌简单！（个人总结）...
weixin_42457435的博客
06-03 668
关于原生js实现html的轮播网上有很多很多，但大都写的太长太多，然后就懒得看了，最后还是决定自己去摸索js写的轮播，这样理解记忆也能更深刻。这里本人总结出的自动轮播方法十分简单，效果也很不错。代码总共就这么多：以三张图片为例(均为1920 x 360)，我们首先把静态写好。放图片主要分为3个div一个是轮播的总框架，如图为 lunboFrame ，主要是定一个总框架，css如下：其实这个不要...
html中轮播图中图片样式如何调,纯CSS3做轮播图基础样式设置
weixin_30908131的博客
06-04 539
一，准备工作轮播图的主要遇新是直朋能到分览思想：1，让友，记基开前不接些前家我告对猿果水使钮控轮播的几张图片横向连成一片，默认是从上到下(如果图片像朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到随素比较大)；2，html遇新是直朋能到分览代码： 可以看到轮播接愿目的那前机专容图缩近...
五分钟了解前端基础(HTML/CSS/JavaScript/jQuery)
Li_Jian_Hui_的博客
07-29 1810
我觉得前端是一个很有意思的东西,它可以让我们直观的看到效果,如果我们的脑洞足够大,它做成我们想要的样子,这里想跟大家分享一下自己的个人理解 前端是什么? 首先,我画了一幅巨丑的图: 灵魂画手~~ 上图就是我对前端的一个基础的认知,前端就像一个人 它有基本的结构,就是html 这个人有红头发,就是CSS 它会说话,唱歌,就是JavaScript 而每次说话都要先张嘴,说话,这样重复的东西被封装起来,就是jQuery 如果这个人想要接收别人告诉它的信息就是ajax 它要听得懂这个消息就会用一个固定的数据格式
jQuery满屏图片切换轮播插件带缩略图
ICode联盟
02-28 311
下载地址 一款满屏左右滚动，带左右按钮，带缩略图，支持自动轮播的焦点图代码。 dd:
【HTML+CSS+jQuery】实现轮播图详细代码及详解（带左右切换和分页）
TechnicalXiaobai的博客
07-16 3529
创建了图片对应的圆点导航按钮，并为每个按钮绑定了点击事件，点击按钮时通过。事件来在鼠标悬停在轮播容器上时停止自动轮播，离开时重新开始自动轮播。方法，在图片列表的首尾分别插入了复制的图片，实现无缝轮播的效果。创建了左右切换按钮，并为其绑定了点击事件，通过点击按钮来切换图片。实现自动轮播功能，每隔3000毫秒（3秒）切换到下一张图片。函数来处理图片的动画滑动，实现了无缝轮播的效果。函数来切换图片，并高亮显示对应的按钮。来实现左右切换和图片对应的圆点导航。容器来包裹轮播图片，使用。在图片初始化时，使用了。
Jquery版轮播图超详细
周百万的博客
09-15 4119
主要功能介绍： 鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
热门推荐
未休的博客
02-18 3万+
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
html+css+jquery制作图片展示效果
小言同学的博客
12-28 5809
一、题目 在页面中有四幅小图片和一个图片展示区域，当鼠标移入某幅小图片时，在图片展示区域可看到其对应的大图。为凸显当前的小图状态，把其它三幅小图透明度设为0.2，如图所示： 二、设计思路及步骤 1.首先设计页面HTML结构，应用CSS样式。 2.为四幅小图片绑定鼠标移入事件。 3.获取当前发生鼠标移入事件的小图片的src属性，将其作为大图的src属性值。这样大图也就随之改变了。 4.为凸显当前的小图状态，改变其余图片的透明度。如：把其它三幅小图透明度设为0.2。 三、代码实现 1、图片
html css+js实现轮播图制作 以及图片下方的文字描述部分一同轮播 可 自动切换 手动切换
LL__Sunny的博客
12-04 1万+
html css+js实现轮播图制作 以及图片下方的文字描述部分一同轮播 可 自动切换 手动切换 效果图是对5张图片进行轮播的，点击左右箭头可以实现手动切换！ 鼠标悬停在画面上时会停止轮播，已开后继续播放！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冥王丁B

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值