文单阅读

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可自动切换的图片播放器插件</title>
<style>
    html{-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:-ms-autohiding-scrollbar}
body{background-color:#434343}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}
li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}

.ag7-main{padding-top:60px;width:600px;margin:0 auto;padding-bottom:70px}
.ag7-main .phone-index-banner{display:none}
.ag7-bannerslide{position:relative;margin-bottom:50px}
.ag7-bannerslide .slidebox{position:relative;height:280px}
.ag7-bannerslide .slidebox li{display:block;position:absolute;width:100%;height:100%;left:0;top:0}
.ag7-bannerslide a img{display:block;width:540px;height:280px}
.ag7-bannerslide .slideinfo{width:100%;position:absolute;left:0;bottom:0;z-index:10}
.ag7-bannerslide .slidetitle{width:540px;color:#fff;background:rgba(0,0,0,.2)}
.ag7-bannerslide .slidetitle h2{font-size:18px;height:40px;line-height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 15px}
.ag7-bannerslide .slidelist{position:absolute;right:0;bottom:0;width:60px;height:280px;color:#fff;font-size:14px;background-color:#222}
.ag7-bannerslide .slidelist ul{position:absolute;z-index:10;width:100%;text-align:center}
.ag7-bannerslide .slidelist ul li{width:100%;line-height:36px;margin:5px 0 10px;cursor:pointer}
.ag7-bannerslide .slidelist .mask{width:70px;height:36px;position:absolute;left:-10px;top:5px;
background:url(http://blog.img.duanshuilu.com/Snipaste_2021-09-01_21-27-23.jpg) no-repeat center center;display:block}
</style>

</head>
<body>

<div class="ag7-main">
    <div class="ag7-bannerslide">
        <ul class="slidebox">
            <li><a href="#"><img src="http://blog.img.duanshuilu.com/Snipaste_2021-08-22_21-00-48.jpg"></a></li>
            <li><a href="#"><img src="http://blog.img.duanshuilu.com/Snipaste_2021-08-22_21-00-48.jpg"></a></li>
            <li><a href="#"><img src="http://blog.img.duanshuilu.com/Snipaste_2021-08-22_21-00-48.jpg"></a></li>
            <li><a href="#"><img src="http://blog.img.duanshuilu.com/Snipaste_2021-08-22_21-00-48.jpg"></a></li>
        </ul>
        <div class="slideinfo">
            <div class="slidetitle">
                <h2></h2>
            </div>
            <div class="slidelist">
                <ul>
                    <li data-h1="Picture information 1">动物</li>
                    <li data-h1="Picture information 2">风景</li>
                    <li data-h1="Picture information 3">户外</li>
                    <li data-h1="Picture information 4">汽车</li>
                </ul>
                <span class="mask"></span>
            </div>
        </div>
    </div>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<script type="text/javascript" src="./js/jquery.easing.min.js"></script>



</body>
</html>
可自动切换的图片播放器插件