ASP.NET 实现轮播图动态查询数据库加载图片效果HTML+JS+SqlServer+C#（超详细）

ASP.NET 实现轮播图动态查询数据库加载图片效果HTML+JS+SqlServer+C#（超详细）

炒鸡详细的轮播图哦！应用于你的各个地方
效果大概是这样子的：

点击两侧的箭头可实现前后翻页，或者直接悬浮到下方的小圆点上

话不多说，直接上代码

ASP.NET 前端代码：
使用repeater控件进行图片的展示

<div id="flash">
	 <div id="prev"></div>
	 <div id="next"></div>
	 <ul id="play">
        <%--轮播图展示--%>
		 <asp:Repeater ID="rpLunBo" runat="server">
			 <ItemTemplate>
				<li><a href="LieBiao.aspx?DH1=<%#Eval("GuanjianName")%>"><img src='<%#"../img/lunbo/"+Eval("img")%>' alt="" height="495px" width="1042px" /></a></li>
			</ItemTemplate>
		 </asp:Repeater>
	 </ul>
	<%--轮播图导航按钮--%>
	 <ul id="button">
			<li><div style="background: #A10000;"></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
	 </ul>
 </div>

使用JS代码控制图片的轮播

window.onload=function()
{
	 var oPlay=document.getElementById('play');
	 var aLi=oPlay.getElementsByTagName('li');
	 var oButton=document.getElementById('button');
	 var aDiv=oButton.getElementsByTagName('div');
	 var oPrev=document.getElementById('prev');
	 var oNext=document.getElementById('next');
	 var oFlash=document.getElementById('flash');
	 var now=0;
	 var timer2=null;
	 for(var i=0; i<aDiv.length; i++) {
	 	aDiv[i].index=i;
	 	aDiv[i].onmouseover=function(){
	 		if(now==this.index) return;
	 		now=this.index;
	 		tab();
	 	}
	 }
	 oPrev.onclick=function(){
	 	now--;
	 	if(now==-1){
	 		now=aDiv.length-1;
	 	}
	 	tab();
	 }
	 oNext.onclick=function(){
	 	now++;
	 	if(now==aDiv.length){
	 		now=0;
	 	}
	 	tab();
	 }
	 oFlash.onmouseover=function()
	{
	    clearInterval(timer2);
	}
	 oFlash.onmouseout=function()
	{
		timer2=setInterval(oNext.onclick,4000);
	}
	 timer2=setInterval(oNext.onclick,5000);
	 function tab(){
	 	for(var i=0; i<aLi.length; i++){
	 		aLi[i].style.display='none';
	 	}
	 	for(var i=0; i<aDiv.length; i++) {
	 		aDiv[i].style.background="#DDDDDD";
	 	}
	 	aDiv[now].style.background='#A10000';
	 	aLi[now].style.display='block';
	 	aLi[now].style.opacity=0;
	 	aLi[now].style.filter="alpha(opacity=0)";
	 	jianbian(aLi[now]);
	 }
	function jianbian(obj){
		var alpha=0;
		clearInterval(timer);
		var timer=setInterval(function(){
			alpha++;
			obj.style.opacity=alpha/100;
			obj.style.filter="alpha(opacity="+alpha+")";
			if(alpha==100) {
				clearInterval(timer);
			}
		},10);
	}
}

轮播的CSS

/*轮播*/
#flash {
    width: 1042px;
    height: 495px;
    position: relative;
}
#flash #play li {
   
    /*position: absolute;
    top: 0px;
    left: 0px;*/
}
#play li:not(:first-child) {
    display: none;
}
#button {
    position: absolute;
    bottom: 20px;
    left: 470px;
    list-style: none;
}
#button li {
    margin-left: 10px;
    float: left;
}

#button li div {
    width: 12px;
    height: 12px;
    background: #DDDDDD;
    border-radius: 6px;
    cursor: pointer;
}
#prev {
    width: 40px;
    height: 63px;
    background-image: url('../../img/lunbo/beijing.png');
    position: absolute;
    top: 205px;
    left: 10px;
}
#next {
    width: 40px;
    height: 63px;
    background: url('../../img/lunbo/beijing.png') -40px 0px;
    position: absolute;
    top: 205px;
    right: 10px;
}
#prev:hover {
    background-image: url('../../img/lunbo/beijing.png') 0px -62px;
}
#next:hover {
    background-image: url('../../img/lunbo/beijing.png') -40px -62px;
}

c#后端代码：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        rpLunBo.DataSource = TbIndexManager.SelectTbLunBo();
        rpLunBo.DataBind();
    }
}

三层架构中BLL层中的代码：

public static List<TbLunBo> SelectTbLunBo()
{
    SqlDataReader dr = TbIndexService.SelectTbLunBo();
    List<TbLunBo> tbLunBos = new List<TbLunBo>();
    while (dr.Read())
    {
        TbLunBo lunbo = new TbLunBo();
        lunbo.ID = dr.GetInt32(0);
        lunbo.LunBoID = dr.GetInt32(1);
        lunbo.img = dr.GetString(2);
        lunbo.GuanjianName = dr.GetString(3);
        tbLunBos.Add(lunbo);
    }
    dr.Close();
    return tbLunBos;
}

三层架构中DAL层中的代码：

//轮播图
public static SqlDataReader SelectTbLunBo()
{
    //控制只能显示前八类
    string sql = $"select TOP 8 * from LunBo";
    //调用连接查询
    return DBHelper.GetDataReader(sql);
}

到此就完整的一个轮播图就做成了，大家可以直接改变数据库的路径就可以更换图片啦！

感谢大佬指正 小Monkey
如果你觉得有用的话，就留个赞吧！蟹蟹