Html
    Css
    Js

    
                        
banner03 {
	width:100%;
}
.banner03_content {
	height:650px;
	position:relative;
	overflow:hidden;
}
.banner03_content ul {
	width:999999px;
	position:absolute;
	top:0;
	left:0;
}
.banner03_content ul li {
	width:1920px;
	height:650px;
	float:left;
}
.banner03_content ul li img {
	width:100%;
}
#banner03_index {
	width:100%;
	position:absolute;
	left:0;
	text-align:center;
	height:5px;
	bottom:5%;
}
#banner03_index i {
	display:inline-block;
	width:100px;
	height:10px;
	border-radius:5px;
	margin:0 10px;
	background:rgba(255,255,255,.2);
}
.banner03_content span {
	opacity:.2;
}
#banner03_left {
	left:5%;
	transform:rotate(180deg);
}
#banner03_right {
	right:5%;
}
.banner03_content span:hover {
	opacity:1;
}
.banner03_content span {
	dp-b br-50 pt-a p-t-50 ts-5s cs-p
display:block;
	border-radius:50%;
	position:absolute;
	top:50%;
	cursor:pointer;
	-webkit-transition:.5s all;
	transition:.5s all;
	width:58px;
	height:58px;
	margin-top:-29px;
	background:url(images/right.png) no-repeat center;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jQuerybanner大图无缝轮播

更新时间:2021-09-22 09:07:06

调用方式

bannerpro({
    positions: $ele, 定位容器 
    boxs: $ele, 移动容器 
            sign: $ele, 当前图标容器
    leftclick: $ele, 左点击元素
    rightclick: $ele 右点击元素
    heights: boolean 固定高度 true, 自适应高度 false
    direction: "left" 滚动方向 "left" or "top"
    transitiontime: 600 滚动时间
    stoptime: 4000 过渡时间
    odstyle: 当前图标默认样式
    newstyle: 当前图标高亮样式
})
0