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);
}
——评论中有好多想看我的数据库,模型层也没有放出,现在我把模型层的代码放出来,数据库表的结构也同模型。如果还不明白可以找我,想要数据库也可以找我。
namespace Model
{
public class TbLunBo
{
public int ID { get; set; }
public int LunBoID { get; set; }
public string img { get; set; }
public string GuanjianName { get; set; }
}
}
到此就完整的一个轮播图就做成了,大家可以直接改变数据库的路径就可以更换图片啦!
感谢大佬指正 小Monkey
如果你觉得有用的话,就留个赞吧!蟹蟹