轮播图

最新推荐文章于 2023-12-31 11:15:01 发布

hchu

最新推荐文章于 2023-12-31 11:15:01 发布

阅读量289

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_40688956/article/details/78611940

版权

html 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

这里写图片描述

html页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/css.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            $(function(){
            //手动轮播
            var length = $('#img li').length;
            for(i = 1;i <= length; i ++){
                var li = '<li>' + i + '</li>';
                $('#button').append(li);
            }

            $('#img li').eq(0).show();
            $('#button').eq(0).addClass('action');
            $('#button li').mouseover(function(){
                $(this).addClass('action').siblings().removeClass('action');
                var index = $(this).index();
                $('#img li').eq(index).fadeIn(500).siblings().fadeOut(500);
            })

            //自动轮播
            var i = 0;
            var t = setInterval(move,1000);
            function move(){
                i ++;
                if(i == size){
                    i = 0;
                }
            $('#button li').eq(i).addClass('action').siblings().removeClass('action');
            $('#img li').eq(i).fadeIn(500).siblings().fadeOut(500);
            }

            //鼠标放上去,停止轮播.移开继续轮播
            $('#banner').hover(function(){
                clearInterval(t);
            },function(){
                t = setInterval(move,1000);
            })

            //左右轮播

            $('#banner .left').click(function(){
                move_left();
            })
            $('#banner .right').click(function(){
                move();
            })

            function move_left(){
                i--;
                if(i==-1){
                    i = size - 1;
                }
                $('#button li').eq(i).addClass('action').siblings().removeClass('action');
                $('#img li').eq(i).fadeIn(500).siblings().fadeOut(500);
            }


            })
        </script>

    </head>
    <body>
        <div id = 'banner'>
            <ul id = 'img'>
                <li><a href="#"><img src = 'img/1.jpg'></a></li>
                <li><a href="#"><img src = 'img/2.jpg'></a></li>
                <li><a href="#"><img src = 'img/3.jpg'></a></li>
                <li><a href="#"><img src = 'img/4.jpg'></a></li>
                <li><a href="#"><img src = 'img/5.jpg'></a></li>
            </ul>
            <ul id = 'button'>
                <!--<li class ='action'>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>-->
            </ul>
            <!--class里面的那个空格,相当风骚-->
            <div class = 'left btn'>&lt;</div>
            <div class = 'right btn'>&gt;</div>
        </div>

    </body>
</html>

css页面

@charset "utf-8";
*{margin: 0;padding: 0;}
a{text-decoration: none;color: #000000;}
body{font-size: 1em;color: #000000;}
.clear{clear: both;}
ul{list-style: none;}
img{border: none;vertical-align:bottom;}


#banner{width: 80%;height: 500px;position: absolute;top: 100px;bottom: 0;left: 10%;right: 0;}
#banner #img li img{width: 100%;height: 500px;}
#banner #img li {position:absolute;width: 100%;height: 500px;display: block;}
#button li{width: 20px;height: 20px;background: #ADC0D4;z-index: 100;margin: 10px 10px;display: inline-block;
font-size: 1em;border-radius: 50%;text-align: center;cursor: pointer;}
#button{position: absolute;top: 420px;left: 520px;}
#banner #button .action{background: red;}
#banner .btn{z-index:100;position: absolute;top: 50%;width: 70px;height: 70px;display:none;background: rgba(0,0,0,0.2);
font-size: 50px;text-align: center;color: #FF9500;cursor: pointer;}
#banner .left{left: 0;}
#banner .right{right: 0;}
#banner:hover .btn{display: block;}