基于css和jQuery实现轮播图

来源：互联网发布：火星时代有网络班编辑：程序博客网时间：2024/05/21 03:18
这里我用的<div>元素代替的图片，具体应用时，改为<img>元素就好了。效果图：
这里写图片描述
代码如下：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="jquery-3.2.1.js"></script>    <script>        $(function () { //$(document).ready(function() {...})的简写。页面加载完了才执行脚本。            //自动轮播，每隔1秒换一张图片：轮流去除hide, 增加hide;            var n = 0;            function autoShowNext() {   //展示下一张：                n += 1;  //每一次执行autoShow() ,i的值加1, 到3时，归零  注意：这里的i+=1 应该放在第一行，否则第一张切换要2秒                if (n == 3) {                    n = 0;                }                $(".pic").eq(n).show().siblings(".pic").hide();                $("li").eq(n).addClass("activate").siblings().removeClass("activate");    //处理按钮效果            }            var p = 3;            function autoShowPre() {    //展示上一张                p -= 1;                if (p == -1) {                    p = 3;                }                $(".pic").eq(p).show().siblings(".pic").hide();                $("li").eq(p).addClass("activate").siblings().removeClass("activate");    //处理按钮效果            }            var id = setInterval(autoShowNext, 1000);   //默认轮播//            $(".box").mouseenter(function(){    //鼠标进入暂停轮播//                clearInterval(id);//            });//            $(".box").mouseleave(function(){    //鼠标离开开始轮播//                id = setInterval(autoShowNext, 1000);//            });            //上面的两个事件绑定可以通过下面hover方法搞定；            $(".box").hover(function () { //函数1：鼠标悬浮                clearInterval(id);  //停止定时器                $(".btn").fadeIn(); //显示手动按钮            }, function () {   //函数2：鼠标离开                id = setInterval(autoShowNext, 1000); //开始定时器                $(".btn").hide(); //隐藏手动按钮            });            //手动轮播：悬浮数字圆圈，当前元素增加activate, 兄弟元素去除activate；            // 获取this索引，切换对应索引div,并去除hide,其兄弟元素增加hide            $("ul").on("mouseenter", "li", function () {                $(this).addClass("activate").siblings().removeClass("activate");                var $index = $(this).index();                n = $index; //给n重新赋值，保证手动点击后，自动轮播能续上。                $(".box div:lt(3)").eq($index).show().siblings(".pic").hide();                $(".btn").attr("index", $index); //给btn自定义属性赋值为当前索引            });            //前进后退按钮，相当于手动定时播放，因此直接用轮播函数            $(".btn").click(function () {                if ($(this).attr("id") == "btn1") {                    autoShowPre();                } else {                    autoShowNext();                }            });        });    </script>    <style>        * {            margin: 0;            padding: 0;        }        .box {            margin: auto;            margin-top: 100px;            width: 600px;            height: 400px;            border: 1px solid red;            position: relative;        }        .pic {            width: 600px;            height: 400px;            position: absolute;            left: 0;            top: 0;        }        #a {            background-color: yellow;        }        #b {            background-color: green;        }        #c {            background-color: blue;        }        .btn {            background-color: lightgrey;            color: white;            opacity: .5;            font-size: 30px;            width: 30px;            height: 60px;            text-align: center;            line-height: 60px;            position: absolute;            top: 50%;            margin-top: -30px;            display: none;        }        #btn1 {            left: 0;        }        #btn2 {            right: 0;        }        ul {            position: absolute;            left: 50%;            margin-left: -45px;            bottom: 5px;        }        ul li {            list-style: none;            display: inline-block;            width: 30px;            height: 30px;            border-radius: 50%;            background-color: lightgray;            opacity: .5;            text-align: center;            line-height: 30px;        }        .hide {            display: none;        }        .activate {            background-color: darkgray;            color: white;        }    </style></head><body><div class="box">    <div id="a" class="pic"></div>    <div id="b" class="pic hide"></div>    <div id="c" class="pic hide"></div>    <div class="btn" id="btn1"><</div>    <div class="btn" id="btn2">></div>    <ul>        <li class="activate">1</li>        <li>2</li>        <li>3</li>    </ul></div></body></html>
阅读全文
0 0