Html之实例练习（轮播图片、放大镜效果、面板拖动）

朴灿烈づ我的快乐病毒、 2023-02-10 03:47 14阅读 0赞

### 文章目录 ###

*   *   *   *  一、轮播图片
             *  二、放大镜效果
             *  三、面板拖动

本篇将简单演示一下HTML里的轮播图片、放大镜效果和面板拖动的实例，代码已经打包在文章开头，需要参考的请自行下载

#### 一、轮播图片 ####

**1、效果图**  
![1][]  
**2、JS核心部分**

<script>
        //用一个全局变量，来保存当前轮播到图片（圆点）的索引
        var i=0;
    
    
    //通过jquery自动创建按钮标签
        var img_num=$(".img li").length;  //获取图片数量
    
        //循环将每一个小圆圈加到ul里面
        for(var j=0;j<img_num;j++){ 
            $(".num").append("<li></li>")
        }
    
        //初始状态是红色的圆圈设置为第一个
        $(".num li").eq(0).addClass("active");
    
    
    
    // 手动轮播：点击小圆点切换到对应的图片
        $(".num li").mouseover(function () { 
            //获取当前圆点的索引，同时也就是图片对应的索引
            i=$(this).index();
    
            //将鼠标当前悬浮的那一个圆点添加变红（active），然后将非当前的圆点去除变红
            $(this).addClass("active").siblings().removeClass("active");
    
            //将鼠标悬浮圆点对应的图片，停止其他动画只留渐入动画；同时将非圆点对应的其他图片，停止其他动画，只留渐出动画
            $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)
    
        });
    
    
    // 自动轮播：一个1.5秒执行一次的函数
        var c=setInterval(GO_R,1500);  //添加一个计时器
    
        //切换到上一张图片
        function GO_R() { 
            //如果切换到了最后一张，则回到第一张（-1）
            if(i==img_num-1){ 
                i=-1
            }
             i++;  //循环变量i
            //轮播到的当前图片对应的小圆点添加变红，非该圆点去除变红（白色）
             $(".num li").eq(i).addClass("active").siblings().removeClass("active");
             //轮播到的图片以渐入的动画出现，非该图片以渐出的动画隐藏
             $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
    
        }
    
    
        //切换到下一张图片
        function GO_L() { 
            //如果切换到了第一张，就跳到最后一张去
            if(i==0){ 
                i=img_num
            }
             i--;
             $(".num li").eq(i).addClass("active").siblings().removeClass("active");
             $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
    
    
        }
    
        //当鼠标悬浮在图片上时，就不切换，即暂停计时器
        $(".outer").hover(function () { 
            clearInterval(c)  //清除间隔（计时器），暂停计时
        },function () { 
            c=setInterval(GO_R,1500)  //设置计时器，开始计时
        });
        
    // button加定播 ：让上下翻页按钮与圆点、图片的索引对应起来
    //简单来说就是，每隔1.5秒走一次，就和按一次按钮是一样的
        $(".left").click(GO_R);
        $(".right").click(GO_L)
    
    
    </script>

#### 二、放大镜效果 ####

**1、效果图**  
![2][]  
**2、JS核心部分**

<script src="jquery-3.4.1.js"></script>
    <script>
    
        $(function(){ 
    
              $(".small_box").mouseover(function(){ 
    
                  $(".float").css("display","block");
                  $(".big_box").css("display","block")
    
              });
              $(".small_box").mouseout(function(){ 
    
                  $(".float").css("display","none");
                  $(".big_box").css("display","none")
    
              });
    
              $(".small_box").mousemove(function(e){ 
    
                  var _event=e || window.event;
    
                  var float_width=$(".float").width();
                  var float_height=$(".float").height();
    
                  console.log(float_height,float_width);
    
                  var float_height_half=float_height/2;
                  var float_width_half=float_width/2;
                  console.log(float_height_half,float_width_half);
    
    
                   var small_box_width=$(".small_box").height();
                   var small_box_height=$(".small_box").width();
    
    
    
    // 鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理
                  var mouse_left=_event.clientX-float_width_half;
                  var mouse_top=_event.clientY-float_height_half;
    
                  if(mouse_left<0){ 
                      mouse_left=0
                  }else if (mouse_left>small_box_width-float_width){ 
                      mouse_left=small_box_width-float_width
                  }
    
    
                  if(mouse_top<0){ 
                      mouse_top=0
                  }else if (mouse_top>small_box_height-float_height){ 
                      mouse_top=small_box_height-float_height
                  }
    
                   $(".float").css("left",mouse_left+"px");
                   $(".float").css("top",mouse_top+"px")
    
                   var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);
                   var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);
    
                  console.log(percentX,percentY)
    
                   $(".big_box img").css("left", -percentX*mouse_left+"px")
                   $(".big_box img").css("top", -percentY*mouse_top+"px")
              })
        })
    
    
    </script>

