一、要点：
1.页面加载时，图片重合，叠在一起[绝对定位];
2.第一张显示，其它隐藏;
3.设置下标,给下标设置颜色让它随图片移动;
4.鼠标移动到图片上去，显示左右移动图标，鼠标移走，继续轮播;
二、实现代码：
html代码:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>轮播图</title> <link href="css/LunBimg.css" rel="stylesheet" /> <script src="/UploadFiles/2021-04-02/jquery-1.10.2.min.js">css代码：
* { padding:0px; margin:0px; } .swapImg { position:absolute; } .btn { position:absolute; height:90px; width:60px; background:rgba(0,0,0,0.5);/*设置背景颜色为黑色，透明度为50%*/ color:#ffffff; text-align:center; line-height:90px; font-size:40px; top:155px;/*图片高度400/2-45*/ cursor:pointer; /*display:none;*/ } .btnRight { left:840px;/*图片宽度900-导航宽度60*/ } #tabs { position:absolute; top:370px; margin-left:350px; } .tab { height:20px; width:20px; background:#05e9e2; line-height:20px; text-align:center; font-size:10px; float:left; color:#ffffff; margin-right:10px; border-radius:100%; cursor:pointer; } .bg { background:#00ff21; }js代码：
/// <reference path="_references.js" /> var i = 0;//全局变量 //定义一个变量用来获取轮播的过程 var time; $(function () { //1.页面加载后,找到Class等于swapImg的第一个对象，让它显示，它的兄弟元素隐藏 $(".swapImg").eq(0).show().siblings().hide(); showTime(); //当鼠标放到下标上显示该图片，鼠标移走继续轮播 $(".tab").hover( function () { //获取到当前鼠标所在的下标的索引 i = $(this).index(); show(); //鼠标放上去之后，怎么停止呢？获取到变量的过程，清除轮播，把变量传进去 clearInterval(time); }, function () { showTime(); }); //要求四，当我点击左右切换 $(".btnLeft").click(function () { //1.点击之前要停止轮播 clearInterval(time); //点了之后，-1 if (i == 0) { i =6; } i--; show(); showTime(); }); $(".btnRight").click(function () { //1.点击之前要停止轮播 clearInterval(time); //点了之后，-1 if (i == 5) { i = -1; } i++; show(); showTime(); }); }); function show() { //$("#allswapImg").hover(function () //{ // $(".btn").show(); //}, function () //{ // $(".btn").hide(); //}); //fadeIn(300)淡入，fadeout(300)淡出，过滤时间0.3s $(".swapImg").eq(i).fadeIn(300).siblings().fadeOut(); $(".tab").eq(i).addClass("bg").siblings().removeClass("bg"); } function showTime() { time = setInterval(function () { i++; if (i == 6) { //只有6张图片，所以i不能超过6，如果i等于6时，我们就让它等于第一张 i = 0; } show(); }, 3000); }以上这篇简单实现轮播图效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
标签：
简单实现轮播图
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“简单实现轮播图效果的实例”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。