小编给大家分享一下使用纯CSS、js实现图片轮播效果的示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！js有什么特点1、js属于一种解释性脚本语言；2、在绝大多
小编给大家分享一下使用纯CSS、js实现图片轮播效果的示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。
代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><!--轮播--><style>.carousel {width: 648px;height: 400px;margin: 0 auto;text-align: center;position: absolute;left: 24%;}.inner {width: 648px;height: 400px;position: absolute;}.inner-img {width: 200px;height: 500px;display: none;position: relative;}.inner-img.active {display: block;}.leftBtn,.rightBtn {position: absolute;width: 40px;height: 60px;background: rgba(0, 0, 0, 0.3);font-size: 30px;color: #fff;text-align: center;line-height: 60px;cursor: pointer;display: none;}.leftBtn {left: 5px;top: 170px;}.rightBtn {left: 603px;top: 170px;}.carousel ul {position: absolute;padding-left: 228px;bottom: 10px;list-style: none;width: 200px;height: 20px;}.carousel ul .page {float: left;width: 18px;height: 18px;line-height: 18px;border-radius: 18px;background: black;margin-right: 6px;color: #fff;font-size: 14px;cursor: pointer;}.carousel ul .page.active {background-color: red;}.carousel p {margin-top: -360px;margin-right: -600%;color: black;text-decoration: none;list-style: none;}</style></head><body><!--轮播--><p class="carousel"><p class="inner"><a href="#" class="inner-img active"><img src="https://file.lsjlt.com/upload/202306/13/sbrxlxyfb34.jpg" alt="图片加载中" width="648" height="400"></a><a href="#" class="inner-img"><img src="Https://file.lsjlt.com/upload/202306/13/qmza4fzhr03.jpg" alt="图片加载中" width="648" height="400"></a><a href="#" class="inner-img"><img src="https://file.lsjlt.com/upload/202306/13/e33D0vxacxg.jpg" alt="图片加载中" width="648" height="400"></a><a href="#" class="inner-img"><img src="https://file.lsjlt.com/upload/202306/13/lnxjmsc3j0u.jpg" alt="图片加载中" width="648" height="400"></a><a href="#" class="inner-img"><img src="https://file.lsjlt.com/upload/202306/13/4gx40ufdmyz.jpg" alt="图片加载中" width="648" height="400"></a><a href="#" class="inner-img"><img src="https://file.lsjlt.com/upload/202306/13/2f5powmzp10.jpg" alt="图片加载中" width="648" height="400"></a><a href="#" class="inner-img"><img src="https://file.lsjlt.com/upload/202306/13/oukj00z0v2p.jpg" alt="图片加载中" width="648" height="400"></a><a href="#" class="inner-img"><img src="https://file.lsjlt.com/upload/202306/13/n4gqke52esf.jpg" alt="图片加载中" width="648" height="400"></a><p class="leftBtn"><</p><!--左按钮--><p class="rightBtn">></p><!--右按钮--></p><ul><li class="page active">1</li><li class="page">2</li><li class="page">3</li><li class="page">4</li><li class="page">5</li><li class="page">6</li><li class="page">7</li><li class="page">8</li></ul></p></body><script>var carousel = document.getElementsByClassName('carousel')[0], //获取carousel的class类// 获取所有包含图片的链接innerImg = document.getElementsByClassName('inner-img'),// 获取左右按钮btnL = document.getElementsByClassName('leftBtn')[0],btnR = document.getElementsByClassName('rightBtn')[0],// 获取分页器page = document.getElementsByClassName('page'),num = 0; // 声明变量 初始图片为第一张0// 声明时间控制函数var timer = setInterval(moveR, 2500); //调用moveR 时间间隔2.5s // 图片向右轮播function moveR() {num++; // 变量每3000毫秒递增一次,图片向右轮播// 如果是最后一张图片的时候从0开始显示if(num == innerImg.length) {num = 0;}move();};// 图片向左轮播function moveL() {num--; // 每调用一次moveL(),变量递减一次// 如果是第一张图片，则从最后一张图片开始显示if(num == -1) {num = innerImg.length - 1;};move();} // 图片切换 function move() { // 把所有的innerImg隐藏和page背景全部变成黑色for(var i = 0; i < innerImg.length; i++) {innerImg[i].style.display = 'none';page[i].style.background = 'black';}// 把当前num下标的innerImg显示和page背景变成redinnerImg[num].style.display = 'block';page[num].style.background = 'red'; }// 分页器鼠标滑过时图片切换for(var i = 0; i < page.length; i++) {// 用来保存下标，page[i].index == 0 / 1 / 2 / 3 /4...page[i].index = i;// console.log(page[i].index);// 因为已经保存好的下边，这里的page[i], page[0], page[1], page[2], page[3]page[i].onmouseover = function() {for(var j = 0; j < page.length; j++) {page[j].style.background = 'black';innerImg[j].style.display = 'none';}this.style.background = 'red'; // console.log(this.index);可以查看是多少innerImg[this.index].style.display = 'block';num = this.index;}}btnL.onclick = function() {moveL();}btnR.onclick = function() {moveR();}// 鼠标划上carousel时让左右按钮显示 并清除时间函数 carousel.onmouseover = function() {// 清除时间函数clearInterval(timer); //暂停 图片不继续循环btnR.style.display = 'block';btnL.style.display = 'block';}// 鼠标离开carousel时让左右按钮隐藏carousel.onmouseout = function() {// 开启时间函数timer = setInterval(moveR, 2500);btnR.style.display = 'none';btnL.style.display = 'none';}</script></html>以上是“使用纯CSS、JS实现图片轮播效果的示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！
--结束END--
本文标题: 使用纯CSS、JS实现图片轮播效果的示例
本文链接: https://lsjlt.com/news/274472.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0