1、以下是CSS文件代码:问题描述: 用的是伊人集模板,首页轮播图是自动把多张图合成一张的,现请编程大神帮忙看一下代码,改成常规的单张图轮播,谢谢!
.DB_tab25 {width:100%;height:320px;position:relative;overflow:hidden;cursor:pointer;z-index:0;}
.DB_tab25 .DB_bgSet{position:relative;}
.DB_tab25 .DB_bgSet li{position:absolute;width:100%;height:320px;display:none;}
.DB_tab25 .DB_imgSet{position:absolute;width:1000px;left:50%;margin-left:-500px;}
.DB_tab25 .DB_imgSet .DB_1_1{position:absolute;left:20px;top:120px;}
.DB_tab25 .DB_imgSet .DB_1_2{position:absolute;left:20px;top:60px}
.DB_tab25 .DB_imgSet .DB_1_3{position:absolute;left:300px;top:0px}
.DB_tab25 .DB_imgSet .DB_2_1{position:absolute;left:20px;top:60px;}
.DB_tab25 .DB_imgSet .DB_2_2{position:absolute;left:20px;top:160px}
.DB_tab25 .DB_imgSet .DB_2_3{position:absolute;left:540px;top:0px}
.DB_tab25 .DB_imgSet .DB_3_1{position:absolute;left:520px;top:120px;}
.DB_tab25 .DB_imgSet .DB_3_2{position:absolute;left:520px;top:200px}
.DB_tab25 .DB_imgSet .DB_3_3{position:absolute;left:-100px;top:0px}
.DB_tab25 .DB_imgSet .DB_4_1{position:absolute;left:120px;top:0px;}
.DB_tab25 .DB_imgSet .DB_4_2{position:absolute;left:540px;top:40px}
.DB_tab25 .DB_imgSet .DB_4_3{position:absolute;left:690px;top:70px}
.DB_tab25 .DB_imgSet .DB_4_4{position:absolute;left:640px;top:160px}
.DB_tab25 .DB_imgSet .DB_4_5{position:absolute;left:770px;top:0px}
.DB_tab25 .DB_menuWrap{position:absolute;width:1000px;left:50%;margin-left:-500px;}
.DB_tab25 .DB_menuWrap .DB_menuSet{position:absolute;width:100%;top:240px;text-align:center;font-size:0; border-radius:20px;}
.DB_tab25 .DB_menuWrap .DB_menuSet li{cursor:pointer;margin:0 3px;display:inline}
.DB_tab25 .DB_prev{position:absolute;left:-100px;top:120px;cursor:pointer;display:none}
.DB_tab25 .DB_next{position:absolute;right:-100px;top:120px;cursor:pointer;display:none}
2.以下是htm文件代码:
<link rel="stylesheet" href="<?php echo G_STATIC_URL; ?>/css/fox/lunbo.css" />
<script type="text/javascript" src="<?php echo G_STATIC_URL; ?>/css/fox/jquery.DB_tabMotionBanner.min.js"></script>
<div class="DB_tab25 hidden-xs">
<ul class="DB_bgSet">
<li style="background:url(<?php echo base_url();?>/ad/lunbo/bj1.jpg) no-repeat 100% 100%;"></li>
<li style="background:url(<?php echo base_url();?>/ad/lunbo/bj2.jpg) no-repeat 100% 100%;"></li>
<li style="background:url(<?php echo base_url();?>/ad/lunbo/bj3.jpg) no-repeat 100% 100%;"></li>
<li style="background:url(<?php echo base_url();?>/ad/lunbo/bj4.jpg) no-repeat 100% 100%;"></li>
</ul>
<ul class="DB_imgSet">
<li onClick="javascript:window.location.href='/';">
<img class="DB_1_1" src="<?php echo base_url();?>/ad/lunbo/kjzname.png" alt="">
<img class="DB_1_2" src="<?php echo base_url();?>/ad/lunbo/kjzjx.png" alt="">
<img class="DB_1_3" src="<?php echo base_url();?>/ad/lunbo/bn_01.png" alt="">
</li>
<li onClick="javascript:window.location.href='/';">
<img class="DB_2_1" src="<?php echo base_url();?>/ad/lunbo/addchelun.png" alt="">
<img class="DB_2_2" src="<?php echo base_url();?>/ad/lunbo/addt.png" alt="">
<img class="DB_2_3" src="<?php echo base_url();?>/ad/lunbo/zw.png" alt="">
</li>
<li onClick="javascript:window.location.href='/';">
<img class="DB_3_1" src="<?php echo base_url();?>/ad/lunbo/bn32.png" alt="">
<img class="DB_3_2" src="<?php echo base_url();?>/ad/lunbo/bn33.png" alt="">
<img class="DB_3_3" src="<?php echo base_url();?>/ad/lunbo/bn3.png" alt="">
</li>
<li onClick="javascript:window.location.href='/';">
<img class="DB_4_1" src="<?php echo base_url();?>/ad/lunbo/bn_04.png" alt="">
<img class="DB_4_2" src="<?php echo base_url();?>/ad/lunbo/bn_042.png" alt="">
<img class="DB_4_3" src="<?php echo base_url();?>/ad/lunbo/bn_043.png" alt="">
<img class="DB_4_4" src="<?php echo base_url();?>/ad/lunbo/bn_044.png" alt="">
</li>
</ul>
<div class="DB_menuWrap">
<ul class="DB_menuSet">
<li><img src="<?php echo base_url();?>/ad/lunbo/btn_off.png" alt=""></li>
<li><img src="<?php echo base_url();?>/ad/lunbo/btn_off.png" alt=""></li>
<li><img src="<?php echo base_url();?>/ad/lunbo/btn_off.png" alt=""></li>
<li><img src="<?php echo base_url();?>/ad/lunbo/btn_off.png" alt=""></li>
</ul>
<div class="DB_next"><img src="<?php echo base_url();?>/ad/lunbo/nextArrow.png" alt="NEXT"></div>
<div class="DB_prev"><img src="<?php echo base_url();?>/ad/lunbo/prevArrow.png" alt="PREV"></div>
</div>
</div>
<div id="foxshas">
<div class="i_content"></div>
</div>
<script type="text/javascript">
$('.DB_tab25').DB_tabMotionBanner({
key:'b28551',
autoRollingTime:8000,
bgSpeed:300,
motion:{
DB_1_1:{left:-50,opacity:0,speed:1000,delay:500},
DB_1_2:{left:-50,opacity:0,speed:1000,delay:1000},
DB_1_3:{left:100,opacity:0,speed:1000,delay:1500},
DB_2_1:{top:10,opacity:0,speed:1000,delay:500},
DB_2_2:{top:20,opacity:0,speed:1000,delay:1000},
DB_2_3:{top:40,opacity:0,speed:1000,delay:1500},
DB_3_1:{left:-50,opacity:0,speed:1000,delay:500},
DB_3_2:{top:40,opacity:0,speed:1000,delay:1000},
DB_3_3:{top:0,opacity:0,speed:1000,delay:1500},
DB_4_1:{top:40,opacity:0,speed:1000,delay:500},
DB_4_2:{top:0,opacity:0,speed:1000,delay:1000},
DB_4_3:{top:0,opacity:0,speed:1000,delay:1500},
DB_4_4:{top:20,opacity:0,speed:1000,delay:2000},
DB_4_5:{top:80,opacity:0,speed:1000,delay:3000},
end:null
}
})
</script>
3、图片文件夹截图
4、轮播显示页截图