轮播图案例

轮播图:图片会自动切换,点击按钮或者下面的圆圈,也能实现自动切换。

代码:

yrzx.css:

img{
    width: 728px;
    height: 500px;
}
h1{
    text-align: center;
}
body{
    margin: 0;
    padding: 0;
    font-size: 16px;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.play-box{
    position: relative;
    margin: 100px auto;
    width: 728px;height: 500px;
    border: 1px solid #ccc;
}
.play-box a{
    display: none;
}
.play-box a.current{
    display: block;
}
.play-box image{
    width: 728px;
    height: 500px;
}
.iconList{
    position: absolute;
    left: 50%;
    bottom: 10px;
    margin-left: -70px;
}
.iconList li{
    float: left;
    margin: 0 4px;
    width: 20px;
    height: 20px;
    font-size: 0;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;}
.iconList li.current{
    background-color: red;
}
.slidebar{
    display: none;
    position: absolute;
    top: 50%;
    margin-top: 25px;
    width: 30px;
    height: 50px;
    color: yellow;
    text-align: center;
    line-height: 50px;
    background-color: blue;
    opacity: 0.6;
    filter: alpha(opacity=60);
    cursor: pointer;
}
.slidebar-left{
    left: 0;
}
.slidebar-right{
    right: 0;
}
yrzx.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一人之下轮播图</title>
    <link rel="stylesheet" type="text/css" href="yrzx.css"/>
    <script src="jquery-3.4.1.js"></script>
    <title>title</title>
</head>
<body>
<h1>一人之下</h1>
<hr/>
    <div id="playBox" class="play-box">
        <div id="imageList">
            <a href="#" target="_blank" class="current">
                <img src="bej.png" alt="宝儿姐" />
            </a>
            <a href="#" target="_blank" class="current">
                <img src="wy.png" alt="王也" />
            </a>
            <a href="#" target="_blank" class="current">
                <img src="zgq.png" alt="诸葛青" />
            </a>
            <a href="#" target="_blank" class="current">
                <img src="zly.png" alt="张林玉" />
            </a>
            <a href="#" target="_blank" class="current">
                <img src="sxd.png" alt="三兄弟" />
            </a>
            <a href="#" target="_blank" class="current">
                <img src="lsg.png" alt="临时工" />
            </a>
        </div>


    <div class="iconList">
        <ul>

            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>

    </div>

    <div class="slidebar slidebar-left"><</div>
    <div class="slidebar slidebar-right">></div>
</div>
<script type="text/javascript">
    $(function(){
        //设置变量
        var speed=2000;  //速度
        var m=2;         //循环变量

        //定时器
        var playTimer=setInterval(runPlay,speed);

        //定时函数
        function runPlay(){
            if(m>5)
                m=0;

            //console.log(m);
            //控制图片变化
            controlPlay(m);
            m++;
        }

        //控制 图片的变化函数 图标变化函数
        function controlPlay(n){
            $("#imageList a").removeClass("current").eq(n).addClass("current");
            $(".iconList li").removeClass("current").eq(n).addClass("current");
        }

        //给整个轮播图绑定 鼠标悬停事件
        $("#playBox").mouseenter(function(){
            //mouseover mouseout
            //停止定时
            clearInterval(playTimer);
            //左右控制按钮显示
            $(".slidebar").fadeIn(300);
        }).mouseleave(function(){
            //重新开启定时
            playTimer=setInterval(runPlay,speed);
            //左右按钮隐藏
            $(".slidebar").fadeOut(300);
        })
        //给li控制图标绑定 单击事件
        $(".iconList li").click(function(){     //hover包括mouerleave，mouseenter
            controlPlay($(this).index());
            //修改m的值
            m=$(this).index()+1;
        }).hover(function(){
            return false;
        })
        //给左右的控制图标取消  鼠标悬停的冒泡问题
        $(".slidebar").hover(function(){
            return false;
        })
        //下一张图片
        $(".slidebar-right").click(function(){
            //显示下一张
            controlPlay(m);
            m++;
            if(m>5)
                m=0;
        })
        //上一张图片
        $(".slidebar-left").click(function(){
            //显示上一张
            m-=2;
            controlPlay(m);
            m++;
            if(m<0)
                m=5;
        })
    })
</script>
</body>
</html>
运行结果:

 



 图片自动切换，点击按钮或者点击红色圆圈也能实现切换。




 




 要点:


（1）编写自定义函数runPlay()、controlPlay(n)
（2）淡入淡出fadeIn()、fadeOut()
（3）添加、删除类操作addClass、removeClass
（4）鼠标悬停事件mouseenter
（5）鼠标单击事件click


 






            

            
posted @ 
2022-05-08 18:56 
努力学爪哇 
阅读(74) 
评论(0) 
 
收藏 
举报