//首先要在head中引入jq,大家可自行下载到项目中
<script src="./js/jquery.min.js"></script>
//html代码
<div class="banner">
<div class="pic">
<ul>
<li><a><img src="./images/banner-1@2x.png" class="banner_1"></a></li>
<li><a> <img src="./images/banner-2.jpg" class="banner_1"></a></li>
<li><a> <img src="./images/banner-3.jpg" class="banner_1"></a></li>
<li><a> <img src="./images/banner-4.jpg" class="banner_1"></a></li>
</ul>
<!--箭头-->
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
<div class="dot">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
//js代码
<!-- 轮播图 -->
<script>
$(function() {
var num = 0;
var timer;
var hasStarted = false;
$(".banner .arrow-left").click(function() {
stop();
--num;
num = num % $(".pic li").size();
showpic(num);
});
$(".banner .arrow-right").click(function() {
stop();
++num;
num = num % $(".pic li").size();
showpic(num);
});
function showpic(index) {
$(".pic li").eq(index).show().siblings().hide();
$(".dot li").eq(index).css("background", "#f8605f").siblings().css("background", "#fff");
}
$(".dot li").hover(function() {
stop();
num = $(this).index();
$(".pic li").eq(num).show().siblings().hide();
$(this).css("background", "#f8605f").siblings().css("background", "#fff");
}, start);
$(".pic li").each(function(index) {
$(this).hover(function() {
stop();
// show(index);
num = index + 1;
}, start)
});
function start() {
if (!hasStarted) {
hasStarted = true;
timer = setInterval(function() {
showpic(num);
num++;
if (num == $(".pic li").size()) {
num = 0;
}
}, 2000);
}
}
function stop() {
clearInterval(timer);
hasStarted = false;
}
start();
});
</script>
jq+html+css实现普通的轮播图
最新推荐文章于 2024-02-20 00:03:41 发布
关键词由CSDN通过智能技术生成