jQuery写轮播图

用jQuery做轮播，代码比js少了很多，具体实现和效果看如下展示。

轮播图-jQuery

友情提示：写代码前准备好照片素材和jQuery包。

详细代码展示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>jQuery-轮播-小孙姐姐</title><style>.wrapper {width: 600px;height: 350px;border: 1px solid red;position: relative;margin: 50px auto;}/* 5张图片叠加到一块 */.wrapper img {width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: none;}.wrapper img:nth-of-type(1) {display: block;}/* 小圆点 */.btn {width: 150px;display: flex;justify-content: space-around;position: absolute;left: 225px;bottom: 10px;z-index: 100}.btn span {display: block;width: 15px;height: 15px;border: 3px solid white;border-radius: 50%;}/* 左右箭头 */.wrapper a {text-decoration: none;font-size: 50px;color: red;position: absolute;top: 35%;}.wrapper a:nth-of-type(1) {left: 10px;}.wrapper a:nth-of-type(2) {right: 10px;}.active {background-color: red;}</style></head><body><div class="wrapper"><div class="contain"><img src="./image/1.jpg" alt=""><img src="./image/2.jpg" alt=""><img src="./image/3.jpg" alt=""></div><div class="btn"><span class="active"></span><span></span><span></span></div><a href="javascript:void(0);">&lt;</a><a href="javascript:void(0);">&gt;</a></div><script src="./jquery-3.1.1.min.js"></script><script>var index=0;// 点击上一张$("a:first").click(function(){prev_pic();})// 点击下一张$("a:last").click(function(){next_pic();})// 悬浮停止$(".wrapper").mouseover(function(){clearInterval(id);});$(".wrapper").mouseout(function(){autoplay();})// 下一张function next_pic(){index++;if(index>3){index=0;}addStyle();}// 上一张function prev_pic(){index--;if(index<0){index=3;}addStyle();}// // 控制图片显示隐藏,小圆点背景色function addStyle(){$("img").eq(index).fadeIn();$("img").eq(index).siblings().fadeOut();$("span").eq(index).addClass("active");$("span").eq(index).siblings().removeClass("active");}// 自动轮播var id;autoplay();function autoplay(){id=setInterval(function(){next_pic();},3000)}</script></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/22054.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！