JQ实现轮播

最新推荐文章于 2024-10-10 21:20:12 发布

Wenny_h

最新推荐文章于 2024-10-10 21:20:12 发布

阅读量413

点赞数 1

文章标签： js jq css 函数 javascript

本文链接：https://blog.csdn.net/qq_15071769/article/details/77853762

版权

这个示例展示了如何利用jQuery实现一个简单的轮播图功能。通过CSS样式定义轮播图布局，JavaScript处理图片切换、导航点高亮以及自动轮播效果。当鼠标移入和移出轮播图区域时，控制自动轮播的启动和停止，并显示或隐藏切换按钮。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>jquery轮播</title>
<style>
*{padding: 0;margin: 0;}
#wrap{width: 100%;margin: 10px auto;overflow: hidden;position: relative;}
#wrap .div_img_b img{width: 100%;float: left;display: none;}
#wrap .div_img_b img.on{display: block;}

#wrap .div_span_s{height: 30px;position: absolute;bottom: 10px;margin: 10px;left: 45%;}
#wrap .div_span_s span{width: 20px;height: 20px;background: #fff;border-radius: 50%;float: left;display: inline-block;margin-right: 10px;cursor: pointer;}
#wrap .div_span_s span.on{background: red;}

#wrap .click_btn{color: red;position: absolute;top: 43%;background: #FFFFFF;opacity: 0.4;height: 60px;width: 40px;line-height: 60px;text-align: center;}
#pre{left: 0;}
#next{right: 0;}
</style>
</head>

<body>
<div id="wrap">
<div class="div_img_b">
<img class="on" src="images/lifestyle---sunglasses-1502708575.jpg" />
<img src="images/lifestyle---women-fashion-1502708541.jpg"/>
<img src="images/lifestyle---women-fashion-1502764307.jpg" />
</div>
<div class="div_span_s">
<span class="on"></span>
<span></span>
<span></span>
</div>
<a href="#" class="click_btn" id="pre"></a>
<a href="#" class="click_btn" id="next"></a>
</div>

</body>

<script src="js/jquery-3.2.1.min.js"></script>
<script>
var div_span_sLength = $(".div_span_s span").length;
var index = 0;
var timer;
$(".div_span_s span").click(function() {
$(this).addClass("on").siblings().removeClass("on");
index = $(this).index();
$(".div_img_b img").eq(index).addClass("on").siblings().removeClass("on");
})

//点击上张，下张图片显示
$("#next").click(function() {
index++;
if(index >= div_span_sLength) {
index = 0;
}
common();

})

$("#pre").click(function() {
index--;
if(index < 0) {
index = div_span_sLength - 1;
}
common();

})

//自动轮播
timer = setInterval("setIntervalTimer()", 2000);

//轮播定时方法
function setIntervalTimer() {
index++;
if(index >= div_span_sLength) {
index = 0;
}
common();
}

//鼠标离开自动轮播
$("#wrap").mouseleave(function() {
timer = setInterval("setIntervalTimer()", 2000);
$("#pre").hide();
$("#next").hide();
})
//鼠标移上去停止自动轮播
$("#wrap").mouseover(function() {
clearInterval(timer);
$("#pre").show();
$("#next").show();
})

//共用代码
function common() {
$(".div_span_s span").eq(index).addClass("on").siblings().removeClass("on");
$(".div_img_b img").eq(index).addClass("on").siblings().removeClass("on");
}

//页面加载完默认左右箭头隐藏
$(function() {
$("#pre").hide();
$("#next").hide();
})
</script>
</html>