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

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

一、轮播图片

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"