#### 三、面板拖动 ####

**1、效果图**  
![3][]  
**2、JS核心部分**

<script type="text/javascript" src="jquery-3.4.1.js"></script>
    <script>
        $(function(){ 
            // 页面加载完成之后自动执行
            $('#title').mouseover(function(){ 
                $(this).css('cursor','move');
            }).mousedown(function(e){ 
                //console.log($(this).offset());
                var _event = e || window.event;
                // 获得原始鼠标横纵坐标位置
                var ord_x = _event.clientX;
                var ord_y = _event.clientY;
    
                //获取位置偏移量
                var parent_left = $(this).parent().offset().left;
                var parent_top = $(this).parent().offset().top;
    
                //绑定跟随鼠标移动事件的函数
                $(this).bind('mousemove', function(e){ 
                    var _new_event = e || window.event;
    
                    var new_x = _new_event.clientX;
                    var new_y = _new_event.clientY;
    
                    //计算应该移动到的位置
                    var x = parent_left + (new_x - ord_x);
                    var y = parent_top + (new_y - ord_y);
    
                    //窗口移动
                    $(this).parent().css('left',x+'px');
                    $(this).parent().css('top',y+'px');
    
                })
            }).mouseup(function(){   //鼠标松开就解除跟随鼠标绑的事件
                $(this).unbind('mousemove');
            });
        })
    </script>

就这样一个框，可用鼠标来拖动它，这在web前端设计中的非常常见的，比如一些登陆界面和特殊的手势都可以这样来实现

[1]: https://img-blog.csdnimg.cn/20200519213726163.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1ZpZXdpbmZpbml0ZWx5,size_16,color_FFFFFF,t_70
[2]: https://img-blog.csdnimg.cn/20200519213820524.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1ZpZXdpbmZpbml0ZWx5,size_16,color_FFFFFF,t_70
[3]: https://img-blog.csdnimg.cn/20200519214349627.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1ZpZXdpbmZpbml0ZWx5,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 Html之实例练习（轮播图片、放大镜效果、面板拖动）

文章目录一、轮播图片二、放大镜效果三、面板拖动本篇将简单演示一下HTM

朴灿烈づ我的快乐病毒、/ 2023年02月10日 03:47/ 0 赞/ 15 阅读

相关 php js轮播图片代码,js图片轮播手动切换效果实例代码

这篇文章主要为大家详细介绍了js图片轮播手动切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下利用ScrollPicLeft.js这个库实现图片的前后切换，适用于网

- 日理万妓/ 2022年11月18日 05:53/ 0 赞/ 295 阅读

相关 html 图片轮播实例,简单实现轮播图效果的实例

一、要点： 1.页面加载时，图片重合，叠在一起\[绝对定位\]; 2.第一张显示，其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去，显示

- 日理万妓/ 2022年10月06日 07:56/ 0 赞/ 294 阅读

相关 html图片轮播效果加链接,HTML首页怎么加图片轮播？

可以通过输入代码来操作。这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进，先来贴一发代码： ![s1.jpg][] ![s2.jpg][s1.jp

痛定思痛。/ 2022年10月06日 07:53/ 0 赞/ 233 阅读

相关 html原生js实现图片轮播,原生JS实现图片轮播切换效果

原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果，

比眉伴天荒/ 2022年10月06日 07:52/ 0 赞/ 373 阅读

相关 html网页简单实现图片轮播效果,html+css+js简单实现图片轮播效果

\\{background-color:green;\} \lunbo\{ width:600px; height:600px;position:relative;left:

ゞ浴缸里的玫瑰/ 2022年10月06日 07:49/ 0 赞/ 357 阅读

相关 HTML+CSS+JQ实现图片轮播效果

焦点图广泛运用于主页的醒目位置放置广告，简单好用，加上效果也很好看。实现的效果： 5张图片每两秒轮播一次，右下角的数字随图片而变换，鼠标放在数字上图片停止，移走

灰太狼/ 2022年09月25日 02:30/ 0 赞/ 271 阅读

相关 ios图片轮播效果

> 代码地址如下： > [http://www.demodashi.com/demo/11959.html][http_www.demodashi.com_demo_119

一时失言乱红尘/ 2022年05月29日 00:20/ 0 赞/ 298 阅读

相关 JS原生之图片轮播效果

见解请评论 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

绝地灬酷狼/ 2022年03月30日 09:58/ 0 赞/ 307 阅读

相关 HTML中图片轮播效果

这是一段简单的Html网页中嵌入的图片轮回播放的js源代码，为增添Html一点效果：代码： <!doctype html> <html> <he

左手的ㄟ右手/ 2021年10月24日 00:31/ 0 赞/ 435 阅读