jQuery实现各种轮播图

article/2025/10/19 0:29:07

目录

                无限循环滚动

百叶窗

轮播一

轮播二

 轮播三

 

无限循环滚动

        * {margin: 0;padding: 0;}div {width: 1120px;height: 300px;border: 1px solid #000;margin: 100px auto;overflow: hidden;}ul {list-style: none;width: 3360px;height: 300px;background: #000;/* background: rgba(255, 0, 0, .5); */}ul>li {float: left;}
    <div><ul><li><img src="img/0.jpg" alt=""></li><li><img src="img/1.jpg" alt=""></li><li><img src="img/2.jpg" alt=""></li><li><img src="img/3.jpg" alt=""></li><li><img src="img/0.jpg" alt=""></li><li><img src="img/1.jpg" alt=""></li></ul></div>
        $(function() {//0.定义变量，保存偏移位let offset = 0;//1.让图片滚动起来let timer = null;function autoPlay() {timer = setInterval(function() {offset += -10;if (offset <= -2240) {offset = 0;}$("ul").css("marginLeft", offset);}, 50);}autoPlay();//2.监听li移入和移出事件$("li").hover(function() {//停止滚动clearInterval(timer);//给非当前选中添加蒙版$(this).siblings().fadeTo(100, 0.5);//去除当前选中的蒙版$(this).fadeTo(100, 1);}, function() {//继续滚动autoPlay();//去除所有蒙版$("li").fadeTo(100, 1);});});

百叶窗

<script src="js/jquery-1.12.3.min.js"></script><style>* {margin: 0;padding: 0}.container {width: 800px;height: 300px;margin: 80px auto;position: relative;border: 1px solid;/* 溢出部分隐藏 */overflow: hidden;}.container ul {list-style: none}.container li {position: absolute}.cover {/*制作遮罩层 *//* width: 560px; 或*/width: 100%;height: 300px;background: rgba(0, 0, 0, .5);position: absolute}.li1 {left: 160px;}.li2 {left: 320px;}.li3 {left: 480px;}.li4 {left: 640px;}</style>
<div class="container"><ul><li class="li0"><div class="cover"></div><img src="img/0.jpg" alt="" /></li><li class="li1"><div class="cover"></div><img src="img/1.jpg" alt="" /></li><li class="li2"><div class="cover"></div><img src="img/2.jpg" alt="" /></li><li class="li3"><div class="cover"></div><img src="img/3.jpg" alt="" /></li><li class="li4"><div class="cover"></div><img src="img/4.jpg" alt="" /></li></ul></div>
  <script>// 获得元素var $lis = $('.container li');//给li添加进入和移出事件（控制明暗变化）// find() 方法返回被选元素的后代元素// stop() 方法为被选元素停止当前正在运行的动画// fadeOut()用于淡出可见元素$lis.mouseenter(function() {$(this).find('.cover').stop(true).fadeOut();}).mouseleave(function() {$lis.stop(true);$(this).find('.cover').stop(true).fadeIn();$lis.eq(1).animate({"left": 160}, 500);$lis.eq(2).animate({"left": 320}, 500);$lis.eq(3).animate({"left": 480}, 500);$lis.eq(4).animate({"left": 640}, 500);})//给li添加事件（控制位置）$('.li0').mouseenter(function() {$lis.stop(true);$lis.eq(1).animate({"left": 560}, 500);$lis.eq(2).animate({"left": 620}, 500);$lis.eq(3).animate({"left": 680}, 500);$lis.eq(4).animate({"left": 740}, 500);})$('.li1').mouseenter(function() {$lis.stop(true);$lis.eq(1).animate({"left": 60}, 500);$lis.eq(2).animate({"left": 620}, 500);$lis.eq(3).animate({"left": 680}, 500);$lis.eq(4).animate({"left": 740}, 500);})$('.li2').mouseenter(function() {$lis.stop(true);$lis.eq(1).animate({"left": 60}, 500);$lis.eq(2).animate({"left": 120}, 500);$lis.eq(3).animate({"left": 680}, 500);$lis.eq(4).animate({"left": 740}, 500);})$('.li3').mouseenter(function() {$lis.stop(true);$lis.eq(1).animate({"left": 60}, 500);$lis.eq(2).animate({"left": 120}, 500);$lis.eq(3).animate({"left": 180}, 500);$lis.eq(4).animate({"left": 740}, 500);})$('.li4').mouseenter(function() {$lis.stop(true);$lis.eq(1).animate({"left": 60}, 500);$lis.eq(2).animate({"left": 120}, 500);$lis.eq(3).animate({"left": 180}, 500);$lis.eq(4).animate({"left": 240}, 500);})</script>

轮播一

<style>.banner {width: 500px;height: 300px;border: 1px solid lightgray;margin: 50px auto;overflow: hidden;display: flex;position: relative;}.banner img {width: 100%;height: 100%;}/*设置小圆点的容器，利用flex布局使其居中*/.banner .points {position: absolute;color: #fff;width: 100%;bottom: 10px;height: 30px;display: flex;justify-content: center;align-items: center;}/* 设置每个小圆点的样式 */.banner .point {background-color: skyblue;width: 10px;height: 10px;border-radius: 50%;margin: 5px;cursor: pointer;}.points .active {background-color: #f40;}/* 制作左右箭头 */.banner .left-btn,.banner .right-btn {z-index: 999;color: #fff;font-weight: 900;position: absolute;background-color: rgba(0, 0, 0, .2);height: 20px;width: 20px;display: flex;justify-content: center;align-items: center;cursor: pointer;margin-top: 140px;}.banner .left-btn {margin-left: -20px;}.banner .right-btn {margin-left: 500px;justify-content: center;}</style>
 <div class="banner"><img src="./images/beijing/0.jpg" alt="" data-href='#0'><img src="./images/beijing/1.jpg" alt="" data-href='#1'><img src="./images/beijing/2.jpg" alt="" data-href='#2'><img src="./images/beijing/3.jpg" alt="" data-href='#3'><!--左右箭头--><div class="left-btn"><</div><div class="right-btn">></div><!--小圆点--><div class="points"><div class="point active" data-page='0'></div><div class="point" data-page='1'></div><div class="point" data-page='2'></div><div class="point" data-page='3'></div></div></div>
 <script src="./js/jquery-1.12.3.min.js"></script><script>$(function() {var count = 0; //记录轮播的张数var timer = null;var time = 2000; //每张轮播的时间  毫秒//图片切换var imgChange = function() {$('.banner img').first().stop().animate({"margin-left": "-" + 500 * count + "px"}, 500)};//小圆点切换var pointChange = function() {$(".point").removeClass('active'); //排他操作$(".point[data-page='" + count + "']").addClass('active');}//周期切换图片与小圆点var timerStart = function() {clearInterval(timer); //开始之前先清除timer = setTimeout(function() {count++;count = count % 4;imgChange();pointChange();}, time)};//点击小圆点切换对应的图片$(".banner .point").click(function() {count = parseInt($(this).attr("data-page"));imgChange();pointChange();timerStart();})//当点击左右时，实现切换$(".banner .left-btn").click(function() {count--;count = count < 0 ? 0 : count;imgChange();pointChange();timerStart();})$(".banner .right-btn").click(function() {count++;count %= 4;imgChange();pointChange();timerStart();})//当鼠标移入banner区域时左右按钮显示，反之隐藏$(".banner").mouseenter(function() {$(".banner .left-btn").stop().animate({"margin-left": "0px"}, 500)$(".banner .right-btn").stop().animate({"margin-left": "480px"}, 500)})$(".banner").mouseleave(function() {$(".banner .left-btn").stop().animate({"margin-left": "-20px"}, 500)$(".banner .right-btn").stop().animate({"margin-left": "500px"}, 500)})timerStart();})
</script>

轮播二

 <link rel="stylesheet" href="css/indexjQuery.css"><script src="js/jquery-3.5.1.min.js"></script><script src="js/indexJquery.js"></script>
 <div id="container"><div id="list" style="left: -600px;"><img src="img/5.jpg" alt="1" /><img src="img/1.jpg" alt="1" /><img src="img/2.jpg" alt="2" /><img src="img/3.jpg" alt="3" /><img src="img/4.jpg" alt="4" /><img src="img/5.jpg" alt="5" /><img src="img/1.jpg" alt="5" /></div><div id="buttons"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span></div><a href="javascript:;" id="prev" class="arrow">&lt;</a><a href="javascript:;" id="next" class="arrow">&gt;</a></div>
* {margin: 0;padding: 0;text-decoration: none;
}body {padding: 20px;
}#container {width: 600px;height: 400px;overflow: hidden;position: relative;margin: 45px auto;
}#list {width: 4200px;height: 400px;position: absolute;z-index: 1;
}#list img {float: left;
}/* 小圆点区域 */#buttons {position: absolute;height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 250px;
}#buttons span {cursor: pointer;float: left;border: 1px solid #fff;width: 10px;height: 10px;border-radius: 50%;background: #333;margin-right: 5px;
}#buttons .on {background: orangered;
}/* 按钮区域 */.arrow {cursor: pointer;display: none;line-height: 39px;text-align: center;font-size: 36px;font-weight: bold;width: 40px;height: 40px;position: absolute;z-index: 2;top: 180px;background-color: RGBA(0, 0, 0, .3);color: #fff;
}.arrow:hover {background-color: RGBA(0, 0, 0, .7);
}#container:hover .arrow {display: block;
}#prev {left: 20px;
}#next {right: 20px;
}
$(function() {//获取元素var container = $('#container');var list = $('#list');var buttons = $('#buttons span');var prev = $('#prev');var next = $('#next');var index = 1; //存放当前显示的图片的下标var len = 5;var interval = 3000; //位移时间间隔var timer;function animate(offset) {var left = parseInt(list.css('left')) + offset;// 边界判断if (offset > 0) {offset = '+=' + offset;} else {offset = '-=' + Math.abs(offset);}list.animate({ 'left': offset }, 300, function() {if (left > -200) {list.css('left', -600 * len);}if (left < (-600 * len)) {list.css('left', -600);}});}//亮起小圆点function showButton() {//当前图片的小圆点亮起，其他小圆点不亮buttons.eq(index - 1).addClass('on').siblings().removeClass('on');}// 鼠标离开图片区域时，轮播继续function play() {timer = setTimeout(function() {next.trigger('click');play();}, interval);}//鼠标进入图片区域时，停止轮播function stop() {clearTimeout(timer);}// 右按钮点击事件next.bind('click', function() {// 判断当前是否在动画if (list.is(':animated')) {return;}// 判断当前图片是否是最后一张if (index == 5) {index = 1;} else {index += 1;}animate(-600);showButton();});// 左按钮事件prev.bind('click', function() {// 判断当前是否在动画if (list.is(':animated')) {return;}// 判断当前图片是否是第一张if (index == 1) {index = 5;} else {index -= 1;}animate(600);showButton();});// 小圆点点击事件buttons.each(function() {$(this).bind('click', function() {// 判断当前是否在进行动画if (list.is(':animated') || $(this).attr('class') == 'on') {return;}// 获取属性var myIndex = parseInt($(this).attr('index'));//计算偏移量var offset = -600 * (myIndex - index);animate(offset);//切换后，更新当前的偏移量index = myIndex;showButton();})});container.hover(stop, play);play();});

 轮播三

 核心：

  • 旧的图片淡出、新的图片淡入
  • 鼠标单击左右按钮，图片进行左右切换
  • 鼠标点击相应的锚点，图片就自动切换到锚点对应的图片
  • 但鼠标既没有单击左右按钮也没有单击锚点时，图片就按一定周期自动循环轮播
<script src="js/jquery-1.12.3.min.js"></script><style>* {margin: 0;padding: 0;user-select: none;}.swiper {width: 560px;height: 300px;border: 1px solid;margin: 80px auto;position: relative}.swiper .imgURL {list-style: none;padding: 0}.swiper .imgURL li {position: absolute;display: none}.swiper .imgURL .selectLi {display: block}.leftBtn,.rightBtn {position: absolute;width: 30px;height: 50px;background-color: rgba(0, 0, 0, .3);font-size: 25px;top: 40%;text-align: center;line-height: 50px;cursor: pointer;}.rightBtn {right: 0}.leftBtn:hover,.rightBtn:hover {color: #fff;background-color: rgba(0, 0, 0, .5);}.swiper .maodianUl {list-style: none;position: absolute;padding: 0;bottom: 10px;left: 35%;}.swiper .maodianUl li {display: inline-block;width: 22px;height: 22px;background-color: orange;text-align: center;line-height: 22px;border-radius: 50%;}.swiper .maodianUl .selectMaoDian {background-color: purple}.swiper .maodianUl li a {text-decoration: none;color: white}
</style>
 <div class="swiper"><ul class="imgURL"><li class="selectLi"><a href="#"><img src="img/0.jpg" alt="" /></a></li><li><a href="#"><img src="img/1.jpg" alt="" /></a></li><li><a href="#"><img src="img/2.jpg" alt="" /></a></li><li><a href="#"><img src="img/3.jpg" alt="" /></a></li><li><a href="#"><img src="img/4.jpg" alt="" /></a></li></ul><div class="leftBtn"><</div><div class="rightBtn">></div><ul class="maodianUl"><li class="selectMaoDian"><a href="#">0</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li></ul></div>
 <script>//获得元素var $leftBtn = $('.leftBtn');var $rightBtn = $('.rightBtn');//获取页面中所有的图片livar $lis = $('.imgURL li');//获取所有锚点的livar $maodians = $('.maodianUl li')//表示当前显示的li的序号var index = 0;var timer = null;$rightBtn.click(function() {//防止动画积累的方法：只要jq对象在执行动画，就忽略任何的触发if ($lis.is(':animated')) {return;}//旧的怎么样，新的怎么样$lis.eq(index).fadeOut();$maodians.eq(index).removeClass('selectMaoDian');index++;//当已经时最后一张时，点击切换到第一张if (index == 5) {index = 0;}//新的淡入$lis.eq(index).fadeIn();$maodians.eq(index).addClass('selectMaoDian');});$leftBtn.click(function() {//防止动画积累的方法：只要jq对象在执行动画，就忽略任何的触发if ($lis.is(':animated')) {return;}$lis.eq(index).fadeOut();$maodians.eq(index).removeClass('selectMaoDian');index--;//当已经时最后一张时，点击切换到第一张if (index == -1) {index = 4;}$lis.eq(index).fadeIn();$maodians.eq(index).addClass('selectMaoDian');})//锚点添加事件$maodians.mouseenter(function() {//旧的淡出，并给锚点取消背景$lis.eq(index).fadeOut();$maodians.eq(index).removeClass('selectMaoDian');//index()方法返回当前节点在兄弟节点中的序号，从0开始计算。index = $(this).index();//console.log(index);//新的淡入，并给锚点添加背景$lis.eq(index).fadeIn();$maodians.eq(index).addClass('selectMaoDian');});//自动播放(定时器)timer = setInterval(function() {//防止动画积累的方法：只要jq对象在执行动画，就忽略任何的触发if ($lis.is(':animated')) {return;}//旧的怎么样，新的怎么样$lis.eq(index).fadeOut();$maodians.eq(index).removeClass('selectMaoDian');index++;//当已经时最后一张时，点击切换到第一张if (index == 5) {index = 0;}$lis.eq(index).fadeIn();$maodians.eq(index).addClass('selectMaoDian');}, 3000);</script>


http://chatgpt.dhexx.cn/article/omXrxMsK.shtml

相关文章

git上传代码简单方法 简单git上传代码工具

git上传代码简单方法 简单git上传代码工具

简单git上传代码工具 肯定有很多人和我一样&#xff0c;git上传时候搞不懂拉取&#xff0c;合并等一系列的代码冲突问题&#xff0c;往往可能覆盖掉自己今天写的代码&#xff0c;或者覆盖掉别人的代码。 下面给大家简单介绍一款操作比较简单的上传代码工具&#xff1a;下图这款…
阅读更多...
Git上传代码到GitHub

Git上传代码到GitHub

版本控制&#xff1a;使用Git上传代码到GitHub 本文将帮助大家学会使用Git&#xff08;版本管理工具&#xff09;软件把电脑中的代码或项目上传到GitHub&#xff08;项目托管平台&#xff09;中。 要上传代码到GitHub中&#xff0c;是必须要安装Git软件的&#xff0c;不管是直…
阅读更多...
如何向github上传代码

如何向github上传代码

说明&#xff1a;本人亲测可行 1.首先你要安装git才行&#xff0c;这里不说明。 2.在github上创建个人仓库: 3.复制仓库地址&#xff1a; 4.在本地随便创建一个文件夹&#xff08;注意路径不要中文&#xff09; 5.进入文件中&#xff0c;鼠标右键如果安装成功git,菜单中会多出…
阅读更多...
git上传代码到git/码云gitee

git上传代码到git/码云gitee

一、首先需要下载git https://git-scm.com/ 输入命令:git --version 可查看当前git版本 二.安装后需要一些配置 配置用户名和邮箱: $ git config --global user.name "qinyong" $ git config --global user.email "emailexample.com" qinyong是自…
阅读更多...
如何在mac端上用git上传代码到码云

如何在mac端上用git上传代码到码云

前言&#xff1a;作为一个合格的猿&#xff0c;SVN的使用相信大家已经非常熟悉了&#xff0c;GIT作为一个强大的版本控制工具&#xff0c;也是非常有必要深入学习的。对比两个工具&#xff0c;说说GIT的优缺点&#xff1a; 优点&#xff1a;1、GIT拥有全世界的资源&#xff0c;…
阅读更多...
git上传代码到gitee仓库步骤

git上传代码到gitee仓库步骤

默认电脑第一次安装git且未设置过SSH key 安装git 创建gitee仓库 生成SSH密钥 在你想上传文件所在的文件夹内右键&#xff0c;打开git bash&#xff0c;第一次使用Git时需要先生成SSH ssh-keygen -t rsa -C "your_email"注意&#xff1a;ssh-keygen中间没有空格提…
阅读更多...
git上传代码到码云（详细）

git上传代码到码云（详细）

一、安装git .要使用git 先安转git 请到官网下载最新git http://git-scm.com/downloads 安装完成右键查看下是否有如下图所示的图标 二、本地建立git文件 本次建立的git文件是在本地完成的项目上建立的。找到当前完成项目的文件夹完成如下代码 &#xff08;1&#xff09;“…
阅读更多...
【git】将代码上传到github

【git】将代码上传到github

记录一下用Git初次配置远端仓库的学习过程。 假设你已经下载好了git&#xff0c;同时在github上也有了一个账号。 0.配置SSH 我们打开git bash&#xff0c;然后输入 $ ssh-keygen -t rsa -C "your_emailyouremail.com"这里的your_emailyouremail.com 是你在github…
阅读更多...
怎么用git上传部分代码

怎么用git上传部分代码

怎么用Git上传部分代码? 0&#xff1a;在项目的根目录右键 Git Bash Here 1: 使用命令: git status (查看当前代码状态) 标红的为修改的代码 2&#xff1a;看一下那些文件是想要上传哪些文件是不想要上传的。 使用命令: git add . (全部上传) git add 文件 (上传指定文件) …
阅读更多...
Git代码上传

Git代码上传

以开源仓库为例&#xff0c;公司使用公司的仓库 首先需要注册一个gitee 创建仓 本地安装git 安装地址&#xff1a; https://git-scm.com/download/win 设置环境变量 在cmd设置GIT全局设置&#xff0c;输入你创建仓库的命令 创建git仓库 1、新建文件api_test 2、在cmd切换至此…
阅读更多...
往git上上传代码

往git上上传代码

从Mac的终端上往git上上传代码 前言git的工作原理github的基本操作 前言 因为要完成小组的项目需要用到git&#xff0c;所以我提前学习了一下git的使用。 git的工作原理 首先我了解了一下git的工作原理 一般我们会把项目放到远程仓库里&#xff0c;也就是GitHub里。每个人都…
阅读更多...
Git命令行上传本地代码

Git命令行上传本地代码

该篇文章主要参考(超详细&#xff09;使用git命令行将本地仓库代码上传到gitee/github远程仓库 写此博客主要为了日后查阅方便。 第一步&#xff1a;初始化git。进入到需要上传的项目的目录下&#xff0c;右键找到Git Bah Here&#xff0c;目的是可以直接在当前目录进行初始…
阅读更多...
如何用git上传代码到github详细步骤

如何用git上传代码到github详细步骤

注册账户 想使用github&#xff0c;第一步肯定是要注册github账号&#xff0c;有了账号就是直接登录啦 可以直接打开http://github.com页面注册 创建仓库 注册、登录完成之后&#xff0c;在登录页面最上方用户菜单上选择 “”->New repository 创建一个新的仓库 进入创建仓库…
阅读更多...
如何使用Git上传项目代码到github

如何使用Git上传项目代码到github

github是一个基于git的代码托管平台&#xff0c;付费用户可以建私人仓库&#xff0c;我们一般的免费用户只能使用公共仓库&#xff0c;也就是代码要公开。这对于一般人来说公共仓库就已经足够了。 注册账户以及创建仓库 要想使用github第一步当然是注册github账号了。之后就可以…
阅读更多...
Git上传文件代码到GitHub（超详细）

Git上传文件代码到GitHub（超详细）

Git上传文件代码到GitHub&#xff08;超详细&#xff09; 之前用git上传代码到GitHub上&#xff0c;时间一长又忘了&#xff0c;总结一下写下来&#xff0c;后面上传忘了再看。 1. 新建一个空文件夹&#xff0c;用来上传文件 空文件夹放在那里都可以 2. 点进去空文件夹&am…
阅读更多...
如何在git上传代码

如何在git上传代码

一、git常见指令 1、git clone: 克隆一个git仓库 2、git add . &#xff1a;添加到暂存区 3、git branch &#xff1a;查看所有分支 4、git branch xx &#xff1a;创建分支 5、git commit :提交 6、gitcommit -m "备注" : 这个是提交并中间可以写备注信息 7、…
阅读更多...
git代码上传详细步骤（初学者操作）

git代码上传详细步骤（初学者操作）

看到很多大佬都有自己的github&#xff0c;看上去很酷。有源码&#xff0c;有分享总结。作为初学者当然心动啦。那么搞个项目怎么上传到github呢&#xff1f;我确实有点笨从26号晚上十点到十二点&#xff0c;第二天八点到一点。终于把项目上传上去了。在此做个总结&#xff0c;…
阅读更多...
git 上传代码步骤

git 上传代码步骤

第一步&#xff1a;建立git仓库 cd到你的本地项目根目录下&#xff0c;执行git命令&#xff0c;此命令会在当前目录下创建一个.git文件夹。 git init 第二步&#xff1a;将项目的所有文件添加到仓库中 git add . 这个命令会把当前路径下的所有文件&#xff0c;添加到待上传…
阅读更多...
eclipse 加html注释快捷键

eclipse 加html注释快捷键

1.单行注释&#xff1a; 先写下注释&#xff0c;然后光标放到这一行上&#xff0c;接着按下ctrlshitfC快捷键&#xff0c;eclipse会自动注释掉这一行。 2.多行注释&#xff0c;拖动鼠标选中你要注释的内容&#xff0c;然后再按下ctrlshitfc
阅读更多...
eclipse两种注释的快捷键

eclipse两种注释的快捷键

方法一&#xff1a;使用Ctrl/快捷键 第1步&#xff1a;在Eclipse中拖动鼠标&#xff0c;选中需要注释的代码&#xff0c;通常为连续多行代码。 第2步&#xff1a;按住Ctrl/快捷键&#xff0c;如图所示: 第3步&#xff1a;会发现所选代码被“//”注释掉。当调试完后&#xff0c…
阅读更多...
推荐文章

Copyright @ 2022~2023