实现图片轮播的两种方法

网络技术

实现图片轮播的两种方法：

使用jquery实现轮播图思路如下


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery轮播图代码示例 - 付杰博客</title>
    <!--[if gte IE 9]><!-->
    <script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
    <!--<![endif]-->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
    <![endif]-->
</head>
<body>
<!--CSS代码-->
<style>
    .showbox{
        position: relative;
        height: 300px;
        width: 570px;
        overflow: hidden;
        border: 10px solid #eee;
        background-color: #eee;
        border-radius: 10px;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
    }
    .imagebox{
        position: relative;
        height: 270px;
        width: 570px;
        top: 0;
        left: 5px;
        overflow: hidden;
    }
    .imagebox img{
        display: block;
        width: 570px;
        height: 270px;
        float: left;
    }
    .icobox{
        position: absolute;
        border: none;
        width: 120px;
        height: 12px;
        left: 220px;
        bottom: 10px;
        text-align: center;
        line-height: 40px;
        overflow: hidden;
    }
    .icobox span{
        background: url("../image/ico.png") 0px 0px no-repeat;
        width: 12px;
        height: 12px;
        cursor: pointer;
        float: left;
        margin-left: 3px;
    }
    .icobox span.active{
        background: url("../image/ico.png") 0px -12px no-repeat;
        cursor: default;
    }
</style>
<!-- HTML 代码 -->
<!-- 注意：轮播图开始注意这里的图片路径，一定要使用自己的图片路径！-->
<div>
    <div>
        <img src="1.jpg" alt="1.jpg">
        <img src="2.jpg" alt="2.jpg">
        <img src="3.jpg" alt="3.jpg">
        <img src="4.jpg" alt="4.jpg">
    </div>
    <div>
        <span rel="0">0</span>
            <span rel="1">1</span>
            <span rel="2">2</span>
            <span rel="3">3</span>
    </div>
</div>
<!-- jquery 代码-->
<script>
    $(document).ready(function() {
        var imagebox=$(".showbox").children('.imagebox')[0],//获得图片容器
            icobox=$(".showbox").children('.icobox')[0],//获得图标容器
            ico=$(icobox).children('span'),//获得图标数组
            imagenum=$(imagebox).children().size(),//获得图片数量
            imageboxWidth=$(imagebox).width(),//获得图片容器的宽度
            imagewidth=imageboxWidth*imagenum,//获得图片的总宽度
            activeID = parseInt($($(icobox).children(".active")[0] ).attr("rel")),//获得激活的图标ID
            nextID=0,//下一个图标的ID
            intervalID,//setInterval()函数的ID
            delaytime=4000,//延迟的时间
            speed=700;//执行速度
        $(imagebox).css({'width' : imagewidth + "px"});
        var rotate=function(clickID) { //图片滑动函数
            if (clickID+1){
                nextID=clickID;
            }else{
                nextID=(activeID+1)%4;
            };
            $(ico[activeID]).removeClass('active');
            $(ico[nextID]).addClass('active');
            $(imagebox).animate({left:"-"+nextID*imageboxWidth+"px"}, speed);//jQuery中的animate函数
            activeID=nextID;
        }
        intervalID=setInterval(rotate,delaytime);//循环函数
        $.each(ico, function(index, val) {
            $(this).click(function(event) {
                clearInterval(intervalID);//清楚之前的定时任务
                var clickID = index;
                rotate(clickID);//运行一次带参数的rotate函数
                intervalID = setInterval(rotate,delaytime);
            });
        });
    });
</script>
</body>
</html>


使用JS实现轮播图思路如下


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS轮播图代码示例 - 付杰博客</title>
</head>
<body>
<!--CSS代码-->
<style>
    *{
        list-style: none;
    }
    #wrap {
        width: 590px;
        height: 470px;
        margin: 150px auto;
        position: relative;
        cursor: pointer;
    }
    #pic li {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #num {
        position: absolute;
        z-index: 2;
        bottom: 20px;
        left: 46px;
    }
    #num li {
        float: left;
        width: 8px;
        height: 8px;
        margin: 5px;
        border-radius: 50%;
        border: 1px solid #FFFFFF;
        line-height: 20px;
        background: transparent;
        text-align: center;
    }
    #num li.active {
        background:  #fefefe;
    }
    .arrow {
        z-index: 3;
        height: 40px;
        width: 30px;
        position: absolute;
        top: 45%;
        line-height: 40px;
        background: rgba(0, 0, 0, 0.3);
        text-align: center;
        display: none;
    }
    #wrap:hover .arrow {
        display: block;
    }
    .arrow:hover {
        background: rgba(0, 0, 0, 0.7);
    }
    #left {
        left: 0;
    }
    #right {
        right: 0;
    }
</style>
<!-- HTML 代码 -->
<!-- 注意：轮播图开始注意这里的图片路径，一定要使用自己的图片路径！-->
<div id="wrap">
    <ul id="pic">
        <li style="display: none;"><img src="1.jpg" alt=""></li>
        <li style="display: none;"><img src="2.jpg" alt=""></li>
        <li style="display: block;"><img src="3.jpg" alt=""></li>
        <li style="display: none;"><img src="4.jpg" alt=""></li>
        <li style="display: none;"><img src="5.jpg" alt=""></li>
        <li style="display: none;"><img src="6.jpg" alt=""></li>
        <li style="display: none;"><img src="7.jpg" alt=""></li>
    </ul>
    <ul id="num">
        <li></li>
        <li class=""></li>
        <li class=""></li>
        <li class=""></li>
        <li class=""></li>
        <li class=""></li>
        <li class=""></li>
    </ul>
    <a href="javascript:;" id="left">&lt;</a>
    <a href="javascript:;" id="right">&gt;</a>
</div>
<!-- 原生 Js 代码-->
<script type="text/javascript">
    function $(id) {
        return document.getElementById(id);
    }
    window.onload = function() {
        var oLeft = $("left");
        var oRight = $("right");
        var index = 0;
        var timer = null;
        var pic = $("pic").getElementsByTagName("li");
        var num = $("num").getElementsByTagName("li");
        var oDiv = $("wrap");
        oRight.onclick = function() {
            index++;
            if (index >= pic.length) {
                index = 0;
            }
            change(index);
        }
        oLeft.onclick = function() {
            index--;
            if (index < 0) {
                index = pic.length - 1;
            }
            change(index);
        }
        oDiv.onmouseover = function() {
            clearInterval(timer);
        }
        oDiv.onmouseout = function() {
            timer = setInterval(run, 2000); //鼠标移出后重新开始定时器
        }
        timer = setInterval(run, 4000); //定时器
        function run() { //用于定时器的函数
            index++;
            if (index >= pic.length) {
                index = 0;
            }
            change(index);
        }
        for (var i = 0; i < num.length; i++) {
            num[i].index = i; //把索引值存起来
            num[i].onmouseover = function() {
                change(this.index);
            }
        }
        function change(curindex) { //用于切换图片的函数
            for (var i = 0; i < pic.length; i++) {
                pic[i].style.display = "none";
                num[i].className = "";
            }
            pic[curindex].style.display = "block";
            num[curindex].className = "active";
            index = curindex;
        }
    }
</script>
</body>
</html>



  
网络技术0条评论共人围观

文章发表日期：2022-4-9 14:15:27

« 上一篇下一篇 »