最基础，易懂的jQery无缝轮播方法(原创)

Html

Css

* {
	margin:0;
	padding:0;
}
li {
	list-style:none;
}
.all {
	width:900px;
	height:500px;
	padding:7px;
	border:1px solid #ccc;
	margin:50px auto 0;
}
/*这三个最重要*/
        .screen {
	width:900px;
	height:500px;
	overflow:hidden;
	position:relative;
}
.screen img {
	width:900px;
	height:500px;
	float:left;
}
.screen .ul {
	position:absolute;
	left:0;
}
.all ol {
	position:absolute;
	right:10px;
	bottom:10px;
	line-height:20px;
	text-align:center;
}
.all ol li {
	float:left;
	width:20px;
	height:20px;
	border:1px solid #ccc;
	background-color:#fff;
	margin-left:10px;
	cursor:pointer;
}
.all ol li.active {
	background-color:orange;
	color:#fff;
}
.arr span {
	width:40px;
	height:40px;
	background-color:rgba(0,0,0,.3);
	position:absolute;
	top:50%;
	margin-top:-20px;
	cursor:pointer;
	line-height:40px;
	text-align:center;
	font-weight:bold;
	font-family:"黑体";
	font-size:30px;
	color:#fff;
	border:1px solid #fff;
	left:5px;
	transition:all .3s;
	opacity:.5;
}
.arr .right {
	right:5px;
	left:auto;
}
.arr span:hover {
	background-color:rgba(0,0,0,.5);
	opacity:1;
}

$(function() {
    aRound({ //调用
        ulCss: ".ul", //必填：长滚轮css
        butsCss: "ol li", //选填：小点css
        actiClass: "active", //选填：高亮小点class
        butOn: "mouseenter", //选填：小点翻页的事件 click/mouseenter(默认)
        wiLeCss: ".left", //选填：左翻页按钮css
        wiRiCss: ".right" //选填：右翻页按钮css
    }, 4000 /*轮播频率*/ );

function aRound(bannCss, tiam = 3000) { //jqery无缝轮播
        //1.准备工作
        var this_ = this,
            axle = null,
            give = true, //动画状态
            timFlg = false, //定时器状态
            index = 0,
            ul = $(bannCss.ulCss),
            length = ul.children().length,
            width = ul.children(":first").width(),
            buts, active, winLe, winRi, butsOn;
        ul.css({
            width: (length + 1) * width
        }).children(":first").clone().appendTo(".ul");

//2.功能添加
        function axleYes() { //开定时器
            if (!timFlg) {
                axle = setInterval(drum, tiam);
                timFlg = true;
            }
        };

//3.附加项
        if (bannCss.butsCss) {
            buts = $(bannCss.butsCss);
            active = bannCss.actiClass ? bannCss.actiClass : null;
            buts.first().addClass(active).siblings().removeClass(active);
            butsOn = bannCss.butOn ? bannCss.butOn : "mouseenter";
            buts.on(butsOn, function() {
                if (index == length && $(this).index() == 0) { //特殊状况
                    ul.stop().animate({
                        left: -width * length
                    }, 120, function() {
                        ul.css({
                            left: 0
                        });
                        index = 0;
                    });
                    return;
                }
                gabby(-$(this).index());
            });
        }
        if (bannCss.wiLeCss && bannCss.wiRiCss) {
            $(bannCss.wiRiCss).click(function() {
                if (give) {
                    drum();
                }
            });
            $(bannCss.wiLeCss).click(function() {
                if (give) {
                    index--;
                    if (index == -1) {
                        ul.css({
                            left: -width * length
                        });
                        index = length - 1;
                    }
                    gabby(-index);
                }
            });
        }
        axleYes();
    }
})

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

立即下载

最基础，易懂的jQery无缝轮播方法(原创)

代码描述：简单，好用，功能较全，流畅，无BUGjQery无缝轮播代码

更新时间：2021-01-13 00:19:28
around({ //调用                 ulcss: ".ul", //必填：长滚轮css                butscss: "ol li", //选填：小点css                 acticlass: "active", //选填：高亮小点class                 buton: "mouseenter", //选填：小点翻页的事件 click/mouseenter(默认)                 wilecss: ".left", //选填：左翻页按钮css                wiricss: ".right" //选填：右翻页按钮css     },4000 /*选填：轮播频率，默认值3000*/ );
html结构:相对定位宽高超出隐藏
<div class="screen">     <div class="ul">         <img src="https://www.jq22.com/img/cs/500x300-1.png" alt="">         <img src="https://www.jq22.com/img/cs/500x300-2.png" alt="">         <img src="https://www.jq22.com/img/cs/500x300-3.png" alt="">         <img src="https://www.jq22.com/img/cs/500x300-4.png" alt="">         <img src="https://www.jq22.com/img/cs/500x300-5.png" alt="">     </div> </div>
css样式：大概这样
.screen {     width: 900 px;height: 500 px;overflow: hidden;position: relative; }.screen img {     width: 900 px;height: 500 px;float: left; }.screen.ul {     position: absolute;left: 0; }

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

迪尔罗那

相关代码

最基础，易懂的jQery无缝轮播方法(原创)

最新