原理：使用insertBefore和insertAfter方法调整图片顺序。
测试：firefox/chrome/IE11正常
已知不足：每次播放均使用了一次insertBefore和insertAfter，可考虑在最后一张图的时候将前几张图片整体后移。以后有空再优化。
1、HTML结构
alt的值将作为图片的描述信息出现在infobox里。
<div class="outerbox">
<div class="innerbox">
<a href="http://www.baidu.com"><img src="img/img1.jpg" alt="JavaScript高级程序设计"></a>
<a href="http://www.w3school.com.cn/"><img src="img/img2.jpg" alt="油藏工程原理与方法"></a>
<a href="http://www.cnblogs.com/zczhangcui/"><img src="img/img3.jpg" alt="高等数学第六版上册"></a>
<a href="http://cn.bing.com/"><img src="img/img4.jpg" alt="银河帝国2：基地与帝国"></a>
<a href="http://cn.bing.com/academic/?FORM=Z9LH2"><img src="img/img5.jpg" alt="三体"></a>
<a href="http://cn.bing.com/dict/?FORM=HDRSC6"><img src="img/img6.jpg" alt="计算机科学导论"></a>
</div>
</div>
2、CSS
为方便轮播组件复用，大部分CSS样式包含在了jq组件中，所以在CSS中只需设置outerbox容器的高度和宽度。
.outerbox{
height: 500px;
width: 800px;
}
3、jquery轮播函数，尚未封装。
给每个图片设置了data-idx属性来标识它们，使infobox能够与每个图片对应。
function slideshow(thetime,thecolor){
var color="#317EF3";
var time=5000;
if(arguments.length==1){
time=arguments[0];
}else if(arguments.length==2){
time=arguments[0];
color=arguments[1];
}else if(arguments.length>2){
return false;
}
var adTimer=null;
var innerbox=$(".outerbox .innerbox");
var imgnum=$(".outerbox img").length;
var imgwidth=$(".outerbox").width();
var imgheight=$(".outerbox").height();
for(var i=0;i<imgnum;i++){
$(".outerbox .innerbox img").eq(i).attr(‘data-idx‘, i);
}
//设置各个div的css样式
$(".outerbox img").css(‘float‘, ‘left‘);
$(".outerbox").css({
overflow: ‘hidden‘,
position: ‘relative‘
});
innerbox.css({
width: imgwidth*imgnum+"px",
position: ‘absolute‘,
left:‘0‘,
top:‘0‘
});
//在outerbox下新增一个显示alt的div
var $infobox=$("<div class=‘infobox‘></div>");
$(".outerbox").append($infobox);
$(".outerbox .infobox").css({
position: ‘absolute‘,
left: ‘0‘,
bottom:‘0‘,
width:imgwidth+10+"px",
height:‘13%‘,
});
var liheight=$(".outerbox .infobox").height();
var lists="";
for(var i=0;i<imgnum;i++){
lists+="<li><a href=‘‘><span></span></a></li>";
}
var ullists="<ul>"+lists+"</ul>";
$(".outerbox .infobox").append($(ullists));
$(".outerbox .infobox ul").css({
height: liheight+"px",
paddingLeft:‘0‘,
marginTop:‘0‘,
marginBottom:‘0‘
});
$(".outerbox .infobox ul li").css({
display: ‘inline-block‘,
float:‘left‘,
marginRight:‘3px‘,
background: "rgba(0,0,0,0.4)",
height:liheight+"px",
width:(imgwidth-(imgnum-1)*3)/imgnum+"px",
lineHeight:liheight+‘px‘,
verticalAlign:‘middle‘
});
$(".outerbox .infobox ul li a").css({
display: ‘inline-block‘,
width:$(".outerbox .infobox ul li").width()+"px",
textAlign:‘center‘,
});
$(".outerbox .infobox ul li a span").css({
display:‘inline-block‘,
lineHeight:‘1.1em‘,
paddingLeft:liheight*0.2+"px",
paddingRight:liheight*0.2+"px",
verticalAlign: ‘middle‘,
color:‘#ddd‘,
fontSize:‘12px‘
});
//获得img上层a的href属性，赋给infobox里的a元素
for(var i=0;i<imgnum;i++){
var link=$(".outerbox .innerbox a").eq(i).attr("href");
var info=$(".outerbox .innerbox img").eq(i).attr("alt");
$(".outerbox .infobox a").eq(i).attr(‘href‘, link);
if(info){
$(".outerbox .infobox span").eq(i).append(info);
}else{
$(".outerbox .infobox span").eq(i).append(i+1);
}
}
//增加左右箭头
var arrows=‘<div class="leftarrow arrow"><</div><div class="rightarrow arrow">></div>‘;
$(".outerbox").append($(arrows));
$(".outerbox .arrow").css({
width:liheight*0.8+"px",
height: liheight*1.5+"px",
position:‘absolute‘,
top:(imgheight*0.5-liheight*0.75-10)+"px",
background: "rgba(0,0,0,0.4)",
textAlign:‘center‘,
lineHeight:liheight*1.45+‘px‘,
fontSize:‘1.5em‘,
color:‘#ddd‘,
cursor:‘pointer‘
});
$(".outerbox .leftarrow").css(‘left‘, ‘0‘);
$(".outerbox .rightarrow").css(‘right‘, ‘0‘);
//鼠标放在箭头上时，箭头变色
$(".outerbox .leftarrow").hover(function() {
$(this).css(‘background‘, color);
}, function() {
$(this).css(‘background‘, ‘rgba(0,0,0,0.4)‘);
});
$(".rightarrow").hover(function() {
$(this).css(‘background‘, color);
}, function() {
$(this).css(‘background‘, ‘rgba(0,0,0,0.4)‘);
});
//点击右箭头
$(".outerbox ul li").eq(0).css(‘backgroundColor‘, color).siblings().css(‘background‘, ‘rgba(0,0,0,0.4)‘);
$(".outerbox .rightarrow").click(function() {
if (!innerbox.is(‘:animated‘)) {
innerbox.animate({left:-imgwidth}, "normal",function(){
$(".outerbox .innerbox a:first").insertAfter($(".outerbox .innerbox a:last"));
innerbox.css(‘left‘, ‘0‘);
var dataidx=$(".outerbox .innerbox a:first").find(‘img‘).attr("data-idx");
$(".outerbox ul li").eq(dataidx).css(‘backgroundColor‘, color).siblings().css(‘background‘, ‘rgba(0,0,0,0.4)‘);
});
}
});
//点击左箭头
$(".outerbox .leftarrow").click(function() {
if (!innerbox.is(‘:animated‘)) {
$(".outerbox .innerbox a:last").insertBefore($(".outerbox .innerbox a:first"));
innerbox.css(‘left‘, -imgwidth);
innerbox.animate({left:0}, "normal");
var dataidx=$(".outerbox .innerbox a:first").find(‘img‘).attr("data-idx");
$(".outerbox ul li").eq(dataidx).css(‘backgroundColor‘, color).siblings().css(‘background‘, ‘rgba(0,0,0,0.4)‘);
}
});
//每5s自动滚动，鼠标放在div上时箭头出现，移走箭头消失
$(".outerbox").hover(function() {
$(this).find(‘.leftarrow‘).stop().animate({left:"0"},300);
$(this).find(‘.rightarrow‘).stop().animate({right:"0"},300);
$(this).find(‘.infobox‘).stop().animate({bottom:"0"}, 300);
if (adTimer) {
clearInterval(adTimer);
}
}, function() {
$(this).find(‘.leftarrow‘).stop().animate({left:-liheight*0.8+"px"},300);
$(this).find(‘.rightarrow‘).stop().animate({right:-liheight*0.8+"px"},300);
$(this).find(‘.infobox‘).stop().animate({bottom:-(liheight-7)+"px"}, 300);
adTimer=setInterval(function () {
$(".outerbox .rightarrow").trigger(‘click‘);
},time);
}).trigger(‘mouseleave‘);
//鼠标放在下方的颜色块上时移动图片
$(".outerbox .infobox ul li").mouseover(function() {
var index=$(this).index();
var dataidx=$(".outerbox .innerbox a:first").find(‘img‘).attr("data-idx");
$(".outerbox ul li").eq(index).css(‘backgroundColor‘, color).siblings().css(‘background‘, ‘rgba(0,0,0,0.4)‘);
if(index-dataidx>0){
for(var i=0;i<Math.abs(index-dataidx);i++){
$(".outerbox .innerbox a:first").insertAfter($(".outerbox .innerbox a:last"));
}
}else if(index-dataidx<0){
for(var i=0;i<Math.abs(index-dataidx);i++){
$(".outerbox .innerbox a:last").insertBefore($(".outerbox .innerbox a:first"));
}
}
});
}
$(function(){ slideshow(5000);});
4、引入jq和该函数，并设置outerbox的宽度和高度，便可以实现滑动循环切换的轮播效果。
时间： 2024-11-04 06:45:08