jq动画效果(图片左右大小切换，轮播)

最新推荐文章于 2024-06-13 21:16:17 发布

疏疏密密

最新推荐文章于 2024-06-13 21:16:17 发布

阅读量692

点赞数

本文链接：https://blog.csdn.net/user_last/article/details/108927898

版权

该博客介绍了如何使用jQuery创建一个图片轮播效果，图片在隐藏部分向另一侧移动，当图片从左侧隐藏时向右切换，并在鼠标悬停时显示大图。

摘要由CSDN通过智能技术生成

图片左右移动，移动距离为图片现在显示的大小，移动方向为图片隐藏部分的方向，图片在左隐藏时向右切换先把图片位置移动到最左边
在这里插入图片描述

轮播图
在这里插入图片描述

   var lang=$(".num>li").length;
   var index=0;
   var adtimer;
   $(".num li:first").addClass("on");//从1开始
   $(".num li").mousemove(function(){
    index=$(".num li").index(this);
    showImg(index);//显示鼠标选中图片
   });
   $(".ad").hover(function(){
    clearInterval(adtimer);
   },function(){
    adtimer=setInterval(function(){
     index++;
     if(index==lang){
      index=0;
     }
     showImg(index);
    },2000);
   }).trigger("mouseout");//鼠标移出重启计时器
 //})

鼠标放上切换大图片地址使其显示大图
在这里插入图片描述