CSS布局样式代码
*{padding:0;margin:0;list-style:none;border:0;}
/* 焦点图 */
#show {
position: relative;
height: 320px;
width: 960px;
margin: 0 auto;
}
#show a {
float: left;
display: inline;
}
#show .img {
position: absolute;
width: 960px;
height: 320px;
overflow: hidden
}
#show .img SPAN {
position: absolute;
width: 19999px;
display: block
}
#show .btns {
z-index: 10;
position: absolute;
width: 960px
}
#show .btns B {
position: absolute;
width: 100px;
display: block;
height: 14px;
overflow: hidden;
top: 295px;
left: 50%
}
#show .btns B I {
width: 10px;
background: #414140;
float: left;
height: 10px;
font-size: 0px;
overflow: hidden;
cursor: pointer;
margin-right: 6px;
border: #414140 2px solid;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px
}
#show .btns B I:hover {
background: #a7a7a6
}
#show .btns B I.on {
background: #3cd2f1;
cursor: default
}
#show .btns B I.on:hover {
background: #3cd2f1;
cursor: default
}
#show .btns S {
position: absolute;
WIDTH: 60px;
display: none;
height: 80px;
overflow: hidden;
top: 130px;
cursor: pointer
}
#show .btns S I {
position: absolute;
width: 60px;
background: url(../img/btn_show.png);
height: 160px;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="../img/btn_show.png");
_background: none;
}
#show .btns S.prev {
left: 0px
}
#show .btns S.prev I {
top: -80px
}
#show .btns S.next {
right: 0px
}
.show-hover#show .btns S {
display: block
}
.masks {
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
height: 320px;
position: absolute;
background: #000;
overflow: hidden
}
需要下载jquery库文件
jquery官网:http://jquery.com/
js实现动画代码
/* 焦点图 */
$(function(){
var $root = $('#show'),
root_w = $root.width();
var p = $root.find('> div.img > span'),
n = p.children().length;
p.children().eq(0).clone().appendTo(p);
function onoff(on, off) {
(on !== -1) && btns.eq(on).addClass('on');
(off !== -1) && btns.eq(off).removeClass('on');
}
function dgo(n, comp) {
var idx = n > max ? 0 : n;
onoff(idx, cur);
cur = idx;
p.stop().animate({left: -1 * root_w * n}, {duration: dur, complete: comp});
if(idx == 0 ){p.children().eq(n-1).clone().appendTo('.mk1');}else{$('.mk1').empty()};
}
// slast -> 如果播放完最后1张,要如何处理
// true 平滑切换到第1张
var cur = 0,
max = n - 1,
pt = 0,
stay = 3 * 1000, /* ms */
dur = .3 * 1000, /* ms */
btns;
function go(dir, slast) {
pt = +new Date();
if (dir === 0) {
onoff(cur, -1);
p.css({left: -1 * root_w * cur});
return;
}
var t;
if (dir > 0) {
t = cur + 1;
if (t > max && !slast) {
t = 0;
}
if (t <= max) {
return dgo(t);
}
return dgo(t, function(){
p.css({left: 0});
});
} else {
t = cur - 1;
if (t < 0) {
t = max;
p.css({left: -1 * root_w * (max + 1)});
return dgo(t);
} else {
return dgo(t);
}
}
}
btns = $((new Array(n + 1)).join('<i></i>'))
.each(function(idx, el) {
$(el).data({idx: idx});
});
var pn_btn = $('<s class="prev"><i></i></s><s class="next"><i></i></s>');
$('<div class="btns"/ >')
.append(
$('<b/>')
.append(btns)
.delegate('i', 'click', function(ev) {
dgo($(this).data('idx'));
})
.css({width: n * 20, marginLeft: -10 * n})
)
.delegate('s', 'click', function(ev) {
go($(this).is('.prev') ? -1 : 1, true);
})
.append(pn_btn)
.appendTo($root);
go(1);
// 自动播放
var ie6 = $.browser.msie && $.browser.version < '7.0';
$root.hover(function(ev) {
// $root[(ev.type == 'mouseenter' ? 'add' : 'remove') + 'Class']('show-hover');
if (ie6) {
pn_btn[ev.type == 'mouseenter' ? 'show' : 'hide']();
} else {
pn_btn.stop()['fade' + (ev.type == 'mouseenter' ? 'In' : 'Out')]('fast');
}
});
if ($root.attr('rel') == 'autoPlay') {
var si = setInterval(function(){
var now = +new Date();
if (now - pt < stay) {
return;
}
go(1, true);
}, 5000);
p.mouseover(function(){
clearInterval(si);
})
p.mouseout(function(){
si = setInterval(function(){
var now = +new Date();
if (now - pt < stay) {
return;
}
go(1, true);
}, 5000);})
}
var wid = $(document.body).width();
var swid = (wid-960)/2;
var bwid = root_w * n;
$('#show').css('width',wid);$('#show .img').css('width',wid);
$('#show .btns').css('left',swid)
$('.masks').css('width',swid);$('.mk2').css('right',0);
$('#show .img span').css(({paddingLeft: swid }))
})();
HTML页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播图</title>
<!--引入CSS布局-->
<link rel="stylesheet" href="css/slide.css" />
<!--引入jquery库-->
<script src="js/jquery-1.12.4.js"></script>
<!--引入js代码-->
<script type="text/javascript" src="js/slide.js"></script>
</head>
<body>
<div>
<div id="show" rel="autoPlay">
<div class="img">
<span>
<a href="#" ><img src="img/adver01.jpg" width="960px" height="320px"/></a>
<a href="#" ><img src="img/adver02.jpg" width="960px" height="320px"/></a>
<a href="#" ><img src="img/adver03.jpg" width="960px" height="320px"/></a>
<a href="#" ><img src="img/adver04.jpg" width="960px" height="320px"/></a>
<a href="#" ><img src="img/adver05.jpg" width="960px" height="320px"/></a>
<a href="#" ><img src="img/adver06.jpg" width="960px" height="320px"/></a>
</span>
<div class="masks mk1"></div>
<div class="masks mk2"></div>
</div>
</div>
</div>
<br>
</body>
</html>
效果图如下