javascript图片轮播技术动态实现

最新推荐文章于 2024-05-07 03:39:03 发布

小圣贤君

最新推荐文章于 2024-05-07 03:39:03 发布

阅读量1w

点赞数 10

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/zhongguohaoshaonian/article/details/52597022

版权

JavaScript 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

我们经常会在网页中见到轮播的图片，如京东主页面中图片自动更换。我们在这里对这一技术进行实现，主要能够使图片自动进行轮播，数字标签随着图片一同更换，鼠标移动到数字标签上，相应的图片停留，鼠标在整个图片区域内时，图片停止轮播，鼠标离开图片区域，图片继续轮播的功能。请看示例代码：
这是html结构代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style: none;
            }
            .container{
                width:1120px;
                margin: 0 auto;
            }
            .lunBo{
                width: 730px;
                margin:0 auto;
                position: relative;
            }
            .lunBo .banner .item{
                display: none;
            }
            .lunBo .banner .item.active{
                display: block;
            }
            .lunBo .banner .item a{
                border: none;
            }
            ul{
                position: absolute;
                overflow: hidden;
                bottom: 20px;
                right: 20px;
            }
            ul li{
                float: left;
                width: 30px;
                font:bold 16px/30px "微软雅黑";
                background-color: #000;
                color: #fff;
                text-align: center;
                cursor: default;
                border-radius: 15px;

            }
            ul li+li{
                margin-left: 10px;
            }
            ul li.active{
                background-color: #fff;
                color: red;
            }   
        </style>
    </head>
    <body>
        <div class="container">
            <div class="lunBo" id="lunBo">
                <div class="banner" id="banner">

                </div>
                <ul id="list">

                </ul>
            </div>
        </div>
        <script src="lunBo.js"></script>
    </body>
</html>

这是javascript代码：

/*
    思路：
        预备：  生成的过程
                定义数据： 和轮播图相关的数据
                图片和点击图片将要跳转的路径
                数据怎么组织？
                    //一组数据  一组中每一项 图片和跳转的路径
                    [{imgSrc:"01.jpg",targetSrc:"http://www.baidu.com"},{imgSrc:"01.jpg",targetSrc:"http://www.baidu.com"},{imgSrc:"01.jpg",targetSrc:"http://www.baidu.com"}]
                    //JSON
        第一步：当页面加载完后，获取所要操作的节点对象
        第二步：根据数据动态生成轮播图以及控制按钮
        第三步：为每一个控制按钮添加一个鼠标浮动事件onmouseenter
                当前的按钮样式发生变化（acitve），其他的恢复原来样式
                对应的轮播图显示出来（active）,其他的隐藏
        第四步：开启自动轮播
                开启一个定时器，间接性的自动的切换轮播图
        第五步：为包含轮播区域容器lunBo添加一个鼠标浮动事件
                  停止定时器（停止自动轮播）
                为包含轮播区域容器lunBo添加一个鼠标离开事件
                   开启定时器            
*/

var datas = [
    {imgSrc:"images/01.jpg",targetSrc:"https://sale.jd.com/act/N58wisuTGyW.html?cpdad=1DLSUE"},
    {imgSrc:"images/02.jpg",targetSrc:"https://sale.jd.com/act/mj8frBQAuDeCPo.html?cpdad=1DLSUE"},
    {imgSrc:"images/03.jpg",targetSrc:"https://sale.jd.com/act/PbDeHkZQcKjIRCtW.html?cpdad=1DLSUE"},
    {imgSrc:"images/04.jpg",targetSrc:"https://jr.jd.com/buy/index?from=jdsj_04_101182&cpdad=1DLSUE"},
    {imgSrc:"images/05.jpg",targetSrc:"https://haier.jd.com/?cpdad=1DLSUE"}
];

var banner = document.getElementById("banner");
var list = document.getElementById("list");
for(var i = 0,len = datas.length;i<len;i++){
    var div = document.createElement("div");
    var li = document.createElement("li");
    if(i==0){  //默认第一项轮播项显示  对应的控制按钮被选中
        div.className = "item active";
        li.className = "active";
    }else{ //其他项隐藏  其他的控制按钮样式不改变
        div.className = "item";
        li.className = "";
    }

    div.innerHTML = '<a href="' + datas[i].targetSrc + '">' + 
                            '<img src="' + datas[i].imgSrc + '" />' + 
                    '</a>';

    li.innerHTML = i + 1;

    banner.appendChild(div);
    list.appendChild(li);
}

var lunBo = document.getElementById("lunBo");
var items = document.querySelectorAll("#lunBo #banner .item");
var lis = document.querySelectorAll("#lunBo #list li"); 
var currentIndex = 0;//(控制按钮和轮播项共同的索引)
for(var i = 0,len = lis.length;i<len;i++){
    lis[i].index = i;
    lis[i].onmouseenter = function(){
        currentIndex = this.index;
        for(var j = 0;j<len;j++){
            lis[j].className = "";
            items[j].className = "item";
        }
        this.className = "active";
        items[this.index].className = "item active";
    }
}

var termId;  //全局变量
function autoPlay(){
    termId = setInterval(function(){
        currentIndex++;
        if(currentIndex==lis.length){
            currentIndex = 0;
        }
        lis[currentIndex].onmouseenter();
    },1000);
}

autoPlay();//打开页面自动轮播
//鼠标进入停止轮播
lunBo.onmouseenter = function(){
    clearInterval(termId);
}
//鼠标离开继续轮播
lunBo.onmouseleave = function(){
    autoPlay();
}

代码中对逻辑思路进行了说明，方便理解，读者可以自己运行代码，设置相应的图片，查看效果。这里附上效果图：
这里写图片描述

小圣贤君

关注

10
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
javascript图片轮播技术动态实现

我们经常会在网页中见到轮播的图片，如京东主页面中图片自动更换。我们在这里对这一技术进行实现，主要能够使图片自动进行轮播，数字标签随着图片一同更换，鼠标移动到数字标签上，相应的图片停留，鼠标在整个图片区域内时，图片停止轮播，鼠标离开图片区域，图片继续轮播的功能。请看示例代码：这是html结构代码：<!DOCTYPE html><html> <head> <meta cha
复制链接

扫一扫