50行Jquery代码写轮播图

css源文件

#slideshow {width: 1226px;height: 460px;overflow: hidden;position: relative;margin: 50px auto;
}#pre {position: absolute;top: 210px;left: 195px;width: 50px;height: 100px;font-size: 40px;opacity: 0.5;cursor: pointer;/* 让鼠标指针在上面时，改变形状 */
}#next {position: absolute;top: 210px;left: 1330px;width: 50px;height: 100px;font-size: 40px;opacity: 0.5;cursor: pointer;
}#imglist li {position: absolute;opacity: 1;display: block;
}#dotlist {position: absolute;bottom: 30px;width: 100px;right: 0px;list-style: none;/* 取消无序列表每行前面的点 */display: flex;}div ul:last-child li{width: 20px;height: 20px;text-align: center;border-radius: 50%;background-color: rgb(206, 16, 16);opacity: 0.3;cursor: pointer;user-select: none;/*让用户无法点中选择 */
}.arrow1 {font-size: 135px;color: white;
}

Html源文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="css/img.css" /></head><body><div id="slideshow"><ul id="imglist"><li><img src="img/banner01.jpg" alt="" /></li><li><img src="img/banner02.webp" alt="" /></li><li><img src="img/banner03.webp" alt="" /></li><li><img src="img/banner01.webp" alt="" /></li></ul><ul id="dotlist"><!-- <li>1</li><li>2</li><li>3</li><li>4</li> --></ul></div><button id="pre"><</button><button id="next">></button><script src="js/jquery-3.5.1.js"></script>

承接上面，jquery代码

<script>//首先写一个入口函数$(function () {//因为第一张图片被后面的第四张图片覆盖了，所以现在需要先将第一张图片给显示出来$("#imglist li").eq(0).stop().fadeIn();$("#imglist li").eq(0).stop().siblings("li").fadeOut();//默认下标var index = 0;var length = $("#imglist li").length;var stopTime = 3000;//追加li标签下面的for (var i = 1; i <= length; i++) {$("#dotlist").append("<li>" + i + "</li>");}$("#dotlist li").eq(0).css("opacity", "1");//因为是后追加的，所以需要用父类注册点击事件$("#dotlist").on("click", "li", function () {index = $(this).index();indexImg();});//将相同的逻辑代码封装function indexImg() {for (var i = 0; i < length; i++) {$("#imglist li").eq(i).stop().fadeOut();$("#dotlist li").eq(i).css({ opacity: "0.3" });}$("#imglist li").eq(index).stop().fadeIn();$("#dotlist li").eq(index).css({ opacity: "1" });}//next按钮$("#next").click(function () {index++;if (index == 4) index = 0;indexImg();});//pre按钮$("#pre").click(function () {index--;if (index == -1) index = 3;indexImg();});//自动加载图片interval = setInterval(function () {index++;if (index == length) index = 0;indexImg();}, stopTime);//当鼠标放到图上的时候，停止计时器$("#imglist li").mouseover(function () {clearInterval(interval);});//鼠标离开时重新启动$("#imglist li").mouseout(function () {interval = setInterval(function () {index++;if (index == length) index = 0;indexImg();}, stopTime);});</script></body>
</html>

50行Jquery代码写轮播图相关推荐

jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图先上个效果截图: 主要 ...
jquery手写轮播图_jquery 实现轮播图详解及实例代码_jquery_脚本之家
轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写 ...
jquery手写轮播图_jquery 轮播图怎么写
jquery轮播图的实现方法:首先创建一个放置的盒子"p.focus":然后将overflow设置为hidden:接着通过javascript实现点击左右翻页切换图片的功能即可. ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
jquery手写轮播图_用jquery实现图片轮播怎么写呢求指教
展开全部 *{ margin: 0; padding: 0; } ul{ list-style:none; } .slideShow{ width: 620px; height: 700px; ...
jQuery实现异形轮播图
思路: 异形轮播图与普通轮播图不同的一点,是异形轮播图一次性展示多个图片,且图片大小的位置会动态变化. 以往我的处理办法都是直接给要展示的图片动态的添加一个class类, 简单粗暴.这次我在很多地方都 ...
js写轮播图（左右箭头）
写个人博客时写到了轮播图先说明未完善的地方:在第一张图片按左键时,不能转到最后一张图片(但最后一张图片按右键时可以转到第一张图片). 不过一般第一张图片也不需要转到最后一张,所以没大问题.(可以试试 ...
html5carousel图片轮播,jquery 3d Carousel轮播图插件
jQuery-Waterwheel-Carousel是一款jquery 3d Carousel轮播图插件.该jquery Carousel轮播图插件兼容ie8浏览器,提供丰富的参数和API方法由于控制 ...
html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法在页面中引入jquery. ...

50行Jquery代码写轮播图

css源文件

Html源文件

承接上面，jquery代码

50行Jquery代码写轮播图相关推荐

最新文章

热门文章