前端轮播图

‘壹’ 求js 三个图片轮播,始终中间的图片在最前面 宽高较大，代码如下：

jQuery自动适应屏幕宽度滑动轮播图Divas Slider,当前屏幕显示三张图片中间高亮显示，左右滑动切换，此插件最大特点就是可以根椐自动适应屏幕宽度,高度等比例缩放。

‘贰’ 在前端中，这个在轮播图上的提示显示的背景怎么来做。

直接用轮播插件
举一个最常见的轮播图例子，五张轮播图 + 圆点指示器 + 左右箭头。

<!--首先引入jQuery和unslider-->
<scriptsrc="jquery-1.11.1.min.js"></script>
<scriptsrc="unslider.min.js"></script>

<!-- 写点样式，让轮播好看点 -->

<style>

ul, ol { padding: 0;}

.banner { position: relative; overflow: auto; text-align: center;}

.banner li { list-style: none; }

.banner ul li { float: left; }

#b04 { width: 640px;}

#b04 .dots { position: absolute; left: 0; right: 0; bottom: 20px;}

#b04 .dots li

{

display: inline-block;

width: 10px;

height: 10px;

margin: 0 4px;

text-indent: -999em;

border: 2px solid #fff;

border-radius: 6px;

cursor: pointer;

opacity: .4;

-webkit-transition: background .5s, opacity .5s;

-moz-transition: background .5s, opacity .5s;

transition: background .5s, opacity .5s;

}

#b04 .dots li.active

{

background: #fff;

opacity: 1;

}

#b04 .arrow { position: absolute; top: 200px;}

#b04 #al { left: 15px;}

#b04 #ar { right: 15px;}

</style>

<!--把要轮播的地方写上来-->
<divclass="banner"id="b04">
<ul>
<li><imgsrc="01.jpg"alt=""width="640"height="480"></li>
<li><imgsrc="02.jpg"alt=""width="640"height="480"></li>
<li><imgsrc="03.jpg"alt=""width="640"height="480"></li>
<li><imgsrc="04.jpg"alt=""width="640"height="480"></li>
<li><imgsrc="05.jpg"alt=""width="640"height="480"></li>
</ul>
<ahref="javascript:void(0);"class="unslider-arrow04prev"><imgclass="arrow"id="al"src="arrowl.png"alt="prev"width="20"height="35"></a>
<ahref="javascript:void(0);"class="unslider-arrow04next"><imgclass="arrow"id="ar"src="arrowr.png"alt="next"width="20"height="37"></a>
</div>

<!--最后用js控制-->
<script>
$(document).ready(function(e){
varunslider04=$('#b04').unslider({
dots:true
}),
data04=unslider04.data('unslider');

$('.unslider-arrow04').click(function(){
varfn=this.className.split('')[1];
data04[fn]();
});
});
</script>

‘叁’ 前端工程师在实际工作当中对于轮播图是下载样式还是手写

我最近的项目经常用到轮播图，之前都是自己写的，但我是个新手，虽然效果能写出来，但是感觉代码写的不是太好，不如人家写的插件，重用率高，而且用起来还很方便，但是如果插件太大了就不太好了，还不如自己写。当然如果找不到合适的插件那还得自己写。
所以总结一下就是如果有合适的好的就用人家的，没有的话就只能自己写喽！样式一般都是自己写，只是套用人家的方法而已。

‘肆’ css+div图片轮播应如何实现

这个xHTML+CSS可能不太容易实现，如果是HTML5+CSS3的话比较容易实现~

www.W3Cfuns.com 这是一个国内最专业的Web前端开发网站
http://www.w3cfuns.com/forum.php?mod=forumdisplay&fid=137&filter=typeid&typeid=171 这个里面有很多图片轮播的效果。

‘伍’ web前端中，怎么给背景图片做出轮播效果啊求详细代码

直接用轮播插件把http://www.jq22.com/jquery-info1940

‘陆’ web前端中的新闻向上轮播效果是怎么实现的

可以使用jQuery的animate，如果你用jQ库的话。
应该是ul 使用absolute，li不用absolute，ul的父类使用relative。
如果是使用CSS3的话，有一个transition这个属性里也有一个animate

‘柒’ jquery轮播图最后一张图片如何无缝轮播到第一张图片（轮播顺序应和前面一样，即从左往右）,代码如下：

$(document).ready(function(){
vartimer=null;
varpic=$(".pic");
varoUl=pic.children("ul");
varaImg=pic.find("img");
varimgWidth=parseFloat(pic.css("width"))||pic.prop("offsetWidth");
oUl.css("width",imgWidth*aImg.length+'px');
vari=0;
timer=setInterval(function(){
oUl.animate({
"left":"-"+imgWidth+'px'
},500,function(){
	oUl.children("li:first").insertAfter(oUl.children("li:last"));
	oUl.css("left",0);
});
},1000);
});

#div1{
		width:364px;
		height:95px;
		margin:100pxauto;
		position:relative;
		background:red;
		overflow:hidden
	}