廣告輪轉(zhuǎn)
html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>廣告輪轉(zhuǎn)</title>
<style>
</style>
</head>
<body>
<div id="adv">
<img src="../img/slide-1.jpg" wdith='900px' height="350px">
<ul>
<li><a href="" class="selected">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</div>
<script src="../js/jquery.min.js"></script>
<script>
</script>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
body {
font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}
a {
text-decoration: none;
}
a:link,
a:visited {
background-color: rgba(220, 213, 213, .3);
cursor: pointer;
}
#adv {
position: relative;
top: 50px;
margin: 0 auto;
text-align: center;
}
#adv>ul {
display: block;
list-style: none;
border-radius: 10px;
position: absolute;
top: 310px;
left: 48%;
height: 26px;
width: 120px;
text-align: center;
font-size: 0;
margin-left: -30px;
background-color: rgba(255, 255, 255, .5);
}
#adv>ul>li {
text-align: center;
height: 20px;
width: 20px;
display: inline-block;
margin: 3px;
}
li a {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: lightgray;
}
a.selected {
background-color: lightcoral;
}
#adv li>a:hover {
background-color: lightcoral;
text-decoration: none;
}
js
$(() => {
// 廣告輪播
let imgList = [
'slide-1', 'slide-2',
'slide-3', 'slide-4'
]
let img = $('#adv>img')
let anchors = $('#adv>ul>li>a')
let index = 0
function switchAdvTimer() {
return setInterval(() => {
index += 1
index = index % imgList.length
img.attr('src', `../img/${imgList[index]}.jpg`)
img.css({
'display': 'none',
'visibility': 'visible'
}).fadeIn(1500)
anchors.removeClass('selected')
$(anchors[index]).addClass('selected')
}, 2500);
}
let timerId = switchAdvTimer()
anchors.click((evt) => {
evt.preventDefault()
})
anchors.on('mouseover', (evt) => {
clearInterval(timerId)
let i = $(evt.target).text() - 1
img.attr('src', `../img/${imgList[i]}.jpg`)
img.css({
'display': 'none',
'visibility': 'visible'
}).fadeIn(800)
anchors.removeClass('selected')
$(anchors[i != imgList.length ? i : imgList.length - 1]).addClass('selected')
})
anchors.mouseout((evt) => {
index = $(evt.target).text() - 1
timerId = switchAdvTimer()
})
})
垃圾廣告
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#adv {
width: 200px;
height: 200px;
background-color: blue;
color: yellow;
position: fixed;
right: 50px;
top: 50px;
}
#adv>button {
width: 24px;
height: 24px;
float: right;
}
</style>
</head>
<body>
<div id="adv">
廣告位
<button>X</button>
</div>
<script src="../js/utils.js"></script>
<script src="../js/jquery.min.js"></script>
<script>
$(() => {
let times = 3
let adv = $('#adv')
let close = $('#adv>button')
close.click((evt) => {
if (times == 0) {
if(confirm('真的要關(guān)閉嗎?')){
adv.css('visibility', 'hidden')
return
}else{
times = 3
}
}
adv.css({
'right': `${randomInt(10, 80)}px`,
'top': `${randomInt(10, 80)}px`
})
open('https://www.baidu.com')
times -= 1
})
})
</script>
</body>
</html>
