web轮播图

思路:

例如:有5张轮播的图片,每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸,即为:1024×512。之后将这5张图片0px水平相接组成一张宽度为:5120px,高度依然为:512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。

html代码

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><link href="index.css" type="text/css" rel="stylesheet"><script src="jquery-1.11.3.min.js"></script><script src="index.js"></script>
</head>
<body>
<!--轮播图整体div-->
<div class="banner"><!--无序列表承载轮播的图片--><ul class="img"><li><a href="#"><img src="image/1.png" alt="第1张图片"></a></li><li><a href="#"><img src="image/2.png" alt="第2张图片"></a></li><li><a href="#"><img src="image/3.png" alt="第3张图片"></a></li><li><a href="#"><img src="image/4.png" alt="第4张图片"></a></li><li><a href="#"><img src="image/5.png" alt="第5张图片"></a></li><li><a href="#"><img src="image/6.png" alt="第6张图片"></a></li><li><a href="#"><img src="image/7.png" alt="第7张图片"></a></li></ul><!--用来放置圆点具体实施在js代码中呈现--><ul class="num"></ul><!--左右点击按钮--><div class="btn"><span class="prev"><</span><span class="next">></span></div>
</div>
</body>
</html>

报错:

使用了jquery-3.7.1.slim.min.js,它是一个精简版的jQuery库,没有包含.stop()方法。你尝试使用完整版的jQuery,

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 

css代码

/*整体去除内外边距*/
* {margin: 0;padding:0;
}
/*取消列表的图标内容*/
ul{list-style: none;
}
/*对整体部分的控制,浏览图片的窗口*/
.banner{width: 1024px;height: 512px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;
}
/*图片的初步设置后面的动态内容会在js中实现*/
.img{width:1024px;height: 512px;position: absolute;top: 0;left: 0;
}
/*让图片向左浮动*/
.img li{float: left;
}
/*圆点承载部分的设计*/
.num{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;
}
/*圆点设计*/
.num li{width: 10px;height: 10px;background:rgba(0,0,0,0.5);border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;
}
/*按钮部分初始不可见*/
.btn{display: none;
}
/*按钮形状设计*/
.btn span{display: block;width: 50px;height: 100px;background: rgba(0,0,0,0.6);color: #fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;
}
/*上一个设计*/
.btn .prev{position: absolute;left: 0;top: 50%;margin-top: -50px;
}
/*下一个设计*/
.btn .next{position: absolute;right: 0;top: 50%;margin-top: -50px;
}
/*对按纽动态呈现的变换进行类选择器的设计为js代码部分进行铺垫*/
.num .active{background-color: #fff;
}
.hide{display: none;
}

js代码

