JavaScript
搜索
分类

原生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();
}

实现展示：

原生JS实现图片轮播 JS实现小广告插件

来源：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
    • asp之家 网络编程 m.aspxhome.com