jq不滑动变化的轮播，定时替换内容

最新推荐文章于 2022-04-14 18:37:38 发布

avoidaily

最新推荐文章于 2022-04-14 18:37:38 发布

阅读量113

点赞数

分类专栏：工作笔记

本文链接：https://blog.csdn.net/qq_43459224/article/details/102989145

版权

工作笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #banner {
	width:100%;
	height:1000px;
	position:relative;
}
#banner ul {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}
#banner ul li a {
	display:block;
}
#banner ul li img {
	width:1620px;
	height:1000px;
    /* width:520px;
    height:500px; */
}
#banner ul li {
	position:absolute;
	left:0px;
	top:0px;
}
/* #banner .tagle {
	width:1600px;
	height:57px;
	position:absolute;
	z-index:999;
	top:50%;
	margin-top:-40px;
	left:50%;
	margin-left:-800px;
}
#banner .tagle #prev {
	width:45px;
	height:60px;
	background:url(../img/prev.png);
	float:left;
	background-size:100% 100%;
}
#banner .tagle #next {
	width:45px;
	height:60px;
	background:url(../img/next.png);
	float:right;
	background-size:100% 100%;
} */
/* #banner #num {
	width:186px;
	height:20px;
	position:absolute;
	z-index:999;
	left:50%;
	margin-left:-78px;
	bottom:42px;
}
#banner #num span {
	width:20px;
	height:20px;
	border-radius:20px;
	border:1px solid #e6ddd0;
	behavior:url(PIE.htc);
	margin-left:16px;
	margin-right:16px;
	display:inline-block;
}
#banner #num span:hover {
	background:#ffffff;
	cursor:pointer;
}
#banner #num span.on {
	border:1px solid #e6ddd0;
	background:#ffffff;
} */

    </style>
</head>
<script src="../res/static/js/jquery-1.11.3.js"></script>
<body>
    <div id="banner">
        <ul>
            <li>
                <a><img  src="./img/1.png"></a>
            </li>
            <li>
                <a><img src="./img/2.png"></a>
            </li>
            <li>
                <a><img src="./img/3.png"></a>
            </li>
        </ul>
        <!-- <div class="tagle">
            <a href="javascript:;" id="prev"></a>
            <a href="javascript:;" id="next"></a>
        </div> -->
        <!-- <div id="num">
            <span class="on"></span>
            <span></span>
            <span></span>
        </div> -->
    </div>
</body>

<script>
$(function() {

/*轮播图*/
//隐藏第一张以外的图片
$('#banner>ul>li:gt(0)').hide();
var n = 0;
var len = $('#banner ul li').length; //获取的是li的长度 数量
var t;

function play() {
    //alert(n)
    $('#banner ul li').eq(n).show().siblings().hide();
    //给当前的span增加on样式，移除
    // $('#num span').eq(n).addClass('on').siblings().removeClass('on');
}

function autoPlay() {
    //自动播放
    t = setInterval(function() {
        //alert(1)	
        n++;
        if (n >= len) {
            n = 0;
        }
        play();
    }, 1000)
}
//alert(len)
autoPlay(); //调用自动播放函数

//鼠标经过banner停止播放，移开继续播放
// $('#banner').hover(function() {
//     clearInterval(t)
// }, function() {
//     autoPlay();
// })

// //点击下一张
// $('#next').click(function() {
//     n++;
//     if (n >= len) {
//         n = 0;
//     }
//     play();
// })
// //点击上一张
// $('#prev').click(function() {
//     if (n <= 0) {
//         n = len;
//     }
//     n--;
//     play();
// })

// //点击数字显示相应的图片
// $('#num span').each(function(index) {
//     //alert(index)
//     $(this).click(function() {
//         //alert(index)	
//         n = index;
//         play();
//     })
// });


})
</script>
</html>

avoidaily

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq不滑动变化的轮播，定时替换内容

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫

专栏目录