本文主要和大家分享jq和css自制轮播效果代码，希望能帮助到大家。
html部分：
这是我定义的第一张图这是我定义的第二张图这是我定义的第三张图
登录后复制
css部分：
.banner1 {width: 100%;height: 4rem;overflow: hidden;margin: 0 auto;position: relative;}.imgbox1 {height: 7.5rem;position: absolute;left: 0;overflow: hidden;background: #fff;}.imgbox1 img {width: 100%;float: left;}
登录后复制
.title1 {width: 100%;position: absolute;bottom: 0px;padding: .25rem .2rem;box-sizing: border-box;background: rgba(255, 255, 255, 0.8);}.title1>span {color: #000000;display: block;text-align: center;}.circle1 {width: 1.5rem;margin: .2rem auto 0;}.circle1 li {width: .2rem;height: .2rem;margin: .1rem 5px;cursor: pointer;display: inline-block;background: #CCCCCC;border-radius: 50%;}.circle_active {background: #575757 !important;}
登录后复制
js部分：
var imgindex=$('.imgbox1').find('a').index() var titleindex=$('.title1').find('span').index(); $(window).ready(function(){ $('.title1').find('span').eq(0).show(); $('.title1').find('span').eq(0).siblings().hide(); })$('.circle1').on('click','li',function(){var circleindx=$(this).index();imgindex=circleindx;titleindex=circleindx;$(this).addClass('circle_active');$(this).siblings().removeClass('circle_active');$('.imgbox1').find('a').eq(imgindex).show(300);$('.imgbox1').find('a').eq(imgindex).siblings().hide();$('.title1').find('span').eq(titleindex).show();$('.title1').find('span').eq(titleindex).siblings().hide(); }) function autoplay(){ timer=setInterval(function(){ imgindex++; var circles=$('.circle1').find('li'); if(imgindex>circles.length-1){ imgindex=0; } circles.eq(imgindex).trigger("click"); },2000); } autoplay()
登录后复制
相关推荐：
react轮播图组件react-slider-light详解
立即学习“前端免费学习笔记（深入）”；
react轮播图组件react-slider-light详解
立即学习“前端免费学习笔记（深入）”；
react轮播图组件react-slider-light详解
立即学习“前端免费学习笔记（深入）”；
以上就是jq和css自制轮播效果代码分享的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2785654.html
