需要

1. HTML
2. CSS
3. JQuery

要点

无。

效果图

预览地址

https://ypt.ink/sharey/lunbo

代码

CSS

 .picMain
    {
        margin: auto;
        overflow: hidden;
        width: 1000px;
        height: 400px;
        position: relative;
    }
    .picimg
    {
        width: 8000px;
        height: 400px;
        background-color: #000000;
        position: absolute;
        top: 0px;
    }
    .picRemark
    {
        position: absolute;
        width: 500px;
        height: 50px;
        bottom: 0px;
        left: 0px;
        color: #FFFFFF;
        text-indent: 2em;
    }
    .picRemark a
    {
        color: #FFFFFF;
        text-decoration: none;
    }
    .picRemark a:hover
    {
        text-decoration: underline;
    }
    .picaction
    {
        position: absolute;
        width: 1000px;
        height: 50px;
        background-color: #000000;
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        opacity: 0.5;
        overflow: auto;
        bottom: 0px;
        left: 0px;
        text-align: right;
    }
    .picaction a
    {
        border: 1px solid #C0C0C0;
        width: 30px;
        height: 30px;
        float: right;
        line-height: 30px;
        text-decoration: none;
        text-align: center;
        color: #FFFFFF;
        font-weight: bold;
        margin-top: 10px;
        display: block;
        margin-right: 10px;
    }
    .pic
    {
        width: 1000px;
        height: 400px;
        float: left;
    }
    .picselect
    {
        background-color: #919191;
    }

HTML

<div class="picMain">
    <div class="picimg" id="divImg">
        <img  src="../../images/images/1.jpg" class="pic" />
        <img  src="../../images/images/2.jpg" class="pic" />
        <img  src="../../images/images/3.jpeg" class="pic" />
        <img  src="../../images/images/4.jpg" class="pic" />
        <img  src="../../images/images/5.jpg" class="pic" />
        <img  src="../../images/images/6.jpg" class="pic" />
        <img  src="../../images/images/7.jpg" class="pic" />
        <img  src="../../images/images/8.jpg" class="pic" />
    </div>
    <div class="picaction" id="divLink">
        <a href="" title="8" onclick=" return picChange(8)" class="">8</a> <a href="" title="7" onclick=" return picChange(7)">7</a> <a href="" title="6"
                                                                                                                                                                      onclick=" return picChange(6)">6</a> <a href="" title="5" onclick=" return picChange(5)">
        5</a> <a href="" title="4" onclick=" return picChange(4)">4</a>
        <a href="" title="3" onclick=" return picChange(3)">3</a> <a href="" title="2" onclick=" return picChange(2)">2</a> <a href="" title="1"
                                                                                                                                      onclick=" return picChange(1)" class="">1</a>
    </div>
    <div id="picremark" class="picRemark">
        测试介绍文件了啊</div>
</div>

JQuery

    var picCurrent = 1;
    var picTotal = 8;
    var timer;
    function autoplay()
    {
        timer = setInterval(function(){
            $("#divLink").find("a").removeClass("picselect")
            $("#divLink").find("a[title='" + picCurrent + "']").addClass("picselect");
            $("#divImg").animate({ left: -((picCurrent - 1) * 1000) + "px" }, "slow");
            if(picCurrent!=picTotal)
            {
                picCurrent++;
            }else{
                picCurrent=1;
            }
        },2000)
    }
    function picChange(current) {
        //停止当前动画
        // if ($("#divImg").is(":animated")) { $("#divImg").stop(); }
        picCurrent = current;
        //为当前选择的设置样式
        $("#divLink").find("a").removeClass("picselect")
        $("#divLink").find("a[title='" + picCurrent + "']").addClass("picselect");


        $("#divImg").animate({ left: -((picCurrent - 1) * 1000) + "px" }, "slow");


        return false;
    }
    $(document).ready(function(e) {
        autoplay();
        $("#divImg").mouseover(function(){
            clearInterval(timer);
        }).mouseout(function(){
            autoplay();
        })
    });