banner滑动juqery特效 带自动切换

Posted 2020-08-21

突然在网络上找不到合适的banner滑动切换代码了……之前不找的时候一搜一大把，我有点意外，好容易找到一个，竟然在笔记本电脑上不兼容。不得已，自己手写了一个，其实代码也非常简单，懂得它的原理，改淡入淡出，加上向前，向后小图标也非常容易。

请转载此文的朋友务必附带原文链接，谢谢。

原文链接：http://xuyran.blog.51cto.com/11641754/1878370

js代码如下：

//滑动切换
var page = 1;
function bannerSlide() {
    var  len = $("#bd1lfimg > div dl").length;
    if (page == len) {
        page = 1;
    } else {
        page++;
    }
    $("#bd1lfimg > div").animate({ marginLeft: "-" + 750 * (page - 1) });//对应banner滑动
    $("#bd1lfsj ul li").stop().eq(page - 1).addClass("show").siblings().removeClass("show");
    //对应小圆点样式改变
}

$(function () {
    var changeSelf = setInterval(bannerSlide, 4000);//自动切换
    $("#bd1lfsj ul li").on("click", function () {
        var index = $(this).index();
        $(this).addClass("show").siblings().removeClass("show");
        $("#bd1lfimg > div").stop().animate({ marginLeft: "-" + 750 * index });
        page = index;
    })
})

html代码如下：

	<!--banner滑动开始-->
<div class="sub_box">	
	<div id="p-select" class="sub_nav">	
		<div class="sub_no" id="bd1lfsj">
			<ul>
			<li class="show"></li>
			<li></li>
			<li></li>
			</ul>
		</div>
</div>
	<div id="bd1lfimg">
		<div>
		<dl class="show">
		    <dt><a href="#"><img src="../Content/images/u4618.jpg" ></a></dt>	
		</dl>
		<dl>
			<dt><a href="#"><img src="../Content/images/u4620.jpg" ></a></dt>		
		</dl>
		<dl>
			<dt><a href="#"><img src="../Content/images/u4622.jpg" ></a></dt>		
		</dl>						
		</div>
	        </div>
	</div>
									
<!--banner滑动结束-->

css代码如下：

/* banner滑动 开始*/
.sub_box{
	width:750px;
	height:350px;
	position:relative;
	overflow:hidden;
}
.sub_box img{
	width:750px;
	height:350px;
}
#bd1lfimg{
	position:relative;
	width:750px;
	height:350px;
	overflow:hidden;
}
#bd1lfimg div{
	width:100000px;
}
#bd1lfimg dl{
	width:750px;
	height:350px;
	position:relative;
	overflow:hidden;
	float:left;
}
#bd1lfimg dt{
	width:750px;
	height:350px;
	position:absolute;
	left:0px;
	top:0px;
}

.sub_nav{
	width:150px;
	height:25px;
	bottom:0px;
	position:absolute;
	z-index:10;
	padding-bottom:30px;
	left:260px;
}
.sub_no{
	height:25px;
	float:right;
}
.sub_no li{
	display:block;
	width:15px;
	height:15px;
	float:left;
	margin-left:10px;
	overflow:hidden;
	line-height:25px;
	vertical-align:middle;
	text-align:center;
	background:#bcbcbc; 
	filter:alpha(Opacity=70);
	Opacity:0.7; 
	font-family:Arial;
	font-size:11px;
	cursor:pointer;
	border-radius:50%;
}
.sub_no li.show{
	background:#fbd74f;
	width:20px;
	height:20px;
	margin-top:-3px;
}
/* banner滑动 结束*/

如过要加上向前向后小图标，原理如下：

 //点击切换
    var page = 1;
    var len = $(".bottom-list li").length;
    $(".lightbox-next").click(function () {
        if (page == len) {
            page = 1;
        } else {
            page++;
        }
       $("#bd1lfimg > div").animate({ marginLeft: "-" + 750 * (page - 1) });//对应banner滑动
        $("#bd1lfsj ul li").stop().eq(page - 1).addClass("show").siblings().removeClass("show");
    //对应小圆点样式改变
    })
    $(".lightbox-prev").click(function () {
        if (page == 1) {
            page = len;
        } else {
            page--;
        }
$("#bd1lfimg > div").animate({ marginLeft: "-" + 750 * (page - 1) });//对应banner滑动
    $("#bd1lfsj ul li").stop().eq(page - 1).addClass("show").siblings().removeClass("show");
    //对应小圆点样式改变
    })

本文出自 “没有翅膀的菜鸟的进阶” 博客，请务必保留此出处http://xuyran.blog.51cto.com/11641754/1878370