原生JS实现图片轮播 JS实现小广告插件
作者:zxt_x 时间:2024-04-29 13:55:25
最近想用原生JS多实现一些小功能,现在写到博客里,大家可以借鉴,有问题欢迎指出。
轮播图
需求:
图片循环轮播,可点击左右切换,切换状态与<li>绑定,鼠标移入图片悬停,鼠标移出图片继续循环切换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js轮播图片</title>
</head>
<style>
.container{
width: 100%;
height: 500px;
position: relative;
}
.content{
width: 900px;
height: 450px;
position: relative;
overflow: hidden;
border: 1px solid seagreen;
margin: 0 auto;
}
.slider-img{
width: 900px;
height: 450px;
margin: 10px auto;
}
.slider-img img{
vertical-align: top;
width: 800px;
height: 400px;
margin: 10px 50px;
display: block;
}
.left{
margin-top: -300px;
margin-left: 50px;
width: 100px;
height: 100px;
}
.left img,.right img{
width: 100px;
height: 100px;
}
.right{
margin-top: -100px;
margin-right: 50px;
float: right;
width: 100px;
height: 100px;
}
.dot{
position: relative;
top: 23%;
left: 43%;
width: 50%;
}
.dotul{
width: 450px;
}
.dotul li{
width: 20px;
height: 20px;
background-color: seagreen;
list-style: none;
float: left;
border-radius: 20px;
margin-left: 15px;
z-index: 999;
cursor: pointer;
}
.active{
background-color: orangered !important;
}
</style>
<body>
<div class="container" id="container">
<div class="content" id="content">
<div class="slider-img" id="slider" >
<a href="javascript:;" >
<img src="./img/88.jpg" alt="" id="img">
</a>
</div>
</div>
<div class="btn">
<div class="left" id="left">
<a href=" ###" ><img src=""></a>
</div>
<div class="right" id="right">
<a href=" ###" ><img src=""></a>
</div>
</div>
<div class="dot">
<ul id="ul" class="dotul">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
js代码,使用时记得在html里引入JS。
var container = document.getElementById("container");
var content = document.getElementById("content");
var slider = document.getElementById("slider");
var img = document.getElementById("img");
var ul = document.getElementById("ul");
var li = document.getElementsByTagName("li");
var left = document.getElementById("left");
var right = document.getElementById("right");
var num = 0;
var timer = null;
var picList = ["./img/88.jpg","./img/are.jpg","./img/family.jpg","./img/one.jpg"];
//将li与list下标对应
//设置展示图片的方法,展示时,li的圆点与图片绑定在一起
ShowPicture = function() {
img.src = picList[num];
for(var i = 0 ; i < li.length;i++) {
li[i].className = '';
}
li[num].className = 'active';
}
//左点击,如果已经是第一张了就返回最后一张
left.onclick = function() {
num--;
if(num < 0) {
num = picList.length-1;
}
ShowPicture();
}
//右点击,若已经是最后一张返回第一张
right.onclick = function() {
num++;
if(num >= picList.length) { //3
num = 0;
}
ShowPicture();
}
//实现点击圆点跳转对应图片,将li与list下标对应list.index=li.index
for(var i = 0; i < picList.length ; i++) {
li[i].index = i;
li[i].onclick = function() {
num = this.index;
ShowPicture();
}
}
//自动轮播图片,每次调用要记得清除定时器,并在调用后回归定时器,防止时间差越变越大
autoChange = function() {
clearInterval(timer);
timer = setInterval(() => {
num++;
num %= picList.length;
ShowPicture();
}, 3000);
return timer;
}
window.onload = autoChange;
//事件
img.onmouseover = function() {
clearInterval(timer);
}
img.onmouseleave = autoChange;
广告插件
需求:页面加载结束后弹出广告,广告轮播展示,鼠标移入悬停,移出继续展示,点X可删除。
<div id="win">
<img id = "img" />
<button id = "ad_btn">X</button>
//我这是练习,叉号用的X替代,自己做项目加入时可以换成Icon
</div>
//页面加载结束弹出广告,广告切换展示,点击X可删除,
var ad = document.getElementById('win');
var img = document.getElementById('img');
var ad_btn = document.getElementById('ad_btn');
var timer;
window.onload = function () {
// clearInterval(timer);
timer = setTimeout(() => {
ad.style.display = 'block';
}, 2000);
change();
}
var count=0;
var num = 0;
var imgTimer = null;
//picture srcList
var picList = ['../img/88.jpg','../img/one.jpg','../img/family.jpg','../img/are.jpg'];
function change() {
clearInterval(imgTimer)
imgTimer = setInterval(() => {
if(count === picList.length) {
count = 0;
resetShow();
} else {
startShow();
}
count++;
}, 3000);
}
function resetShow() {
img.src = picList[0];
num = 0;
startShow();
}
function startShow() {
if(num < picList.length) {
img.src = picList[num++];
} else {
resetShow();
}
}
ad_btn.addEventListener('click' , (e)=>{
ad.style.display = 'none';
clearTimeout(timer)
});
ad.addEventListener('mouseover' , ()=>{
clearInterval(imgTimer);
})
ad.onmouseleave = function() {
change();
}
实现展示:
来源:https://blog.csdn.net/zxt_5975/article/details/120389986
标签:JS,图片轮播,广告
0
投稿
猜你喜欢
网站导航设计的6大分类
2010-07-12 18:46:00
Python实现无损放大图片的示例代码
2022-12-15 12:50:12
python有几个版本
2021-09-12 00:44:30
perl中的$a和$b介绍
2022-06-15 00:30:07
基于JavaScript 实现拖放功能
2024-04-22 22:29:20
PHP单例模式是什么 php实现单例模式的方法
2024-06-05 15:41:06
详解如何利用Python绘制科赫曲线
2023-05-02 15:26:42
mysql模糊匹配多个值的两种方法实例
2024-01-27 10:12:06
详解Python开发语言中的基本数据类型
2022-12-11 20:13:35
pandas中的ExcelWriter和ExcelFile的实现方法
2023-09-20 00:10:36
MYSQL数据库实用学习资料之常用命令集合
2009-03-06 18:12:00
python使用celery实现订单超时取消
2023-09-25 00:30:42
mysql与sqlserver的所有区别
2009-02-27 16:18:00
MHTML在ie7/vista bug 解决方案
2010-02-01 12:42:00
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2022-07-26 17:42:07
Python实战实现爬取天气数据并完成可视化分析详解
2022-01-04 09:33:44
go语言代码生成器code generator使用示例介绍
2024-05-21 10:19:29
Golang 内存管理简单技巧详解
2023-06-24 22:38:18
Tab(选项卡)的产品设计原则及应用[译]
2009-07-09 19:05:00
统一的品牌设计
2008-08-07 12:53:00