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

最近想用原生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();
}

实现展示:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 原生js和jquery实现图片轮播特效

    (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

  • js图片自动轮播代码分享(js图片轮播)

    1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left =  .onclick()2.利用数组放入图片经行轮播,技术:setInterval().没有onclick() 图片轮播12js.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http:

  • JS实现简易图片自动轮播

    本文实例为大家分享了JS实现简易图片自动轮播的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8" /> <title>自动播放选项卡</title> <style> *{ margin:0; padding:0; } .box{ width:600px; height:400px; border:1px solid

  • 最简单的JavaScript图片轮播代码(两种方法)

    通过改变每个图片的opacity属性: 素材图片: 代码一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: ; padding: ; } ul { list-style-type: non

  • JS实现简易图片轮播效果的方法

    本文实例讲述了JS实现简易图片轮播效果的方法.分享给大家供大家参考.具体如下: 这里使用JS制作简易图片轮播效果: 制作比较粗糙,使用的图片是width:660ppx,height:550px; 效果图如下: 代码部分如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; char

  • js 图片轮播(5张图片)

    演示地址:http://img.jb51.net/online/picPlayer/picplay.htm 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

  • JS实现简单图片轮播效果

    本文实例为大家分享了JS实现简单图片轮播效果的具体代码,供大家参考,具体内容如下 实现效果 左右按钮可点击左右移动显示图片进行无缝滚动 下面的小圆圈点击可跳到对应的图片索引 不进行上述操作时,图片自动轮播 html源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati

  • js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示:   1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过来的index值找到对应的li给

  • js实现轮播图效果 纯js实现图片自动切换

    本文实例为大家分享了纯js实现图片自动切换的具体代码,供大家参考,具体内容如下 1.鼠标经过的时候左右两个小按钮会自动弹出,自动播放停止,点击左右小按钮可以切换图片: 2. 鼠标离开,恢复自动播放: 3. 点击下方中间几个小圆圈,也会自动切换图片: 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&quo

  • javascript实现滚轮轮播图片

    本文实例为大家分享了javascript实现滚轮轮播图片的具体代码,供大家参考,具体内容如下 效果图如下,只能用滚轮移动到头部和尾部 思路: 根据需要展示的图片数量(view-count)与slide-container中存放的图片数量设置ul的长度,然后设置每个li的均等宽度. 每次滚轮滚动ul移动一个li的距离 HTML: <div class="slide-container" view-count="4"> <ul> <li&g

随机推荐