前端开发者| 前端开发 框架 |
| 原生app的前端开发框架 |
| 十大前端开发框架下 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title></title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
.image {
list-style: none;
}
.box {
width: 730px;
height: 454px;
position: relative;
margin: 50px auto;
}
.image li {
width: 100%;
height: 454px;
float: left;
position: absolute;
display: none;
}
.num {
position: absolute;
list-style: none;
cursor: pointer;
bottom: 20px;
left: 281px;
}
.num li {
float: left;
color: white;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: gray;
margin: 0 4px;
text-align: center;
line-height: 20px;
}
.num .current {
background-color: red;
}
.arrow {
height: 60px;
width: 30px;
position: absolute;
cursor: pointer;
background-color: black;
color: white;
opacity: 0.5;
font-size: 20px;
text-align: center;
line-height: 60px;
top: 197px;
display: none;
}
.left {
left: 0;
}
.right {
right: 0;
}
</style>
</head>
<body>
<div class=”box”>
<ul class=”image”>
<li>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/325-320×320.jpg”
/>
</li>
<li>
<img
src=”http://cdn.attach.qdfuns.com/notes/pics/201701/04/105805wn4uw06w711ulrtt.jpg”
/>
</li>
<li>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/325-320×320.jpg”
/>
</li>
<li>
<img
src=”http://cdn.attach.qdfuns.com/notes/pics/201701/04/105805ngp3lbaiibggkndm.jpg”
/>
</li>
<li>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/325-320×320.jpg”
/>
</li>
<li>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/325-320×320.jpg”
/>
</li>
</ul>
<ul class=”num”>
<li class=”current”>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class=”left arrow”><</div>
<div class=”right arrow”>></div>
</div>
<script
type=”text/javascript”
charset=”utf-8″
></script>
<script type=”text/javascript”>
var i = 0,
timer
var sum = $(‘.image li’).length
$(function() {
$(‘.image li’)
.eq(0)
.show()
$(‘.box’).hover(
function() {
$(‘.arrow’).show()
clearInterval(timer)
},
function() {
$(‘.arrow’).hide()
iLunbo()
},
)
iLunbo()
$(‘.arrow’).hover(function() {
clearInterval(timer)
})
/*左箭头控制轮播*/
$(‘.left’).click(function() {
clearInterval(timer)
if (i == 0) {
i = sum
}
i–
startLunbo()
iLunbo()
})
/*右箭头控制轮播*/
$(‘.right’).click(function() {
clearInterval(timer)
if (i == sum – 1) {
i = -1
}
i++
startLunbo()
iLunbo()
})
/*提示信息变换*/
$(‘.num>li’).hover(function() {
clearInterval(timer)
i = $(this).index()
console.log(i)
startLunbo()
})
})
/*自动轮播*/
function iLunbo() {
timer = setInterval(function() {
i++
if (i == sum – 1) {
i = -1
}
startLunbo()
}, 2000)
}
/*图片轮播和提示信息*/
function startLunbo() {
$(‘.image>li’)
.eq(i)
.fadeIn()
.siblings()
.fadeOut()
$(‘.num>li’)
.eq(i)
.addClass(‘current’)
.siblings()
.removeClass(‘current’)
}
</script>
</body>
</html>
| mvc 前端开发框架 |
| h5游戏开发前端框架 |
| 移动web前端js开发框架 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册