标签：轮播 pic li 案例 tab var banner first
轮播图
代码示例：
前端：index.html 文件
左右箭头符号 网址：https://www.iconfont.cn/
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3386213_ovriqlabk7.css">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="banner">
<ul class="pic">
<!-- javascript:void(0) 空链接-->
<li><a href="javascript:void(0)"><img src="image/1.jpg" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="image/2.jpg" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="image/3.jpg" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="image/4.jpg" alt=""></a></li>
</ul>
<ul class="tab">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="btn">
<li class="left"><i class="iconfont icon-icon-test"></i></li>
<li class="right"><i class="iconfont icon-icon-test1"></i></li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="index.js"></script>
</body>
</html>
css文件
/*调整div*/
.banner{
width: 1200px;
height: 600px;
border: 1px solid red;
/*相对定位*/
position: relative;
}
/*调整li标签*/
.banner .pic li{
/*绝对定位*/
position: absolute;
left: 0;
top: 0;
}
/*调整图片*/
.banner .pic img{
width: 1200px;
height: 600px;
}
/*调整图片下的显示点*/
.banner .tab{
/*绝对定位*/
position: absolute;
/*下边框*/
bottom: 10px;
/*左边框居中*/
left: 50%;
width: 200px;
/*左外边框往左移*/
margin-left: -64px;
height: 50px;
}
/*图片显示小圆点设置*/
.banner .tab li{
border: 1px solid mediumblue;
width: 20px;
height: 20px;
float: left;
border-radius: 50%;
margin-left: 10px;
}
.banner .tab li.on{
background-color: blue;
}
/*箭头标签设置*/
.banner .btn li i{
/*绝对定位*/
position: absolute;
font-size: 100px;
top: 50%;
margin-top: -50px;
color: white;
/*隐藏*/
display: none;
}
/* hover 悬停*/
.banner:hover .btn li i{
display: block;
}
/*左箭头*/
.banner .btn li.left i{
left: 0;
}
/*右箭头*/
.banner .btn li.right i{
right: 0;
}
reset.css文件
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
/*解决浮动塌陷问题 里面的属性和属性值也是规定的*/
.ul:after{
content: "";
/*转换成块级元素*/
display: block;
/*清除所有的浮动*/
clear: both;
}
js文件
// 获取图片
var pic = $('.banner .pic li')
// 获取小圆点
var tab = $('.banner .tab li')
// 获取箭头
var btn = $('.banner .btn li')
// 获取图片长度
var len = pic.length
// 默认第一张图片
var first = 0
// 初始化
// 第一个小圆点变色
tab.eq(0).addClass('on')
// 第一张图片显示，其他图片隐藏
pic.hide().eq(0).show()
// 变化函数
function change(n) {
// 如果是之前的照片，那就去除样式，进行隐藏
tab.eq(first).removeClass('on')
// fadeOut(1000) 一秒后隐藏 第一张图片
pic.eq(first).fadeOut(1000)
first = n
// 如果是新的图片,那就添加样式，显示图片
tab.eq(first).addClass('on')
pic.eq(first).fadeIn(1000)
}
// 圆点方法
tab.click(function () {
// 点击的是第一个小圆点，则不用页面跳转
var x = $(this).index()
if (x!=first){
// 调用变化函数
change(x)
}
})
// 箭头方法
btn.click(function () {
var x = first
if ($(this).index()){
x++
if (x>len-1){
x=0
}
}else {
x--
if (x<0){
x = len-1
}
}
// 调用变化函数
change(x)
})
// 定时器 自动播放功能
auto()
function auto() {
timer = setInterval(function () {
var x = first
x++
// 在四张图片中循环 %= 取余
x %= len // 0%4 0 1%4 1 2%4 2 3%4 3 4%4 0
change(x)
},3000)
}
// 清除定时器 鼠标划入时
$('.banner').hover(function () {
clearInterval(timer)
},auto)
标签：轮播,pic,li,案例,tab,var,banner,first 来源： https://www.cnblogs.com/Pork-belly8/p/16252075.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。