图片轮播 javascript

最新推荐文章于 2024-09-06 22:20:29 发布

weixin_58350436

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量160

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_58350436/article/details/128983305

版权

css ：

height: 20px;

border: 2px solid white;

margin: 10px;

border-radius: 50%;

display: block;

float: left;

}

.xia{

position: absolute;

top: 90%;

left: 20%;

}

.active{

background-color: red;

}

导入imgRotation.js ,代码如下

var interval ; // 定时器的名字

var index = 0 ; // 图片元素的下标

// 图片的个数

var imgLength = document.getElementsByTagName("img").length;

// 切换下一张图片

function nextImg(){

index++ ;

addStyle();

}

// 切换上一张图片

function prevImg(){

index-- ;

addStyle();

}

// 给当前元素设置样式

function addStyle(){

$("img").eq(index % imgLength).fadeIn(); // 当前图片淡入

$("img").eq(index % imgLength).siblings().fadeOut();// 其他兄弟元素淡出

$("span").eq(index % imgLength).addClass("active");

$("span").eq(index % imgLength).siblings().removeClass("active");

}

// 鼠标移入的时候暂停切换

$(".wai").mouseover( function(){

clearInterval(interval); // 停止定时器

});

// 移出是继续轮播

$(".wai").mouseout( function(){

action();

});

// 切换上一张图片

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

prevImg();

});

// 切换下一张图片

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

nextImg();

});

// 定义周期性函数

function action(){

interval = setInterval(function(){

nextImg();

} , 1000);

}

action();

html：

<!DOCTYPE html>

<html>

<head>

<style>

.wrapper {

width: 600px;

height: 350px;

border: 1px solid red;

position: relative;

margin: auto;

}

/* 5张图片叠加到一块 */

.wrapper img {

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

display: none;

}

.wrapper img:nth-of-type(1) {

display: block;

}

/* 小圆点 */

.btn {

width: 150px;

display: flex;

justify-content: space-around;

position: absolute;

left: 225px;

bottom: 10px;

z-index: 100

}

.btn span {

display: block;

width: 15px;

height: 15px;

border: 3px solid white;

border-radius: 50%;

}

/* 左右箭头 */

.wrapper a {

text-decoration: none;

font-size: 50px;

color: red;

position: absolute;

top: 35%;

}

.wrapper a:nth-of-type(1) {

left: 10px;

}

.wrapper a:nth-of-type(2) {

right: 10px;

}

.active {

background-color: red;

}

</style>

</head>

<body>

</div>

</div>

</div>

var index=0;

// 点击上一张

$("a:first").click(function(){

prev_pic();

})

// 点击下一张

$("a:last").click(function(){

next_pic();

})

// 悬浮停止

$(".wrapper").mouseover(function(){

clearInterval(id);

});

$(".wrapper").mouseout(function(){

autoplay();

})

// 下一张

function next_pic(){

index++;

if(index>4){

index=0;

}

addStyle();

}

// 上一张

function prev_pic(){

index--;

if(index<0){

index=4;

}

addStyle();

}

// 控制图片显示隐藏,小圆点背景色

function addStyle(){

$("img").eq(index).fadeIn();

$("img").eq(index).siblings().fadeOut();

$("span").eq(index).addClass("active");

$("span").eq(index).siblings().removeClass("active");

}

// 自动轮播

var id;

autoplay();

function autoplay(){

id=setInterval(function(){

next_pic();

},1000)

}

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

.wrapper {

width: 600px;

height: 350px;

border: 1px solid red;

position: relative;

margin: auto;

}

/* 5张图片叠加到一块 */

.wrapper img {

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

display: none;

}

.wrapper img:nth-of-type(1) {

display: block;

}

/* 小圆点 */

.btn {

width: 150px;

display: flex;

justify-content: space-around;

position: absolute;

left: 225px;

bottom: 10px;

z-index: 100

}

.btn span {

display: block;

width: 15px;

height: 15px;

border: 3px solid white;

border-radius: 50%;

}

/* 左右箭头 */

.wrapper a {

text-decoration: none;

font-size: 50px;

color: red;

position: absolute;

top: 35%;

}

.wrapper a:nth-of-type(1) {

left: 10px;

}

.wrapper a:nth-of-type(2) {

right: 10px;

}

.active {

background-color: red;

}

</style>

</head>

<body>

</div>

</div>

</div>

var index=0;

// 点击上一张

$("a:first").click(function(){

prev_pic();

})

// 点击下一张

$("a:last").click(function(){

next_pic();

})

// 悬浮停止

$(".wrapper").mouseover(function(){

clearInterval(id);

});

$(".wrapper").mouseout(function(){

autoplay();

})

// 下一张

function next_pic(){

index++;

if(index>4){

index=0;

}

addStyle();

}

// 上一张

function prev_pic(){

index--;

if(index<0){

index=4;

}

addStyle();

}

// 控制图片显示隐藏,小圆点背景色

function addStyle(){

$("img").eq(index).fadeIn();

$("img").eq(index).siblings().fadeOut();

$("span").eq(index).addClass("active");

$("span").eq(index).siblings().removeClass("active");

}

// 自动轮播

var id;

autoplay();

function autoplay(){

id=setInterval(function(){

next_pic();

},1000)

}

</script>

</body>

</html>

weixin_58350436

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片轮播 javascript

111
复制链接

扫一扫