首页 > 其他分享> > 案例：轮播图

案例：轮播图

2022-05-10 09:01:27 作者：互联网

轮播图

代码示例：

前端：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