如何使用JQ封装轮播图实现自动轮播、点击切换等效果..

css部分：

*{margin: 0;padding: 0;}#banner{width: 800px;height: 500px;margin: 30px auto;position: relative;overflow: hidden;}#box_wrap img{width: 100%;height: 500px;   cursor: pointer;    }.listdian{width: 150px;position: absolute;bottom: 20px;right: 30px;display: flex;justify-content: space-around;}.listdian span{width: 20px;height: 20px;border: 1px solid;text-align: center;border-radius: 50%;background: pink;color: white;cursor: pointer;}.anniu{position: relative;  cursor: pointer;}.anniu span{font-size: 50px;color: rgba(250, 150, 195, 0.5);background: rgba(0, 0, 0, 0.2);}.anniu .left{position: absolute;right: 95%;bottom: 230px;}.anniu .right{position: absolute;left: 95%;bottom: 230px;    }.listdian>.active{background-color: red;}

html部分：

     <div id="banner"><!--图片部分--><div id="box_wrap"><img class="item" src="./timg (1).jpg"  alt=""><img class="item" src="./timg (2).jpg" alt=""><img class="item" src="./timg (3).jpg" alt=""><img class="item" src="./timg (4).jpg" alt=""><img class="item" src="./timg.jpg" alt="">  </div><!--圆点部分--><div class="listdian"><span class="tab" class="active">1</span><span class="tab">2</span><span class="tab">3</span><span class="tab">4</span><span class="tab">5</span></div><!--按钮部分--><div class="anniu"><span class="left">&lt;</span><span class="right">&gt;</span></div></div>

<script src="./jquery-3.4.1.min.js"></script><script>$(document).ready(function(){var i=0;var timer;$(".item").eq(0).show().siblings(".item").hide();$(".tab").eq(0).addClass("active").siblings().removeClass("active")showTime();$("#box_wrap>.item").hover(function(){clearInterval(timer);  },function(){showTime();});$(".left").click(function(){clearInterval(timer);                  if(i<1){i=5}i--;show();                 })$(".right").click(function(){clearInterval(timer);if(i==4){i=-1;}i++;show();                  })function showTime(){timer=setInterval(function(){show();i++;if(i==5){i=0;}},2000);}$(".tab").click(function(){i=$(this).index()clearInterval(timer);show()})function show(){$(".item").eq(i).fadeIn(0).siblings(".item").fadeOut(0);$(".tab").eq(i).addClass("active").siblings(".tab").removeClass("active");}})</script>

如何使用JQ封装轮播图实现自动轮播、点击切换等效果..相关推荐

Html+CSS+JS轮播图：手动轮播，自动轮播
演示效果轮播图代码: <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
使用html和js实现的一个简单小练习轮播图.大概功能主要是: 1.使用时间函数自动切换图片: 2.在图片及按钮及小圆点的父节点身上绑定事件代理,添加mouseenter及mouseleave事件类型 ...
js轮播图（自动轮播箭头轮播序号轮播）
图片路径用自己的就好 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
经典案例重点案例：点名表，JS正则验证全选、全不选、反选，点击可以实现三个功能，轮播图字符串截取以及替换，图片切换
重点案例: 点击开始点名,框内的名字转动点击结束点名,框内的转动停止,并出现一个随机的学生姓名 <!DOCTYPE html> <html> <head> ...
antd 轮播图样式_React - AntD 走马灯组件前后切换面板
1.先用AntD的图标来当做轮播图点击的两个按钮,并将Carousel与按钮放在一个父级下. 轮播图切换按钮 (this.slider = el)}> 1 2 3 4 2.轮播图的配置lunbo ...
bootstrap轮播图原点变为方块_JS实现无缝切换轮播图(自动+手动)
一.背景说起轮播图,大家应该都不陌生,各大购物网站和面试题里都能看到它的身影. 实现上也并不困难,而写这篇文章是想整理一下自己心血来潮写的代码,以及实现过程中的一些思考,大家也可以顺便复习巩固一下. ...
html点击小图轮播图,使用纯CSS实现点击轮播图效果，无js。
使用纯CSS实现图片轮播效果首先我们来看一下所实现轮播图的最终效果: 轮播图效果接下来为html+css代码部分: 以下为HTML代码部分: 以下为CSS代码部分: *{ margin:0; p ...
vue element ui 走马灯轮播图（简单几句话实现自动缩放效果）
实现效果 element ui 简单实现轮播图本文,中间叙述的是过程,完整代码在最后面. 最近在写公司官网,用的是element ui 走马灯组件写的轮播图,ui想要自动缩放的效果,如上视频.在这里 ...
uniapp轮播组件之自动轮播
文章目录[隐藏] 前言实现代码最终效果(可惜只有静态图) 前言这两天实践了下 Uniapp 的轮播组件,官方提供了两种轮播组件: 一种是基础轮播组件:另一种是一个复杂的轮播组件. 但是在引用复杂 ...

如何使用JQ封装轮播图实现自动轮播、点击切换等效果..

如何使用JQ封装轮播图实现自动轮播、点击切换等效果..相关推荐

最新文章

热门文章

如何使用JQ封装轮播图 实现自动轮播、点击切换等效果..

如何使用JQ封装轮播图 实现自动轮播、点击切换等效果..相关推荐

最新文章

热门文章

如何使用JQ封装轮播图实现自动轮播、点击切换等效果..

如何使用JQ封装轮播图实现自动轮播、点击切换等效果..相关推荐