//界面加载完毕执行以下程序
$(function(){//定义i变量为动态控制图片轮播做准备,i的值与每张图片进行一一的对应var i=0;//时间变量,为自动轮播以及对光标的影响做出相应的反应var timer=null;//根据图片的张数动态添加圆点个数for (var j = 0; j < $('.img li').length; j++) {$('.num').append('<li></li>');}//默认情况下的第一个圆点进行背景设计$('.num li').first().addClass('active');//根据光标的影响控制按钮的显示和隐藏$('.banner').hover(function(){$('.btn').show();},function(){$('.btn').hide();});//将第一张图片复制并添加到img部分下与前五张图片相接var firstimg=$('.img li').first().clone(); //复制第一张图片$('.img').append(firstimg).width($('.img li').length*($('.img img').width()));//定时器自动轮播timer=setInterval(function(){i++;if (i==$('.img li').length) {i=1;$('.img').css({left:0});//保证无缝轮播,设置left值}//进行下一张图片$('.img').stop().animate({left:-i*1024},500);//圆点跟着变化if (i==$('.img li').length-1) {$('.num li').eq(0).addClass('active').siblings().removeClass('active');}else{$('.num li').eq(i).addClass('active').siblings().removeClass('active');}},1000);//鼠标移入,暂停自动播放,移出,开始自动播放$('.banner').hover(function(){clearInterval(timer);},function(){timer=setInterval(function(){i++;if (i==$('.img li').length) {i=1;$('.img').css({left:0});};//进行下一张图片$('.img').stop().animate({left:-i*1024},500);//圆点跟着变化if (i==$('.img li').length-1) {$('.num li').eq(0).addClass('active').siblings().removeClass('active');}else{$('.num li').eq(i).addClass('active').siblings().removeClass('active');}},1000)});//上一个按钮$('.prev').click(function(){i--;if (i==-1) {i=$('.img li').length-2;$('.img').css({left:-($('.img li').length-1)*1024});}$('.img').stop().animate({left:-i*1024},500);$('.num li').eq(i).addClass('active').siblings().removeClass('active');});// 下一个按钮$('.next').click(function(){i++;if (i==$('.img li').length) {i=1; //这里不是i=0$('.img').css({left:0});};$('.img').stop().animate({left:-i*1024},500);if (i==$('.img li').length-1) { //设置小圆点指示$('.num li').eq(0).addClass('active').siblings().removeClass('active');}else{$('.num li').eq(i).addClass('active').siblings().removeClass('active');};});//鼠标划入圆点$('.num li').mouseover(function(){var _index=$(this).index();//维持i变量控制的对应关系不变i = _index;                 $('.img').stop().animate({left:-_index*1024},300);$('.num li').eq(_index).addClass('active').siblings().removeClass('active');});})

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/173.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

守望先锋2怎么在steam上玩 守望先锋归来steam下载安装

守望先锋2怎么在steam上玩 守望先锋归来steam下载安装 《守望先锋2》是知名游戏开发商暴雪娱乐开发的团队射击游戏。与第一部相比&#xff0c;守望先锋2加入了更多元素和新特性。游戏设定在未来的世界&#xff0c;玩家可以选择不同的英雄&#xff08;heroes&#xff09;加入战…

python聊天室

python聊天室 文章目录 python聊天室chat_serverchat_client使用方式1.局域网聊天2.公网聊天 下面是一个简单的示例&#xff0c;包含了chat_client.py和chat_server.py的代码。 chat_server chat_server.py监听指定的端口&#xff0c;并接收来自客户端的消息&#xff0c;并将消…

35岁+技术人的困境与选择

前言 最近一些大厂的持续裁员事件&#xff0c;让职场年龄焦虑的话题又火热起来了。职场的年龄焦虑是客观存在的事实&#xff0c;这是市场与资本相互作用的必然结果。资本在运作的过程中&#xff0c;肯定是要逐利的&#xff0c;最终也是要趋向于利润最大化的。 因此&#xff0…

WdatePicker异常,无法弹出日期选择框

官网&#xff1a;My97日期控件官方网站 My97 DatePickerhttp://www.my97.net/ 可能使版本太老了&#xff0c;可以更新一下&#xff0c;然后根据官方的文件进行使用。 我的异常是因为在网上找的包里面缺少文件&#xff0c;去官网拉了一下最新的就行了。

AR地图导览小程序是怎么开发出来的?

在移动互联网时代&#xff0c;AR技术的发展为地图导览提供了全新的可能性。AR地图导览小程序结合了虚拟现实技术和地图导航功能&#xff0c;为用户提供了更加沉浸式、直观的导览体验。本文将从专业性和思考深度两个方面&#xff0c;探讨AR地图导览小程序的开发方案。 编辑搜图 …

数据结构之排序了如指掌(二)

目录 题外话 正题 选择排序 选择排序思路 选择排序代码详解 选择排序复杂度 双向选择排序 双向选择排序思路 双向选择排序代码详解 堆排序 堆排序思路 堆排序代码详解 堆排序复杂度 冒泡排序 冒泡排序思路 冒泡排序代码详解 冒泡排序复杂度 小结 题外话 今天…

变配电场所智能综合监控系统无人化与自动化升级改造

一 项目背景 国家电力建设飞速发展,为了提高管理水平,智能化建设迫在眉睫。变配电场所作为电网中的核心单元,数量巨大,是智能化建设的中坚部分。但由于变配电场所分布的地理位置过于分散&#xff0c;且配电网的自动化水平有待提高,单纯依靠人力来对变配电场所进行巡视,不仅增加…

python 文件输入输出

python 文件输入输出 一、输入输出1. 输出格式美化2. 旧式字符串格式化3. 读取键盘输入4. 读和写文件5. 文件对象的方法6. pickle 模块 二、文件操作1. File(文件) 方法2. mode 参数有&#xff1a;3. file 对象 三、 OS 文件操作1. OS 文件/目录方法 四、代码概览&#xff08;输…

【canvas】canvas综合运用:心形图案

#简言 利用canvas画出心形图案。 心形 心形图案可以两个椭圆相交组合&#xff0c;也可以直接画路径实现。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" conte…

深入了解CSS 元素尺寸单位:像素、百分比、em、rem 和 viewport 单位

你好&#xff0c;我是小白Coding日志&#xff0c;一个热爱技术的程序员。在这里&#xff0c;我分享自己在编程和技术世界中的学习心得和体会。希望我的文章能够给你带来一些灵感和帮助。欢迎来到我的博客&#xff0c;一起在技术的世界里探索前行吧&#xff01; 在前端开发中&am…

labelimg安装和使用(解决闪退问题)

&#x1f308;个人主页&#xff1a;Rookie Maker &#x1f525; 系列专栏&#xff1a;计算机视觉 &#x1f3c6;&#x1f3c6;关注博主&#xff0c;随时获取更多关于IT的优质内容&#xff01;&#x1f3c6;&#x1f3c6; &#x1f600;欢迎来到我的代码世界~ &#x1f601; 喜…

图与图搜索算法

图搜索算法是一个非常重要的概念&#xff0c;它是计算机科学中图论和算法设计的基础部分。在开始讨论图搜索算法之前&#xff0c;我们需要先理解什么是图以及图的基本结构。 什么是图&#xff1f; 图&#xff08;Graph&#xff09;是一种非线性数据结构&#xff0c;它由一组点…

C 错误处理

C 语言不提供对错误处理的直接支持&#xff0c;但是作为一种系统编程语言&#xff0c;它以返回值的形式允许您访问底层数据。在发生错误时&#xff0c;大多数的 C 或 UNIX 函数调用返回 1 或 NULL&#xff0c;同时会设置一个错误代码 errno&#xff0c;该错误代码是全局变量&am…

Redis集群和哨兵

Redis集群和哨兵是Redis系统中的重要组件&#xff0c;它们在保障数据可靠性、扩展性和高可用性方面发挥着关键作用。 Redis集群主要解决了单一Redis实例在存储和性能上的限制。通过将数据分散到多个Redis节点上&#xff0c;集群能够实现数据的水平扩展&#xff0c;从而支持更大…

点云的投影------PCL

点云的投影 /// <summary> /// 参数化模型投影点云 /// </summary> /// <param name"cloud">点云</param> /// <param name"x">投影平面x面的系数</param> /// <param name"y"></param> /// &…

Python下利用Selenium获取动态页面数据

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

Java中方法的重载:初学者易懂的指南

Java中方法的重载&#xff1a;初学者易懂的指南 在Java编程中&#xff0c;方法的重载&#xff08;Overloading&#xff09;是一个非常重要的概念。它允许我们在同一个类中定义多个同名但参数列表不同的方法。这样&#xff0c;我们就可以根据传递的参数类型和数量来执行不同的操…

使用python进行网站答题操作

介绍&#xff1a; 使用Python和DrissionPage模块编写自动化脚本&#xff0c;以模拟人的行为访问网站并获取题目答案进行自动答题。这个脚本似乎是为答题网站设计的&#xff0c;通过监控特定数据包地址来获取题目答案&#xff0c;并模拟点击正确答案进行答题。 代码中的逻辑包…

C++奇迹之旅:探索C++拷贝构造函数

文章目录 &#x1f4dd;拷贝构造函数&#x1f320; 概念&#x1f309;特征 &#x1f320;浅拷贝(值拷贝)&#x1f309;深拷贝 &#x1f320;拷贝构造函数典型调用场景&#x1f320;应用时效率的思考&#x1f6a9;总结 &#x1f4dd;拷贝构造函数 &#x1f320; 概念 在现实生…

SHELL编程----判断输入的是否为IP地址

描述 写一个脚本统计文件nowcoder.txt中的每一行是否是正确的IP地址。 如果是正确的IP地址输出&#xff1a;yes 如果是错误的IP地址&#xff0c;且是四段号码的话输出&#xff1a;no&#xff0c;否则的话输出&#xff1a;error 假设nowcoder.txt内容如下&#xff1a; 192.1…