<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片旋转切换效果代码</title>
</head>
<style>
*{margin:0;padding:0;}
ul,li{list-style:none}
img{border:0;}
#d_tab29{
position:relative;
height:400px;
background:url('img/bg3.jpg') no-repeat center 0;
text-align:left;
}
#d_tab29 .d_img{
position:relative;
margin:0 auto;
width:1000px;
height:100%
}
#d_tab29 .d_img li{
position:absolute;
z-index:0;
background:#000;
text-align: center;
overflow: hidden;
display:none;
}
#d_tab29 .d_img li img{
max-width:100%;
max-height:100%;
vertical-align: middle;
}
#d_tab29 .d_img li.d_pos1{
display:list-item;width:400px;height:240px;line-height:236px;
left:0%; top:60px; z-index:1;
}
#d_tab29 .d_img li.d_pos2{
display:list-item;width:450px;height:270px;line-height:266px;
left:10%;top:40px;z-index:2;
}
#d_tab29 .d_img li.d_pos3{
display:list-item;width:500px;height:300px;line-height:296px;
left:25%;top:20px;z-index:3;
}
#d_tab29 .d_img li.d_pos4{
display:list-item;width:450px;height:270px;line-height:266px;
right:10%;top:40px;z-index:2;
}
#d_tab29 .d_img li.d_pos5{
display:list-item;width:400px;height:240px;line-height:236px;
right:0%;top:60px;z-index:1;
}
#d_tab29 .d_menu{position:absolute;bottom:20px;width:100%;text-align:center}
#d_tab29 .d_menu li{display:inline-block;zoom:1;*display:inline;background:url('img/btn.png') no-repeat 0 0;width:12px;height:12px;cursor:pointer;margin-right:3px}
#d_tab29 .d_menu li.d_select{background:url('img/btn.png') no-repeat 0 -18px}
#d_tab29 .d_next{position:absolute;left:50%;margin-left:475px;top:140px;z-index:10;cursor:pointer}
#d_tab29 .d_prev{position:absolute;left:50%;margin-left:-525px;top:140px;z-index:10;cursor:pointer}
</style>
<body style="min-width:1200px">
<div id="d_tab29">
<ul class="d_img">
<li class="d_pos1"><img src="http://s0.ifengimg.com/2017/05/26/8d2f31f1f405bc6f3ca90b1b6a30cb04.jpg" alt=""/></li>
<li class="d_pos2"><img src="http://s0.ifengimg.com/2016/08/29/sup1_6252069a.jpg" alt=""/></li>
<li class="d_pos3"><img src="http://s0.ifengimg.com/2016/09/18/294956800488973000_6a05b55e.jpg" alt=""/></li>
<li class="d_pos4"><img src="http://s0.ifengimg.com/2016/09/18/22547823172663723_8160287a.jpg" alt=""/></li>
<li class="d_pos5"><img src="http://s0.ifengimg.com/2017/05/25/0186b155315bb24686931bca84607c6b.jpg" alt=""/></li>
<li><img src="http://s1.ifengimg.com/2016/12/05/1e4fce2fd0988a77c2edd48e08b8f2fa.jpg"></li>
<li><img src="https://c1.ifengimg.com/mappa/2016/11/24/f2dec0d56eed1e61e7ccff1c750d2392.jpg"></li>
<li><img src="http://s0.ifengimg.com/2017/05/26/dbcfb64bafa9990c1f3aaba9212103c6.jpg"></li>
</ul>
<ul class="d_menu">
</ul>
<p class="d_prev"><img src="img/prev.png" alt=""></p>
<p class="d_next"><img src="img/next.png" alt=""></p>
</div>
<script src="http://s0.ifengimg.com/static/js/jquery-1.7.2.min_c4de8813.js"></script>
<script>
(function($) {
$.fn.DB_rotateRollingBanner = function(options) {
var defaults = {
key: "",
moveSpeed: 200,
autoRollingTime: 5000
};
$.extend(defaults, options);
return this.each(function() {
var me = $(this);
var ul = me.find(".d_img");
var lis = ul.find(">li");
var menu = me.find(".d_menu");
var menuLis = menu.find(">li");
var prev = me.find(".d_prev");
var next = me.find(".d_next");
var lisLength = lis.length;
var num = 5; // 显示的li数量；
var NorP = "next"; // 用来判断 上一张 下一张；
var timer; // 定时器；
var btnTimer; // 点击 menu li按钮的 定时器；
var visibleLi = []; // 存贮显示li的css属性值；
var allLi = []; // 存贮所有的li；
var isFinish = 1; // 1 图片切换已经执行完 0 图片切换还没有执行完
var clickIndex = 0; // 点击的 menu li按钮 索引
var currentIndex = 0; // 正显示的 menu li的索引
var sum = 0; // 点击 menu li按钮后 要执行 “图片切换” 的次数
var count = 0; // 点击 menu li按钮后 记录“图片切换” 的次数
w();
function w() {
init(); //存贮所有的li 并设置li的属性；初始化menu li按钮；
bind(); //事件绑定
rolling(); //定时任务
}
function init() {
menu.html("");
for (var i = 0; i < lisLength; i++) { //遍历li
var liN = lis.eq(i);
if (i < num) {
visibleLi[i] = {
left: liN.position().left,
top: liN.position().top,
zIndex: liN.css("z-index"),
width: liN.width(),
height: liN.height(),
lineHeight:liN.css("line-height")
};
liN.css("left", visibleLi[i].left);
} else {
liN.css("left", visibleLi[num - 1].left);
}
allLi.push(liN);
menu.append("<li></li>");
}
menuLis = menu.find(">li");
menuLis.eq(0).addClass("d_select");
}
function bind() {
me.bind("mouseenter",
function() {
clearInterval(timer);
}).bind("mouseleave",
function() {
rolling();
});
menuLis.bind("click",
function() {
if (isFinish && currentIndex != $(this).index()) {
clickIndex = $(this).index(); //本次点击的 menu li的索引
isFinish = 0;
sum = Math.abs(clickIndex - currentIndex); //点击 menu li按钮后 要执行 “图片切换” 的次数
if (clickIndex > currentIndex) {
NorP = "next";
} else {
NorP = "prev";
}
if (sum > Math.ceil(lisLength / 2)) { //如果一次要执行 lisLength/2 次以上 就换个方向 执行的次数就少些
sum = lisLength - sum;
if (NorP == "next") {
NorP = "prev";
} else {
NorP = "next";
}
}
count = 0;
change();
if (sum > 1) {
btnTimer = setInterval(function() {
if (isFinish) {
change();
isFinish = 0;
if (count >= sum) {
clearInterval(btnTimer);
}
}
},
50)
}
}
});
next.bind("click",
function() {
if (isFinish) {
NorP = "next";
isFinish = 0;
if (clickIndex == lisLength - 1) {
clickIndex = 0;
} else {
clickIndex++;
}
change();
}
});
prev.bind("click",
function() {
if (isFinish) {
NorP = "prev";
isFinish = 0;
if (clickIndex == 0) {
clickIndex = lisLength - 1;
} else {
clickIndex--;
}
change();
}
})
}
function change() {
if (NorP == "next") { // 下一张
for (i = 0; i < num; i++) {
var D = visibleLi[i - 1];
if (i == 0) {
allLi[i].fadeOut(defaults.moveSpeed);
} else {
allLi[i].css("z-index", D.zIndex).animate({
left: D.left,
top: D.top,
width: D.width,
height: D.height,
lineHeight: D.lineHeight
},
defaults.moveSpeed);
}
}
var D = visibleLi[num - 1];
if (allLi.length != num) {
allLi[num].css({
left: D.left,
top: D.top,
width: D.width,
height: D.height,
"z-index": D.zIndex,
lineHeight: D.lineHeight
}).fadeIn(defaults.moveSpeed,
function() {
isFinish = 1;
});
} else {
allLi[0].stop().css({
left: D.left,
top: D.top,
width: D.width,
height: D.height,
"z-index": D.zIndex,
lineHeight: D.lineHeight
}).fadeIn(defaults.moveSpeed,
function() {
isFinish = 1;
});
}
allLi.push(allLi.shift());
} else { // 上一张
for (i = 0; i < num; i++) {
var D = visibleLi[i + 1];
if (i == num - 1) {
allLi[i].css("z-index", 0).fadeOut(defaults.moveSpeed);
} else {
allLi[i].css("z-index", D.zIndex).animate({
left: D.left,
top: D.top,
height: D.height,
width: D.width
},
defaults.moveSpeed);
}
}
var D = visibleLi[0];
allLi[allLi.length - 1].stop().css({
left: D.left,
top: D.top,
width: D.width,
height: D.height,
"z-index": D.zIndex,
lineHeight: D.lineHeight
}).fadeIn(defaults.moveSpeed,
function() {
isFinish = 1;
});
allLi.unshift(allLi.pop());
}
menuLis.removeClass("d_select");
menuLis.eq(clickIndex).addClass("d_select");
currentIndex = clickIndex;
count++;
}
function rolling() {
timer = setInterval(rotate, defaults.autoRollingTime);
}
function rotate() {
next.click();
}
})
}
})(jQuery);
$('#d_tab29').DB_rotateRollingBanner({
key:"c37080",
moveSpeed:200,
autoRollingTime:50000
})
</script>
</body>
</html>
1796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
