jquery手写轮播图_jQuery实现简单轮播图效果

jQuery实现简单轮播图效果,图片,下标,下一张,计时器,本文

jQuery实现简单轮播图效果

易采站长站，站长之家为您整理了jQuery实现简单轮播图效果的相关内容。

本文实例为大家分享了jQuery实现简单轮播图效果的具体代码，供大家参考，具体内容如下

介绍：这里是我使用了计时器的方式实现图片每隔几秒切换然后添加了两个按钮用于上一张和下一张的切换

1、导入jQuery文件

2、设置图片的样式

*{

margin: 0;

padding: 0;

}

#box{

width: 300px;

height: 300px;

border: 2px solid red;

}

#box img{

position: absolute;

display: none;

}

#box :first-child{

display: block;

}

.page{

list-style: none;

display: flex;

width: 300px;

justify-content: space-around;

}

.page li{

border: 1px solid red;

border-radius: 50%;

width: 20px;

height: 20px;

text-align: center;

}

.active{

background: red;

}

• 1
• 2
• 3
• 4

下一张

上一张

3 进行图片的轮播实现方式

/*

绝对定位 -- 摞起来

通过下标 -- 显示当前 --其他兄弟 隐藏

*/

var index=0;

// 移动方法

function move(){

index++;

if (index>=$("#box img").length) {

index=0;

}

$("#box img").eq(index).show().siblings().hide();

$("#page li").eq(index).addClass("active").siblings().removeClass("active");

}

//计时器的实现方法

var t=setInterval(move,2000);

//鼠标移动到图片会停止离开继续轮播

$("#box").hover(function(){

clearInterval(t)

},function(){

t=setInterval(move,2000)

})

$("#page li").click(function(){

index= $(this).index() ;

$("#box img").eq(index).show().siblings().hide();

$("#page li").eq(index).addClass("active").siblings().removeClass("active");

})

//下一张的点击

$("#next").click(function(){

move();

})

//上一张的点击

$("#prev").click(function(){

index--;

// 判断如果下标超过固有图片的数量时，从头开始轮播

if (index<0) {

index=$("#box img").length-1;

}

$("#box img").eq(index).show().siblings().hide();

$("#page li").eq(index).addClass("active").siblings().removeClass("active");

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。以上就是关于对jQuery实现简单轮播图效果的详细介绍。欢迎大家对jQuery实现简单轮播图效果内容提出宝贵意见