JS案例----轮播图

最新推荐文章于 2024-05-01 02:45:00 发布

爱吃炒凉薯片的豆豆

最新推荐文章于 2024-05-01 02:45:00 发布

阅读量1.8k

点赞数

文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/weixin_53163211/article/details/127093323

版权

全部代码

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

list-style: none;

box-sizing: border-box;

}

.container {

width: 400px;

height: 300px;

position: relative;

margin: 0 auto;

overflow: hidden;

}

.swiper {

width: 2400px;

height: 300px;

position: absolute;

left: -400px;

}

.swiper img {

float: left;

width: 400px;

height: 300px;

}

@font-face {

font-family: "arraw";

src: url(font_42fpmwctfp1/iconfont.ttf)

}

.but {

width: 30px;

height: 30px;

line-height: 30px;

text-align: center;

font-family: "arraw";

font-size: 20px;

background-color: rgba(255, 255, 255, .5);

position: absolute;

top: 135px;

color: white;

}

#prev {

left: 10px;

}

#next {

right: 10px;

}

.dots{

width: 400px;

height: 30px;

/* background-color: pink; */

position: absolute;

bottom: 0;

display: flex;

justify-content: center;

align-items: center;

}

.dot{

width: 10px;

height: 10px;

background-color: white;

border-radius: 50%;

margin: 0 15px;

}

.dot:hover{

cursor: pointer;

}

.checked{

background-color: skyblue;

}

</style>

</head>

<body>

</div>

</div>

</body>

var dSwiper = document.querySelector('.swiper')

var dDots=document.querySelectorAll('.dot')

//1.自动每五秒自动轮播到下一张

//2.手动点击按钮发生动作

var timer = null //每五秒

var swiperTimer = null //切换

var shouwIndex = 1 //当前显示图片的下标

var myWidth = 400 //单位宽度

var autoCount = 0 //自动轮播计数

//自动轮播

timer = setInterval(function () {

autoCount++

if (autoCount === 10) {

autoCount = 0

next()

}

}, 500)

//下一张

function next() {

toScroll(shouwIndex + 1)

}

//上一张

function prev() {

toScroll(shouwIndex - 1)

}

//为显示点添加点击事件

//轮播函数

function toScroll(targetIndex) {

autoCount = 0

//完成两张图片的切换

var s = -1 * targetIndex * myWidth - dSwiper.offsetLeft //路程

var t = 20 //swiperTimer执行20次完成图片切换

var v = s / t

var count = 0 //计数

clearInterval(swiperTimer)

swiperTimer = setInterval(function () {

count++

var l = dSwiper.offsetLeft + v

dSwiper.style.left = l + 'px'

if (count === t) {

//完成了切换

clearInterval(swiperTimer)

if (targetIndex === 0) {

//需要跳转到倒数第二张

targetIndex = 4

} else if (targetIndex === 5) {

//需要跳转到第二张

targetIndex = 1

}

//防止出现偏差

dSwiper.style.left = -1 * targetIndex * myWidth + 'px'

//上一个点

dDots[shouwIndex-1].className="dot"

//更改showIndex的值

shouwIndex = targetIndex

//当前点

dDots[shouwIndex-1].className="dot checked"

}

}, 30)

}

</script>

</html>

效果展示

爱吃炒凉薯片的豆豆

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS案例----轮播图

var s = -1 * targetIndex * myWidth - dSwiper.offsetLeft //路程。var t = 20 //swiperTimer执行20次完成图片切换。var shouwIndex = 1 //当前显示图片的下标。var swiperTimer = null //切换。var autoCount = 0 //自动轮播计数。//需要跳转到第二张。var count = 0 //计数。var timer = null //每五秒。-- 显示点 -->
复制链接

扫一扫