原生js轮播图

Html

Css

* {
	margin:0px;
	padding:0px;
}
#benner {
	width:790px;
	height:340px;
	margin-left:15%;
	margin-top:10px;
}
#benner .imga {
	display:none;
}
#benner .img .active {
	display:block;
}
#benner .title {
	width:;
	height:16px;
	background-color:rgba(226,226,226,0.6);
	border-radius:30px;
	margin-top:-35px;
	float:left;
	margin-left:40%;
	margin-right:40%;
	padding:6px 0px 0px 10px;
	position:relative;
}
#benner .title .nr {
	list-style:none;
	width:10px;
	height:10px;
	background:#fff;
	border-radius:10px;
	float:left;
	margin-right:10px;
	margin-bottom:0px;
}
#benner .title .active {
	background:#db192a;
}

window.onload = function() {
    benner('#benner', '.nr', '.imga')

function benner(parent, controller, mod) {

var num = 0;
        var controller = $(controller);
        var mod = $(mod);
        var benner = $(parent);
        var autoPlayTime = 1500;
        var imgNum = mod.length - 1;
        var auto;

autoPlay();
        //根据传进来的名字获取这个名字所对应的对象
        function $(name) {
            if (name[0] == '#') {
                return document.getElementById(name.substr(1));
            } else if (name[0] == '.') {
                return document.getElementsByClassName(name.substr(1));
            } else {
                return document.getElementsByTagName(name);
            }
        }

//实现鼠标划过圆点,变化图片的效果
        //function change(controller, mod){
        //遍历控制器,绑定鼠标划过事件
        for (var i = 0; i < controller.length; i++) {
            //给控制器加个索引,并把i值赋值给索引
            controller[i].index = i;
            //给所有的控制器都加划过事件
            controller[i].onmouseover = function() {
                for (var j = 0; j < controller.length; j++) {
                    //将所有控制器改为默认样式
                    controller[j].className = 'nr';
                }
                //改变所选的控制器样式
                this.className = 'nr active';
                //将模型改为默认样式
                for (var x = 0; x < mod.length; x++) {
                    mod[x].className = 'imga';
                }
                //改变所选控制器对应的模型的样式
                mod[this.index].className = 'imga active';
            }
        }
        //}
        //绑定鼠标移入,暂停播放图片
        benner.onmouseover = function() {
            clearInterval(auto);
        }
        //绑定鼠标离开,继续播放
        benner.onmouseleave = function() {
            autoPlay();
        }
        //指定播放那个图片
        function play(num) {
            for (var j = 0; j < controller.length; j++) {
                controller[j].className = 'nr';
            }
            controller[num].className = 'nr active';
            for (var x = 0; x < mod.length; x++) {
                mod[x].className = 'imga';
            }
            mod[num].className = 'imga active';
        }
        //自动播放
        function autoPlay() {
            auto = setInterval(function() {
                if (num > imgNum) {
                    num = 0;
                }
                play(num);
                num++;
            }, autoPlayTime)
        }
    }

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生js轮播图



代码描述：js轮播图,模仿京东首页轮播图,代码复制即可使用,图片可以替换成京东首页的轮播图图片,效果会更好一点

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

??

相关代码

原生js轮播图

最新