扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
第一张显示没问题，第二张以及之后的图片显示为空白。
站在用户的角度思考问题，与客户深入沟通，找到闻喜网站设计与闻喜网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广、域名申请、网站空间、企业邮箱。业务覆盖闻喜地区。
首先，排除掉图片路径没问题。（如果有问题，也不会网上提问了）
初步判断，css静态定位错误。
css样式固定在了第一张图片，第二，第三之后的css定位不到，则显示空白。
即使在js中是动态定位的，但是请仔细检查你的图片ul的css的定位参数是否固定住了。
比如，设置了{left：0；}。
删除掉css的错误静态定位，只保留js中的动态定位可以解决第二张以及之后图片空白问题。
1、html部分
body
div id="banner"
div id="banner_bg"/div!--标题背景--
div id="banner_info"/div!--标题--
ul
li class="on"1/li
li2/li
li3/li
li4/li
/ul
div id="banner_list"
a href="#" target="_blank"img src="imgs/p1.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"//a
a href="#" target="_blank"img src="imgs/p5.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"//a
a href="#" target="_blank"img src="imgs/p3.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"//a
a href="#" target="_blank"img src="imgs/p4.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"//a
/div
/div
/body
2、css样式部分
style type="text/css"
#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;}
#banner_list img {border:0px;}
#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;
cursor:pointer; width:478px;}
#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;
margin:0; padding:0; bottom:3px; right:5px;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#900}
#banner_list a{position:absolute;} !-- 让四张图片都可以重叠在一起--
/style
3、jQuery部分
script type="text/javascript"
var t = n =0, count;
$(document).ready(function(){
count=$("#banner_list a").length;
$("#banner_list a:not(:first-child)").hide();
$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
$("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
$("#banner li").click(function() {
var i = $(this).text() -1;//获取Li元素内的值，即1，2，3，4
n = i;
if (i = count) return;
$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("banner").style.background="";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t = setInterval("showAuto()", 4000);
$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})
function showAuto()
{
n = n =(count -1) ?0 : ++n;
$("#banner li").eq(n).trigger('click');
}
/script
*{
margin: 0;
padding: 0;
}
ul{
list-style:none;
}
.slideShow{
width: 620px;
height: 700px; /*其实就是图片的高度*/
border: 1px #eeeeee solid;
margin: 100px auto;
position: relative;
overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
width: 2500px;
position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
float: left; /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
width: 620px;
}
.slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/
position: absolute;
right: 10px;
bottom: 5px;
text-align:center;
font-size: 12px;
line-height: 20px;
}
.slideShow .showNav span{
cursor: pointer;
display: block;
float: left;
width: 20px;
height: 20px;
background: #ff5a28;
margin-left: 2px;
color: #fff;
}
.slideShow .showNav .active{
background: #b63e1a;
}
js代码规范：
script src="../../../jQuery/js/jquery-2.1.4.js"/script script type="text/javascript"
$(document).ready(function(){
var slideShow=$(".slideShow"), //获取最外层框架的名称
ul=slideShow.find("ul"),
showNumber=slideShow.find(".showNav span"), //获取按钮
oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
var timer=null; //定时器返回值，主要用于关闭定时器
var iNow=0; //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
showNumber.on("click",function(){ //为每个按钮绑定一个点击事件
$(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
iNow=index;
ul.animate({ "left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定
})
});
function autoplay(){
timer=setInterval(function(){ //打开定时器
iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片
if(iNowshowNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
iNow=0; }
showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
},2000); //2000为轮播的时间
}
autoplay();
slideShow.hover( function(){clearInterval(timer);},autoplay); 另外注意setInterval的用法比较关键。
})
/script
主体代码：
[html] view plain copy print?
body
div class="slideShow"
!--图片布局开始--
ul
lia href="#"img src="images/view/111.jpg"//a/li
lia href="#"img src="images/view/112.jpg" //a/li
lia href="#"img src="images/view/113.jpg" //a/li
lia href="#"img src="images/view/114.jpg" //a/li
/ul
!--图片布局结束--
!--按钮布局开始--
div class="showNav"
span class="active"1/span
span2/span
span3/span
span4/span
/div
!--按钮布局结束--
/div
/body
建议，在当前轮播图的div添加类active，设置.active {display：block；}，.ban{display:none;};这样可以通过添加或移除active就可以了；这样以下就比较方便很多，要不然又要做循环，麻烦（swiper插件做轮播效果不错）
$(".left").click(function(){
var $index = $(".ban").hasClass("active").index();//获取当前轮播图的下标
if($index === 0 ) {//当前为第一张轮播图
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法
}else {
$(".ban").eq($index-1).addClass("active)
.siblings(".ban").removeClass("active");
})
$(".right").click(function(){
var $index = $(".ban").hasClass("active").index();//获取当前轮播图的下标
if($index === ($(".ban").length-1) ) {//当前为最后一张轮播图
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法
}else {
$(".ban").eq($index+1).addClass("active)
.siblings(".ban").removeClass("active");
})
//大体思路是这样了，代码可能有个别字母写得不对，毕竟是手敲的，但是大概思路是这样了
轮播的原理是改变图中ul的left值或者right值 以下代码供你参考
HTML
CSS
JS代码
注意此处没有做临界验证 只是原理
使用 setInterval 方法即可设定轮播图档时间
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法
setInterval(code,millisec)
code
要调用的函数或要执行的代码串。
millisec 周期性执行或调用 code 之间的时间间隔，以毫秒计。
实例
html
body
input type="text" id="clock" size="35" /
script language=javascript
var int=self.setInterval("clock()",50)
function clock()
{
var t=new Date()
document.getElementById("clock").value=t
}
/script
/form
button onclick="int=window.clearInterval(int)"
Stop interval/button
/body
/html
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网