/* --------------------------------滚动图样式--------------------------------*/
.items{
    background: #000;
}
.itemsitemsBannersTop{
    position: relative;
    overflow: hidden;
}
.itemsBanners img{
    float:left;    
}
.itemsitemsBannersBottomin{
    position: absolute;
    bottom: 12px;
    width:200px;
    left:50%;
    margin-left:-100px;
}
.itemsitemsBannersBottomin span{
   display: block;
   background:rgb(252, 252, 252);
   width:8px;
   height:8px;
   border-radius:8px;
   margin-left:30px;
   float: left;
   cursor:pointer;
   opacity: 0.5;
}
/* --------------------------------滚动图样式-------------------------------- */

html

  <!-- 滚动切换 -->
    <div class="items" >
        <div class="itemsitemsBannersTop" >
             <!-- 滚动图片 -->
            <div class="itemsBanners">
                <img id="item1" src="index/image/indexBanner/z1.jpg">
                <img id="item2" src="index/image/indexBanner/z2.jpg">
                <img id="item3" src="index/image/indexBanner/z3.jpg">
                <img id="item4" src="index/image/indexBanner/z4.jpg">
            </div>
            <!-- 小按钮可点击切换当前图片 -->
            <div class="itemsitemsBannersBottomin">
                <span id="itemb1" style="opacity:1;"></span>
                <span id="itemb2"></span>
                <span id="itemb3"></span>
                <span id="itemb4"></span>
            </div>
        </div>
    </div>
    <!-- 滚动切换 -->

js

/**
 * 滚动banner图效果js
 * test 调用启动方法
 * bannersUitl.init();
 * 
 */
var bannersUitl = {
    windowHeight: document.documentElement.clientHeight,//获取屏幕高度
    windowWidth: document.documentElement.clientWidth,//获取屏幕宽度
    /**
     * 滚动图转动  
     * 每次传入 1、2、3、4
     * @param {*} leftnum  数字值
     */
    gdbanner: function (leftnum) {
        //1.修改滚动图样是
        if (leftnum == 1) {//1.1第一次缩短移动时间到第一个位置
            var leftRest = (bannersUitl.windowWidth * (leftnum - 1));
            $(".itemsBanners").css("transform", "translateX(-" + leftRest + "px)");
            $(".itemsBanners").css("transition", "transform 0.0s");
        } else {//1.2出第一次以外的移动慢些，出效果
            var leftRest = (bannersUitl.windowWidth * (leftnum - 1));
            $(".itemsBanners").css("transform", "translateX(-" + leftRest + "px)");
            $(".itemsBanners").css("transition", "transform 0.9s");
        }
        //2.修改小点样式
        // $(".itemsitemsBannersBottomin span").css("background","#fff");
        // $("#itemb"+(leftnum)).css("background","#0292ff");
        $(".itemsitemsBannersBottomin span").css("opacity", "0.5");
        $("#itemb" + (leftnum)).css("opacity", "1");

    },
    leftnum: 1,//当前图位置
    init: function () {//初始化执行启动
        //1.初始化一些样式
        $(".itemsBanners img").css("width", bannersUitl.windowWidth + "px");//设置每张图宽度
        $(".itemsBanners").css("width", (bannersUitl.windowWidth * 5) + "px");//设置放图的div总宽度
        $(".itemsitemsBannersTop").css("width", bannersUitl.windowWidth + "px");//设置放图div上一层父级宽度（隐藏滚动图）
        //定时执行移动图片
        setInterval(function () {
            console.log(bannersUitl.leftnum);
            if (bannersUitl.leftnum == 4) { bannersUitl.leftnum = 0 }
            bannersUitl.leftnum++;
            bannersUitl.gdbanner(bannersUitl.leftnum);
        }, 2000);
        //小点点击时间，切换到对应图片
        $(".itemsitemsBannersBottomin span").click(function () {
            var nowid = $(this).attr("id");
            bannersUitl.leftnum = nowid.substr(5);
            bannersUitl.gdbanner(bannersUitl.leftnum);
        });

    }
}
//启动
bannersUitl.init();