简易轮播图

最新推荐文章于 2024-06-17 16:07:25 发布

吃枣药丸�

最新推荐文章于 2024-06-17 16:07:25 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/songwan21/article/details/89317206

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>轮播图功能实现</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style-type: none;
            font-family: "微软雅黑";
        }
        .banner{
            width:730px;
            height:454px;
            margin:0 auto;
            position: relative;
        }
        .bannerImg{
            width:730px;
            height:454px;
            position:absolute;
        }
        .bannerImg a{
            display: block;
            position:absolute;
            top:0;
            left: 0;
        }
        .items{
            width:240px;
            height:10px;
            position:absolute;
            bottom: 20px;
            left:260px;
            z-index: 999;
        }
        .items .item{
            float: left;
            margin-right:4px;
            width: 35px;
            height:10px;
            background: #ccc;
            cursor: pointer;
        }
        .btnBox{
            width:730px;
            height:100px;
            position:absolute;
            top: 50%;
            margin-top: -50px;
            z-index: 3;
        }
        .btn{
            width:100px;
            height:100px;
            text-align: center;
            line-height: 100px;
            font-size: 36px;
            background:rgba(0, 0, 0, 0.5);
            color: #fff;
            cursor:pointer;
        }
        .fl{
            float:left;
        }
        .fr{
            float:right;
        }
    </style>
    //设置轮播图的样式
</head>
<body>
<div class="banner">
    <div class="bannerImg">
        <a href="javascript:;" style="z-index:1"><img src=""  alt="" hright="454" width="730" /></a>
        <a href="javascript:;"><img src=""  alt="" hright="454" width="730" /></a>
        <a href="javascript:;"><img src=""  alt="" hright="454" width="730" /></a>
        <a href="javascript:;"><img src=""  alt="" hright="454" width="730" /></a>
        <a href="javascript:;"><img src=""  alt="" hright="454" width="730" /></a>
        <a href="javascript:;"><img src=""  alt="" hright="454" width="730" /></a>
    </div>
    //插入轮播图所使用的图片
    <ul class="items">
        <li class="item" style="background:#333"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
    //轮播图的下标
    <div class="btnBox">
        <div class="btn fl" id="left">&lt;</div>
        <div class="btn fr" id="right">&gt;</div>
    </div>
</div>
	//轮播图左右两侧的点击轮播
    <script type="text/javascript">
    var num = 0;
    var Img = document.getElementsByClassName("bannerImg")[0].getElementsByTagName("a");
    var li = document.getElementsByClassName("item");               
    var banner = document.getElementsByClassName("banner");
    function bannerAuto(adress){
    //获取元素
        for (var i = 0; i < Img.length; i++) {
            Img[i].style.zIndex = "0";
            li[i].style.background = "#ccc";
        }
        Img[num].style.zIndex = "1";
        li[num].style.background = "#333";
        if(adress == "r"){
            num++;
            if (num == Img.length) {
            num = 0;
            }
        }else if(adress == "l"){
            if (num<=0) {
                num=Img.length;
            };
            num--;
        }
    }
    //轮播图轮播的时候样式的改变，及图片轮播时的判断
    var move = setInterval(function(){
        bannerAuto("r");
    },1000);
	//使轮播图按照固定时间开始轮播
    for (var i = 0; i < li.length; i++) {
        li[i].index = i;
        li[i].onclick = function(){
            for (var j = 0; j < Img.length; j++) {
                Img[j].style.zIndex = "0";
                li[j].style.background = "#fff";
            }
            this.style.background = "#333";
            Img[this.index].style.zIndex = "1";
            //关联点击的下标和num的值，也就是自动轮播的下标
            num = this.index;   //点击后，从当前开始轮播
        }
    };
    banner.onmouseover = function(){
        clearInterval(move);
    }
    banner.onmouseout = function(){
        move = setInterval(function(){
            bannerAuto("r")
        }, 1000);
    }
    left.onclick = function(){
        bannerAuto("l");
    }
    right.onclick = function(){
        bannerAuto("r");
    }
    //关联左右两侧点击的事件，使其能控制图片的轮播
    </script>
</body>
</html>

吃枣药丸�

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>轮播图功能实现</title> <style type="text/css"> *{ margin: 0;...
复制链接

扫一扫