【jQuery】全功能轮播图的实现（本文结尾也有javascript版）
轮播图
- 图片自动切换（定时器）；
- 鼠标悬停在图片上图片不切换（清除定时器）
- 鼠标悬停在按钮上时显示对应的图片（鼠标悬停事件）
- 鼠标悬停在图片上是现实左右箭头
- 点击左键切换到上一张图片，但图片为第一张时，点击切换到最后一张图片
- 点击右键切换到下一张图片，但图片为最后一张时，点击切换到第一张图片
jquery版本3.4.1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/reset.css" />
<style>
.big{
position: relative;
width: 450px;
height: 270px;
}
#ulimg{
width: 450px;
height: 270px;
overflow: hidden;
}
#ulimg li{float: left;}
#ulimg ul{
width: 500%;
height: 270px;
display: block;
clear: both;
}
#arrows{
position: absolute;
top:90px;
z-index: 5;
width: 100%;
}
.arrow{
width: 30px;
height: 60px;
background-color: #191E2B;
font-size: 25px;
text-align: center;
line-height: 60px;
border-radius: 10px;
color: #FFFFFF;
float: left;
}
#rarrow{
float: right;
}
.big #arrows{
position: absolute;
z-index: -1;
transition: z-index 1s;
opacity: 1;
cursor: pointer;
}
.btn{
width: 20px;
height: 20px;
background-color: whitesmoke;
font-size: 18px;
text-align: center;
float: left;
margin: 10px;
border-radius: 5px;
}
#btns{
position: absolute;
z-index: 5;
top: 220px;
left: 220px;
cursor: pointer;
}
#btns .btn2{
background: orange;
}
</style>
</head>
<body>
<div class="big">
<div id="ulimg">
<ul>
<li class="now"><img src="img/01.jpg" alt=""/></li>
<li><img src="img/02.jpg" alt=""/></li>
<li><img src="img/03.jpg" alt=""/></li>
<li><img src="img/04.jpg" alt=""/></li>
<li><img src="img/05.jpg" alt=""/></li>
</ul>
</div>
<div id="arrows">
<div class="arrow"><</div>
<div class="arrow" id="rarrow">></div>
</div>
<div id="btns">
<div class="btn btn2">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
<div class="btn">4</div>
<div class="btn">5</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
<script>
var timer=setInterval(change,3000);
var index=1;
function change(){
index++;
if(index>=6){
index=1;
}
$(".btn").removeClass("btn2");
$(".btn").eq(index-1).addClass("btn2");
$("#ulimg ul").animate({
"marginLeft":"-450px"
},1000,function(){
$("#ulimg li:eq(0)").appendTo($(this));
$(this).css("marginLeft",0);
})
}
function lchange(){
$(".btn").removeClass("btn2");
index--;
if(index<=0){
index=5;
}
$(".btn").eq(index-1).addClass("btn2");
$("#ulimg li:eq(4)").prependTo($("#ulimg ul"));
}
function rchange(){
$(".btn").removeClass("btn2");
index++;
if(index>=6){
index=1;
}
$(".btn").eq(index-1).addClass("btn2");
$("#ulimg li:eq(0)").appendTo($("#ulimg ul"));
}
$(".arrow:eq(0)").click(function(){
lchange();
});
$(".arrow:eq(1)").click(function(){
rchange();
});
$(".big").mouseover(function(){
clearInterval(timer);
$("#arrows").css("zIndex",3);
})
$(".big").mouseout(function(){
clearInterval(timer);
timer=setInterval(change,3000);
$("#arrows").css("zIndex",-1);
})
$(".btn").click(function(){
$(".btn").removeClass("btn2");
$(this).addClass("btn2");
var now=$(this).html();
// console.log(now);
// console.log(index);
var btw=now-index;
if(btw<0){
btw=Math.abs(btw);
for(let i=0;i<btw;i++){
lchange();
}
}else if(btw>0){
for(let i=0;i<btw;i++){
rchange();
}
}else{
}
})
</script>
</body>
</html>
javascript版本
html+css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播图</title>
<link rel="stylesheet" href="css/reset.css" />
<style>
.big{
position: absolute;
width: 450px;
height: 270px;
}
#ulimg li{
position: absolute;
z-index: 1;
opacity: 0;
transition: opacity 1s;
}
#ulimg .now{
position: absolute;
z-index: 2;
opacity: 1;
}
#arrows{
position: absolute;
top:90px;
z-index: 3;
width: 100%;
}
.arrow{
width: 30px;
height: 60px;
background-color: #191E2B;
font-size: 25px;
text-align: center;
line-height: 60px;
border-radius: 10px;
color: #FFFFFF;
float: left;
}
#rarrow{
float: right;
}
.big #arrows{
position: relative;
z-index: 1;
transition: z-index 1s;
opacity: 0;
cursor: pointer;
}
.btn{
width: 20px;
height: 20px;
background-color: whitesmoke;
font-size: 18px;
text-align: center;
float: left;
margin: 10px;
border-radius: 5px;
}
#btns{
position: relative;
z-index: 3;
margin-top: 220px;
margin-left: 220px;
cursor: pointer;
}
#btns .btn2{
background: orange;
}
</style>
</head>
<body>
<div class="big">
<ul id="ulimg">
<li class="now"><img src="img/01.jpg" alt=""/></li>
<li><img src="img/02.jpg" alt=""/></li>
<li><img src="img/03.jpg" alt=""/></li>
<li><img src="img/04.jpg" alt=""/></li>
<li><img src="img/05.jpg" alt=""/></li>
</ul>
<div id="arrows">
<div class="arrow"><</div>
<div class="arrow" id="rarrow">></div>
</div>
<div id="btns">
<div class="btn btn2">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
<div class="btn">4</div>
<div class="btn">5</div>
</div>
</div>
<script src="js/imgs.js"></script>
</body>
</html>
js
var imgs=document.querySelectorAll("#ulimg li");
var big=document.querySelector(".big");
var index=0;
var timer=setInterval(change,1000);
var arrows=document.getElementById("arrows");
var arrowsbtns=document.getElementsByClassName("arrow");
var btns=document.getElementsByClassName("btn");
function resetbtns(){
for(var i=0;i<imgs.length;i++){
imgs[i].className="";
btns[i].className="btn";
btns[i].setAttribute("onclick","changeimg(this)");
}
}
function change(){
resetbtns();
index++;
if(index>=5){
index=0;
}
imgs[index].className="now";
btns[index].className="btn btn2";
}
big.onmouseover=function stop(){
clearInterval(timer);
arrows.style.zIndex=3;
arrows.style.opacity=1;
}
big.onmouseout=function start(){
clearInterval(timer);
timer=setInterval(change,1000);
arrows.style.zIndex=1;
arrows.style.opacity=0;
}
arrowsbtns[0].onclick=function leftChange(){
resetbtns();
index--;
if(index<=-1){
index=4;
}
imgs[index].className="now";
btns[index].className="btn btn2";
}
arrowsbtns[1].onclick=function rightChange(){
resetbtns();
index++;
if(index>=5){
index=0;
}
imgs[index].className="now";
btns[index].className="btn btn2";
}
function changeimg(obj){
resetbtns();
index=obj.innerHTML*1-1;
imgs[index].className="now";
btns[index].className="btn btn2";
}
【jQuery】全功能轮播图的实现（本文结尾也有javascript版）的更多相关文章
- jQuery淡入淡出轮播图实现
大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
- 用jQuery写的轮播图
效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...
- jQuery实现简易轮播图的效果
(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...
- 用纯css、JavaScript、jQuery简单的轮播图
完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为 img ...
- JQuery实现一个轮播图
1.HTML <div class="banner"> <div class="b_main"> <div class=" ...
- 记录一下自己用jQuery写的轮播图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery淡入淡出轮播图
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 使用JQuery制作幻灯片(轮播图）
1.首先看一下目录结构 images文件夹放所需要播放的图片. js文件夹放jquery库和main.js 2.html代码: <!DOCTYPE html> <html lang= ...
- jquery 移动端轮播图
<div class="slide"> <div class="slide-box"> <ul class="slide ...
随机推荐
- 用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中，并返回第一次出现的位置（找不到返回 -1）
用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中,并返回第一次出现的位置(找不到返回 -1) 例子: a='12';b='1234567'; // 返回 0 a='47';b='1234 ...
- 如何理解三大运营商发布的《5G消息白皮书》？
如何理解三大运营商发布的<5G消息白皮书>? 2020年4月8日中国移动.中国电信.中国联通携手华为.小米.vivo.OPPO.中兴等11家终端厂商联合发布了<5G消息白皮书> ...
- C# 数据操作系列 - 1. SQL基础操作
0.前言 前篇介绍了一些数据库的基本概念和以及一些常见的数据库,让我们对数据库有了一个初步的认识.这一篇我们将继续为C#数据操作的基础填上一个空白-SQL语句. SQL(Structured Quer ...
- 【Hadoop离线基础总结】oozie调度shell脚本
目录 1.解压官方提供的调度案例 2.创建工作目录 3.拷贝任务模板到工作目录当中去 4.随意准备一个shell脚本 5.修改模板下的配置文件 6.上传调度任务到hdfs上面去 7.执行调度任务 1. ...
- Day_09【常用API】扩展案例7_验证QQ号是否正确
需求说明 请用户输入一个"QQ号码",我们来判断这个QQ号码是否正确 要求:使用方法来完成判断功能 验证规则: 1)必须是5-12位数字: 2)首位不能是0: package co ...
- STM32 使用IQmath实现SVPWM
IQMATH TI的片子很香,做的也很好,但是成本相对ST会更高,电机控制方面,TI无疑是做的最好的方案之一,另外TI针对没有浮点运算器的定点DSP推出了IQMATH库,在使用Q格式对数据进行分析和处 ...
- Ubuntu系统make menuconfig的依赖包ncurses安装
Linux内核或者u-boot进行make menuconfig的时候,如果系统上没有安装ncurses,就会出现以下报错 *** Unable to find the ncurses librari ...
- 移动端H5支付（微信和支付宝）
我们直接进入主题吧,先说功能: 1.用户通过我们的页面输入充值帐号和金额调起支付(微信或者支付宝),支付成功返回获取支付结果. 2.微信支付成功后重定向到指定页面(没有设置重定向地址的话,默认返回调起 ...
- [poj 1743] Musical Theme 后缀数组 or hash
Musical Theme 题意 给出n个1-88组成的音符,让找出一个最长的连续子序列,满足以下条件: 长度大于5 不重叠的出现两次(这里的出现可以经过变调,即这个序列的每个数字全都加上一个整数x) ...
- [ACdream 1211 Reactor Cooling]无源无汇有上下界的可行流
题意:无源无汇有上下界的可行流 模型 思路:首先将所有边的容量设为上界减去下界,然后对一个点i,设i的所有入边的下界和为to[i],所有出边的下界和为from[i],令它们的差为dif[i]=to[i ...