爱站程序员基地<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>img {width: 600px;}ul li {list-style: none;}.img li {display: none;}.img li:first-of-type {display: block;}.dian {display: flex;position: absolute;top: 415px;left: 255px;}.dian li {width: 10px;height: 10px;margin: 5px 5px;background-color: rgb(58, 51, 51);}.dian .bac {background-color: rgb(247, 239, 239);}.left,.right{width: 50px;height: 100px;background-color: black;position: absolute;top: 170px;left: 0;}.left{left: 47px;}.right{left: 597px;}</style></head><body><ul class=\"img\"><li><img src=\"../image/1.jpg\" alt=\"\"></li><li><img src=\"../image/2.jpg\" alt=\"\"></li><li><img src=\"../image/3.jpg\" alt=\"\"></li><li><img src=\"../image/4.jpg\" alt=\"\"></li></ul>//图片下面的点，可以点<ul class=\"dian\"><li class=\"bac\"></li><li></li><li></li><li></li></ul>//类似左右箭头按钮<div class=\"left\"></div><div class=\"right\"></div><script src=\"../JQ/JQuery.js\"></script><script>$(function () {let i = 0//将定时器封装成函数，方便调用let timer = nullfunction run() {timer = setInterval(() => {if (++i === 4) i = 0$(\'.img li\').eq(i).show().siblings().hide()$(\'.dian li\').eq(i).addClass(\'bac\').siblings(\'.bac\').removeClass(\'bac\')}, 2000)}run()$(\'.dian li\').click(function () {//为了点击之后转换的顺畅，先清除定时器，再重新调用定时器clearInterval(timer)i = $(this).index()$(\'.img li\').eq(i).show().siblings().hide()$(\'.dian li\').eq(i).addClass(\'bac\').siblings(\'.bac\').removeClass(\'bac\')run()})$(\'.left\').click(function(){clearInterval(timer)if(--i < 0) i = 3$(\'.img li\').eq(i).show().siblings().hide()$(\'.dian li\').eq(i).addClass(\'bac\').siblings(\'.bac\').removeClass(\'bac\')run()})$(\'.right\').click(function(){clearInterval(timer)if(++i > 3) i = 0$(\'.img li\').eq(i).show().siblings().hide()$(\'.dian li\').eq(i).addClass(\'bac\').siblings(\'.bac\').removeClass(\'bac\')run()})})</script></body></html>
jQuery操作简易轮播图，带点击
未经允许不得转载：爱站程序员基地 » jQuery操作简易轮播图，带点击
