Shulou(Shulou.com)06/03 Report--

This article mainly explains "jQuery how to achieve a simple carousel effect," interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "jQuery how to achieve a simple carousel effect"!

First we see that it consists of background images, orientation icons and indicators. We found that background images, orientation icons, and indicators were stacked together, so we used absolute positioning for layout. We want to realize that when clicking on the direction icon, the picture will change; when clicking on the indicator, the picture will change; when not clicking, it will automatically play every 5 seconds; when not clicking, the direction icon will not be displayed.

Structure layout: Wrap 3 div with a div, and the 3 div inside show the background image part, the direction icon part and the indicator part respectively.

Title

样式代码：大家可以自己设计自己喜欢的颜色和样式。注意要用绝对定位就要遵循子绝父相的原则。想让界面只显示一张图片可以用overflow: hidden;把超出部分隐藏，在用定位后可以设置top: 50%;transform: translateY(-50%);垂直居中 display: none;

/*去除标签自带的样式*/* { margin: 0; padding: 0;} ul { list-style: none;} a { text-decoration: none;} img { width: 100%;}/*设置整个轮播图的布局*/.carousel { position: relative; margin: 40px auto; width: 1000px; height: 460px; border: 1px solid rgba(0, 0, 0, 0.1); box-sizing: border-box; /*超出部分隐藏*/ overflow: hidden;}/*设置背景图片的布局*/.content { position: absolute; z-index: 1;}/*设置左移、右移图标和指示器的布局*/.pos,.dot { position: absolute; z-index: 2; width: 100%;}/*设置左移、右移图标先垂直居中、不显示*/.pos { top: 50%; transform: translateY(-50%); display: none;}/*设置左移、右移图标的背景*/.pos > a { padding: 10px 0; border-radius: 15px; background: rgba(0, 0, 0, 0.5);}/*设置左移图标的位置*/.left { float: left;}/*设置右移图标的位置*/.right { float: right;}/*设置指示器显示的位置*/.dot { bottom: 30px; text-align: center;}/*设置指示器的背景*/.dot ul { display: inline-block; padding: 2px; background: rgba(0, 0, 0, .2); border-radius: 15px; }/*设置圆点的大小*/.dot > ul > li { float: left; margin: 5px; width: 10px; height: 10px; border-radius: 50%; background: white; cursor: pointer;}/*设置显示当前图片时指示器指示的位置*/.active { background: rgba(255, 255, 255, .6) !important;}

JavaScript代码：注意开始先把图片隐藏，默认显示第一张图，不然不管你最先点击什么图片，它都是第二张图。显示下一张图片时，上一张图片和指示器的标记要清除

$(function () { /*保存当前图片的索引*/ let index = 0; let btn = false; /*去除a标签自带的刷新*/ $('a[href=""]').prop('href', '_javascript:;'); /*开始先把图片隐藏，默认显示第一张图*/ $('.content>ul>li').hide(); $('.content>ul>li:eq(0)').show(); // 设置方向箭头图标的淡入、淡出 $('.carousel').hover(function () { $('.pos').stop().fadeIn() }, function () { $('.pos').stop().fadeOut() }) // 为左方向图标绑定点击事件 $('.left').on('click', function () { btn = true; clean(); if (index == 0) { index = 5; } else { --index; } show(); }) // 为右方向图标绑定点击事件 $('.right').on('click', function () { btn = true; clean(); if (index == 5) { index = 0; } else { ++index; } show(); }) //指示器指示功能（为指示器绑定点击事件） $('.dot li').on('click', function () { btn = true; let now = $(this).index() if (now != index) { clean(); index = now; show(); } }) //自动播放功能（定时器） setInterval(function () { if (!btn) { clean(); if (index == 5) { index = 0; } else { ++index; } show(); } else { btn = false; } }, 5000) //清除上一张图片和指示器上的指示 function clean() { $(`.content>ul>li:eq(${index})`).stop().fadeOut(); $(`.dot>ul>li:eq(${index})`).removeClass('active'); } //添加新的图片和指示器上的指示 function show() { console.log(index); $(`.content>ul>li:eq(${index})`).stop().fadeIn(); console.log($(`.content>ul>li:eq(${index})`)) $(`.dot>ul>li:eq(${index})`).addClass('active'); }})

结果：

到此，相信大家对"jQuery怎么实现简单的轮播图效果"有了更深的了解，不妨来实际操作一番吧!这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.