首页轮播图的制作方法 html+css+js 引入jquery.min.js框架不需要点击自动轮播使用的代码工具为 sublime text3...-优快云博客

本文介绍了一种使用HTML、CSS及jQuery实现的自动轮播图效果。通过设置定时器自动切换图片，并利用导航按钮手动控制轮播。文章提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

它是一个比较活的轮播图，不需要点击自动轮播

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习轮播图</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;/*去li圆点*/
}

.pic {
width: 1200px;
height: 350px;
overflow: hidden;/*溢出隐藏 */
margin: 10px auto;/*居中向下10px*/
}
.pic ul {
width: 3600px;
position: relative;/*相对定位*/
}
.pic ul li {
float: left;/*浮动让它变成一排*/
}

.long {
width: 500px;
height: 50px;
}

.long ul li {
width: 71px;
height: 9px;
background-color: #000;
display: inline-block;
position: relative;
top: -38px;
left: 858px;
margin-right: 20px;

}

.long .action {
background-color: #007ae1;
}
</style>
<body>
<div class="content">
<div class="pic">
<ul>
<li><a href="#"><img src="images/index_02.png"></li>
<li><a href="#"><img src="images/index_03.png"></li>
<li><a href="#"><img src="images/index_04.png"></li>
</ul>
</div>
<div class="long">
<ul>
<li class="action"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function(){
//声明一个变量=找到图片的.pic ul
//声明一个变量=找到图片的pic ul li
//声明一个变量=找到长方条的long ul

var imgUL = $ (".pic ul ");
var imgULli = $(".pic ul li");
var longUI = $ (".long ul li");
var Awidth=imgULli.eq(0).width();

//用来计数
var count=0; //声明变量count=0
var time=null; //声明时间time=null 空
longUI.on('click',function(){ //找到长方条按钮点击事件
$(this).addClass('action').siblings().removeClass('action');//addClass()
var index =$(this).index();
content=index;
imgUL.animate({"left":-content*Awidth});
})

time = setInterval(function(){ //setInterva()时间毫秒
count++;
if (count>longUI.length-1){
count=0;
}

longUI.eq(count).trigger('click');//选择长方条按钮 trigger()触发某个事件
},2000)

})

</script>
</body>
</html>

转载于:https://www.cnblogs.com/tangtangsimida/p/7455833.html