啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style type="text/css"> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????ul { ???????????list-style: none; ???????} ???????.slideShow { ???????????width: 600px; ???????????height: 350px; /*其实就是图片的宽度和高度*/ ???????????border: 1px #eeeeee solid; ???????????margin: 100px auto; ???????????position: relative; ???????????overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/ ???????} ???????.slideShow ul { ???????????width: 3000px; ???????????position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/ ???????} ???????.slideShow ul li { ???????????float: left; /*让五张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/ ???????????width: 600px; ???????} ???????.slideShow .showNav { ???????????position: absolute; /*用绝对定位给数字按钮进行布局*/ ???????????right: 10px; ???????????bottom: 5px; ???????????text-align: center; ???????????font-size: 12px; ???????????line-height: 20px; ???????} ???????.slideShow .showNav span { ???????????cursor: pointer; ???????????display: block; ???????????float: left; ???????????width: 20px; ???????????height: 20px; ???????????background: #ff5a28; ???????????margin-left: 2px; ???????????color: #fff; ???????} ???????.slideShow .showNav .active { ???????????background: #b63e1a; ???????} ???</style></head><body><div class="slideShow"> ???<ul> ???????<li><a href="#"><img src="image/pic1.png" ></a></li> ???????<li><a href="#"><img src="image/pic2.png" ></a></li> ???????<li><a href="#"><img src="image/pic3.png" ></a></li> ???????<li><a href="#"><img src="image/pic4.png" ></a></li> ???????<li><a href="#"><img src="image/pic5.png" ></a></li> ???</ul> ???<div class="showNav"> ???????<span class="active">1</span> ???????<span>2</span> ???????<span>3</span> ???????<span>4</span> ???????<span>5</span> ???</div> ???<script type="text/javascript" src="jquery-3.3.1.min.js"></script> ???<script type="text/javascript"> ???????$(document).ready(function () { ???????????var slideShow = $(".slideShow"), ???//获取最外层框架的名称 ???????????????ul = slideShow.find(‘ul‘), ???????????????showNumber = slideShow.find(‘.showNav span‘), ??//获取按钮 ???????????????oneWidth = slideShow.find(‘ul li‘).eq(0).width(); ??//获取每个图片的宽度 ???????????var timer = null; ??//定时器返回值，主要用于关闭定时器 ???????????var iNow = 0; ??//iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0 ???????????showNumber.on(‘click‘, function () { ????//为每个按钮绑定一个点击事件 ???????????????$(this).addClass(‘active‘).siblings().removeClass(‘active‘); ???//按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉 ???????????????var index = $(this).index(); ???//获取哪个按钮被点击，也就是找到被点击按钮的索引值 ???????????????iNow = index; ???????????????ul.animate({‘left‘: -oneWidth * iNow,}) ??//注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定 ???????????}); ???????????function autoplay() { ???????????????timer = setInterval(function () { ??//打开定时器 ???????????????????iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片 ???????????????????if (iNow > showNumber.length - 1) { ?//当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始 ???????????????????????iNow = 0; ???????????????????} ???????????????????showNumber.eq(iNow).trigger(‘click‘); ??//模拟触发数字按钮的click ???????????????}, 2000); ???//2000为轮播的时间 ???????????} ???????????autoplay(); ???????????slideShow.hover(function () { ???????????????clearInterval(timer); ???????????}, autoplay()) ???????}) ???</script></div></body></html>
巴巴爸爸啵啵啵啵啵啵啵啵啵啵啵啵啵啵啵
用jquery实现图片轮播
原文地址：https://www.cnblogs.com/Black-rainbow/p/9153751.html