JS显示图片轮播控件（带图片角标）

最新推荐文章于 2024-01-15 18:56:46 发布

AndroidfzyJava

最新推荐文章于 2024-01-15 18:56:46 发布

阅读量1.9k

点赞数 1

文章标签： jquery 图片

本文链接：https://blog.csdn.net/AndroidfzyJava/article/details/52511545

版权

一款可设置图片轮播时间、点击角标跳转到下一张图和左右箭头控制上一张和下一张的js代码。无需添加其他JQuery插件，可通过设置定时器来控制图片轮播时间。

<!DOCTYPE html>
<html>
<head>
    <meta content="charset=utf-8" />
    <title></title>

    <style>
        body,div,ul,li,a,img{margin: 0;padding: 0;}
        ul,li{list-style: none;}
        a{text-decoration: none;}
        #wrapper{position: relative;margin: 30px auto;width: 600px;height: 300px;}
        #banner{position:relative;width: 600px;height: 300px;overflow: hidden;}
        .imgList{position:relative;width:3000px;height:300px;z-index: 10;overflow: hidden;}
        .imgList li{float:left;display: inline;}
        #prev,
        #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;}
        #prev{left: 10px;}
        #next{right: 10px;}
        #prev:hover,
        #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
        .bg{position: absolute;bottom: 0;width: 600px;height: 40px;z-index:20;opacity: 0.4;;background: black;}
        .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
        .infoList li{display: none;}
        .infoList .infoOn{display: inline;color: white;}
        .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
        .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
        .indexList .indexOn{background: red;font-weight: bold;color: white;}
    </style>
</head>
<body>
<div id="wrapper"><!-- 最外层部分 -->
    <div id="banner"><!-- 轮播部分 -->
        <ul class="imgList"><!-- 图片部分 -->
            <li><a href="#"><img src="img/a1.jpg" width="600px" height="300px" alt="puss in boots1"></a></li>
            <li><a href="#"><img src="img/b1.jpg" width="600px" height="300px" alt="puss in boots2"></a></li>
            <li><a href="#"><img src="img/c1.jpg" width="600px" height="300px" alt="puss in boots3"></a></li>
            <li><a href="#"><img src="img/d1.jpg" width="600px" height="300px" alt="puss in boots4"></a></li>
            <li><a href="#"><img src="img/e1.jpg" width="600px" height="300px" alt="puss in boots5"></a></li>
        </ul>
        <img src="/img/prev.jpg" width="20px" height="40px" id="prev">
        <img src="/img/next.jpg" width="20px" height="40px" id="next">
        <div class="bg"></div> <!-- 图片底部背景层部分-->
        <ul class="infoList"><!-- 图片左下角文字信息部分 -->
            <li class="infoOn">puss in boots1</li>
            <li>puss in boots2</li>
            <li>puss in boots3</li>
            <li>puss in boots4</li>
            <li>puss in boots5</li>
        </ul>
        <ul class="indexList"><!-- 图片右下角序号部分 -->
            <li class="indexOn">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="javascript/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    var curIndex = 0, //当前index
            imgLen = $(".imgList li").length; //图片总数
    // 定时器自动变换1.5秒每次
    var autoChange = setInterval(function(){
        if(curIndex < imgLen-1){
            curIndex ++;
        }else{
            curIndex = 0;
        }
        //调用变换处理函数
        changeTo(curIndex);
    },1500);
    //左箭头滑入滑出事件处理
    $("#prev").hover(function(){
        //滑入清除定时器
        clearInterval(autoChange);
    },function(){
        //滑出则重置定时器
        autoChangeAgain();
    });
    //左箭头点击处理
    $("#prev").click(function(){
        //根据curIndex进行上一个图片处理
        curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
        changeTo(curIndex);
    });
    //右箭头滑入滑出事件处理
    $("#next").hover(function(){
        //滑入清除定时器
        clearInterval(autoChange);
    },function(){
        //滑出则重置定时器
        autoChangeAgain();
    });
    //右箭头点击处理
    $("#next").click(function(){
        curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
        changeTo(curIndex);
    });
    //对右下角按钮index进行事件绑定处理等
    $(".indexList").find("li").each(function(item){
        $(this).hover(function(){
            clearInterval(autoChange);
            changeTo(item);
            curIndex = item;
        },function(){
            autoChangeAgain();
        });
    });
    //清除定时器时候的重置定时器--封装
    function autoChangeAgain(){
        autoChange = setInterval(function(){
            if(curIndex < imgLen-1){
                curIndex ++;
            }else{
                curIndex = 0;
            }
            //调用变换处理函数
            changeTo(curIndex);
        },1500);
    }
    function changeTo(num){
        var goLeft = num * 600;
        $(".imgList").animate({left: "-" + goLeft + "px"},500);
        $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
        $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
    }
</script>
</body>
</html>

AndroidfzyJava

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS显示图片轮播控件（带图片角标）

一款可设置图片轮播时间、点击角标跳转到下一张图和左右箭头控制上一张和下一张的js代码。无需添加其他JQuery插件，可通过设置定时器来控制图片轮播时间。 body,div,ul,li,a,img{margin: 0;padding: 0;} ul,li{list-style: none;} a{text
复制链接

扫一扫