点击轮播js

最新推荐文章于 2022-08-29 17:10:39 发布

桃之夭夭、

最新推荐文章于 2022-08-29 17:10:39 发布

阅读量133

点赞数

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>标准轮播图</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

.box {
width:1820px;
height: 300px;
overflow: hidden;
margin: 100px auto;
position: relative;
}

img {
width: 100%;
height: 300px;
vertical-align: top;
/*取消底边的3px */
}

ul {
width: 500%;
height: 300px;
list-style: none;
position: absolute;
left: 0;
top: 0;
}

ul li {
float: left;
}
.btn span{
width: 30px;
height: 50px;

display: inline-block;
position: absolute;
text-align: center;
line-height: 50px;
font-size: 24px;
opacity: 0.4;
cursor: pointer;
}
.btn span:hover{
opacity: 1;
color: #fff;
}

.btn .left{
left: 0;
background: #4a4a4a;
top: 125px;
}

.btn .right{
position: absolute;
right: 500px;
top: 125px;
background-color: red;
z-index: 999
}

ol{
position: absolute;
bottom: 20px;
left: 40%;
list-style: none;
}
ol li{
width: 10px;
height: 10px;
border-radius: 10px;
border: 1px solid #fff;
float: left;
margin: 0 4px;
}
</style>

<body>
<div class="box" id="box">
<ul id="inner-box">
<li><img src="banner1.jpg"></li>
<li><img src="banner2.jpg"></li>
<li><img src="banner3.jpg"></li>
<li><img src="banner4.jpg"></li>
<li><img src="banner1.jpg"></li>
</ul>
<ol id="ol">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<div class="btn">
<span class="left" id="left"><</span>
<span class="right" id="right">></span>
</div>
</div>
</body>
<script type="text/javascript">
var oBox = document.getElementById("box");
var oUl = document.getElementById("inner-box");
var oLeft = document.getElementById("left");
var oRight = document.getElementById("right");
var cur = 0; //定义一个变量用于设置left值
var timer = null; //定义一个计时器
var target = 0;
var timer1 = null;
var i = 0;
timer = setInterval(autoPlay, 2000); // 定义计时器每25毫秒执行一次
function autoPlay() { //执行每次执行函数，left值减1
if (target <= -400) {
cur = 0;
target = -100;
} else {
target -= 100;
}
sport(target);

btnBottom();
}

oRight.onclick = function (argument) {
if (target <= -400) {
cur = 0;
target = -100;
} else {
target -= 100;
}
sport(target);
btnBottom();
}

oLeft.onclick = function (argument) {
if (target > -100) {
cur -= 400;
target = -300;

} else{
target += 100;
}
sport(target);

btnBottom();
}

// 增加下标显示效果

btnBottom(i)

function btnBottom() {
i = -(target/100);
i == 4 ? i = 0 : i;
var oOl = document.getElementById("ol");
var oLi = oOl.getElementsByTagName("li");
for( j=0 ; j<oLi.length ; j++){
oLi[j].style.background = '';
}
oLi[i].style.background = '#fff';
}

// 加点击事件
var oOl = document.getElementById("ol");
var oLi = oOl.getElementsByTagName("li");
for( j=0 ; j<oLi.length ; j++){
oLi[j].index = j
oLi[j].onclick = function() {
target = -(this.index*100);
sport(target);
btnBottom()
}
}

桃之夭夭、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击轮播js

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;标准轮播图&lt;/title&gt;&lt;/head&gt;&lt;style type="text/css&quo
复制链接

扫一扫