css:
#d_tab29 ul, #d_tab29 li { margin: 0; padding: 0; list-style: none }
#d_tab29 img { vertical-align: top }
#d_tab29 { position: relative; height: 537px; text-align: left;background: url(../img/big_market.jpg) no-repeat }
#d_tab29 .d_img { position: relative; margin: 0 auto; width: 860px; height: 100% }
#d_tab29 .d_img li { position: absolute; display: none; z-index: 0;border:1px solid grey;}
/*#d_tab29 .d_img .cont{ width:100%; height:87px; background:rgba(0,0,0,0.5); position:absolute; bottom:0px; left:0px; z-index:99999;}*/
#d_tab29 .d_img li img { width: 100%;display: inline-block}
#d_tab29 .d_img li.d_pos1 { display: block; width: 200px; left: 0; top: 90px; z-index: 1;}
#d_tab29 .d_img li.d_pos2 { display: block; width: 250px; left: 20%; top: 70px; z-index: 2 ;}
#d_tab29 .d_img li.d_pos3 { display: block; width: 300px; left: 40%; top: 50px; z-index: 3 ;}
#d_tab29 .d_img li.d_pos4 { display: block; width: 250px; right: 20%; top: 70px; z-index: 2 ;}
#d_tab29 .d_img li.d_pos5 { display: block; width: 200px; right: 0; top: 90px; z-index: 1 ;}
/*#d_tab29 .d_img li div{position:absolute;top:0;height:100%;width:100%;background: white;box-shadow: 1px 1px 5px #666;border:1px solid #aaa;font-size:12px;}*/
/*.pos_tp,.pos_bt{width:300px;margin:0 auto;display: block;font-size:16px;}*/
#d_tab29 .d_next,#d_tab29 .d_prev{
display: block;
width:40px;
height:40px;
top: 220px;
z-index: 10;
cursor: pointer ;
background: url("../img/button.png");
}
#d_tab29 .d_next {
position: absolute;
right: 9%;
background-position: -150px -399px;
}
#d_tab29 .d_prev {
position: absolute;
left: 9%;
background-position: -150px -350px;
}
html:
<div id="d_tab29">
<ul class="d_img">
<li class="d_pos1" style="left: 0px;"><img src="../img/w_ac.png"></li>
<li class="d_pos2" style="left: 80px;"><img src="../img/w_ad.png"></li>
<li class="d_pos3" style="left: 280px;"><img src="../img/w_bu.png"></li>
<li class="d_pos4" style="left: 530px;"><img src="../img/w_da.png"></li>
<li class="d_pos5" style="left: 680px;"><img src="../img/w_dv.png"></li>
<li style="left: 600px;"><img src="../img/w_mo.png"></li>
<li style="left: 600px;"><img src="../img/w_or.png"></li>
<li style="left: 600px;"><img src="../img/w_bu.png"></li>
<li style="left: 600px;"><img src="../img/w_da.png"></li>
<li style="left: 600px;"><img src="../img/w_dv.png"></li>
</ul>
<!--<ul class="d_menu"><li class="d_select"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>-->
<p class="d_prev"></p>
<p class="d_next"></p>
</div>
js:
(function(a) {
a.fn.DB_rotateRollingBanner = function(b) {
var c = {
key: "",
moveSpeed: 1500,
autoRollingTime: 5000
};
a.extend(c, b);
return this.each(function() {
var k = a(this);
var l = k.find(".d_img");
var h = l.find(">li");
var src= h.find(">img");
var z = k.find(".d_prev");
var B = k.find(".d_next");
var p = h.length;
var y = 5;
var s = "next";
var f;
var C;
var u = [];
var x = [];
var m = 1;
var t = 0;
var o = 0;
var v = 0;
var e = 0;
w();
function w() {
d();
g();
n();
change();
}
function d() {
for (var E = 0; E < p; E++) {//p=h.length 10
var D = h.eq(E);//閬嶅巻姣忎竴涓猯i
if (E < y) {//y=5
u[E] = {
left: D.position().left,
top: D.position().top,
zIndex: D.css("z-index"),
width: D.width()
};
D.css("left", u[E].left)
} else {
D.css("left", u[y - 1].left)
}
x.push(D);
}
h = l.find(">li");
//r.eq(0).addClass("d_select")
}
function g() {
B.bind("click",//t涓哄搴旂殑index鍊�
function() {
if (m) {
s = "next";
m = 0;
if (t == p - 1) {
t = 0
} else {
t++
}
q()
}
});
z.bind("click",
function() {
if (m) {
s = "prev";
m = 0;
if (t == 0) {
t = p - 1
} else {
t--
}
q()
}
})
}
function q() {
if (s == "next") {
for (i = 0; i < y; i++) {//y=5 鏄剧ず鐨勪釜鏁�
var D = u[i - 1];
if (i == 0) {
x[i].fadeOut(c.moveSpeed)
} else {
x[i].css("z-index", D.zIndex).animate({
left: D.left,
top: D.top,
width: D.width
}, c.moveSpeed)
}
}
var D = u[y - 1];
if (x.length != y) {
x[y].css({
left: D.left,
top: D.top,
width: D.width,
"z-index": D.zIndex
}).fadeIn(c.moveSpeed,
function() {
m = 1
})
} else {
x[0].stop().css({
left: D.left,
top: D.top,
width: D.width,
"z-index": D.zIndex
}).fadeIn(c.moveSpeed,
function() {
m = 1
})
}
x.push(x.shift())
} else {
for (i = 0; i < y; i++) {
var D = u[i + 1];
if (i == y - 1) {
x[i].css("z-index", 0).fadeOut(c.moveSpeed)
} else {
x[i].css("z-index", D.zIndex).animate({
left: D.left,
top: D.top,
width: D.width
},
c.moveSpeed)
}
}
var D = u[0];
x[x.length - 1].stop().css({
left: D.left,
top: D.top,
width: D.width,
"z-index": D.zIndex
}).fadeIn(c.moveSpeed,
function() {
m = 1
});
x.unshift(x.pop())
}
o = t;
e++
}
function n() {
f = setInterval(A, c.autoRollingTime)
}
function A() {
B.click()
}
function change(){
setInterval(function(){
for(var i=0;i<h.length;i++){
var img= h.eq(i)[0].children[0];
//alert(parseInt(getStyle2(h[i])['width']));
//var p1 = h.eq(i)[0].getElementsByTagName("div")[0].children[0];
//var p2 = h.eq(i)[0].getElementsByTagName("div")[0].children[1];
//p1.style.zoom = (p1.parentNode.offsetWidth/299.0);
//p2.style.zoom = (p1.parentNode.offsetWidth/299.0);
if((parseInt(getStyle2(h[i])['width']))>280){
if(img.src.indexOf("img/w_")>0) {
img.src =img.src.replace("img/w_","img/r_");
}
}
else {
if(img.src.indexOf("img/r_")>0) {
img.src = img.src.replace("img/r_", "img/w_");
}
}
}
},200)
}
//function GetCurrentStyle (obj, prop) {
// if (obj.currentStyle) {
// return obj.currentStyle[prop];
// }
// else if (window.getComputedStyle) {
// propprop = prop.replace (/([A-Z])/g,"-$1");
// propprop = prop.toLowerCase ();
// return document.defaultView.getComputedStyle (obj,null)[prop];
// }
// return null;
//}
//function getDefaultStyle(obj,attribute){
// return obj.currentStyle?obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj,false)[attribute];
//}
function getStyle2(obj)
{
if(obj.currentStyle===undefined)
{
return getComputedStyle(obj);
}else{
return obj.currentStyle;//IE
}
}
})
}
})(jQuery);
$('#d_tab29').DB_rotateRollingBanner({
key:"c37080",
moveSpeed:1500,
autoRollingTime:5000
})