jQuery与原生js实现banner轮播图：
（jq需自己加载）（图片需自己加载）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>banner轮播图</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#banner {
position: relative;
height: 454px;
width: 730px;
margin: 100px auto 0;
}
#banner-con li {
position: absolute;
left: 0;
top: 0;
/*opacity: 0;*/
display: none;
}
#banner-con li.show {
opacity: 1;
display: block;
}
#banner-con li img {
float: left;
height: 454px;
width: 730px;
}
#banner-num {
position: absolute;
right: 41%;
bottom: 20px;
}
#banner-num li {
float: left;
height: 20px;
width: 20px;
line-height: 20px;
font-size: 18px;
text-align: center;
border-radius: 20px;
color: #fff;
margin-right: 5px;
background: #333;
cursor: pointer;
}
#banner-num li.active {
background: red;
}
#banner-left {
position: absolute;
top: 200px;
left: 10px;
display: block;
height: 60px;
width: 20px;
font-size: 30px;
line-height: 60px;
text-align: center;
background: gray;
color: #fff;
cursor: pointer;
opacity: 0;
}
#banner-right {
position: absolute;
top: 200px;
right: 10px;
display: block;
height: 60px;
width: 20px;
font-size: 30px;
line-height: 60px;
text-align: center;
background: gray;
color: #fff;
cursor: pointer;
opacity: 0;
}
</style>
<!--js原生方式-->
<!--<script type="text/javascript">
window.onload = function() {
var banner = document.getElementById(\'banner\');
bannerCon = document.getElementById(\'banner-con\'),
bannerConLis = bannerCon.children,
bannerNum = document.getElementById(\'banner-num\'),
bannerNumLis = bannerNum.children,
bannerLeft = document.getElementById(\'banner-left\'),
bannerRight = document.getElementById(\'banner-right\'),
timer = null,
timer2 = null,
num = 0;
function move() {
clearInterval(timer);
for (var i = 0; i < bannerConLis.length; i++) {
bannerConLis[i].style.opacity = 0;
bannerConLis[i].style.display = \'none\';
bannerNumLis[i].style.background = \'#ccc\'
}
bannerConLis[num].style.display = \'block\';
bannerNumLis[num].style.background = \'red\';
var index = 0;
timer = setInterval(function() {
index += 0.02;
if(index >= 1) {
index = 1;
clearInterval(timer);
}
bannerConLis[num].style.opacity = index;
},20);
}
function automove() {
num ++;
if(num >= bannerConLis.length) {
num = 0;
}
move();
}
timer2 = setInterval(automove,2000);//进入页面执行
//鼠标移上左右侧按钮显示效果
banner.onmouseenter = function() {
bannerLeft.style.opacity = 1;
bannerRight.style.opacity = 1;
}
banner.onmouseleave = function() {
bannerLeft.style.opacity = 0;
bannerRight.style.opacity = 0;
}
for (var i = 0; i < bannerNumLis.length; i++) {
bannerNumLis[i].index = i;
bannerNumLis[i].onmouseover = function() {
clearInterval(timer2);
num = this.index;
move();
}
bannerNumLis[i].onmouseout = function() {
timer2 = setInterval(automove,2000);
}
}
bannerRight.onclick = function() {
clearInterval(timer2);
num ++;
if(num >= bannerConLis.length) {
num = 0;
}
move();
timer2 = setInterval(automove,2000);
}
bannerLeft.onclick = function() {
clearInterval(timer2);
num --;
if(num < 0) {
num = bannerConLis.length - 1;
}
move();
timer2 = setInterval(automove,2000);
}
}
</script>-->
<!--jq实现方式 -->
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$(\'#banner\').mouseenter(function() {
$(\'#banner-left\').css(\'opacity\',\'1\');
$(\'#banner-right\').css(\'opacity\',\'1\');
});
$(\'#banner\').mouseleave(function() {
$(\'#banner-left\').css(\'opacity\',\'0\');
$(\'#banner-right\').css(\'opacity\',\'0\');
});
var n = 0;
$(\'#banner-right\').click(function() {
clearInterval(timer);
n ++;
if (n >= $(\'#banner-con li\').length) {
n = 0;
}
$(\'#banner-con li\').eq(n).fadeIn(800).siblings().hide();
$(\'#banner-num li\').eq(n).addClass(\'active\').siblings().removeClass(\'active\');
Move();
});
$(\'#banner-left\').click(function() {
clearInterval(timer);
n --;
if (n < 0) {
n = $(\'#banner-con li\').length - 1;
}
$(\'#banner-con li\').eq(n).fadeIn(800).siblings().hide();
$(\'#banner-num li\').eq(n).addClass(\'active\').siblings().removeClass(\'active\');
Move();
});
$(\'#banner-num li\').mouseenter(function() {
clearInterval(timer);
n=$(\'#banner-num li\').index(this);
$(\'#banner-con li\').eq(n).fadeIn(800).siblings().hide();
$(\'#banner-num li\').eq(n).addClass(\'active\').siblings().removeClass(\'active\');
Move();
});
var timer = null;
function Move() {
clearInterval(timer);
timer = setInterval(function() {
n ++;
if(n >= $(\'#banner-con li\').length) {
n = 0;
}
$(\'#banner-con li\').eq(n).fadeIn(800).siblings().hide();
$(\'#banner-num li\').eq(n).addClass(\'active\').siblings().removeClass(\'active\');
},2000);
}
Move();
});
</script>
</head>
<body>
<div id="banner">
<ul id="banner-con">
<li class="show"><a href="javascript:;"><img src="images/57d9134bN975e81a4.jpg"/></a></li>
<li><a href="javascript:;"><img src="images/57e0e2d9N2e23e425.jpg"/></a></li>
<li><a href="javascript:;"><img src="images/57e230beN8dacb637.jpg"/></a></li>
<li><a href="javascript:;"><img src="images/57e23970N9b28af32.jpg"/></a></li>
<li><a href="javascript:;"><img src="images/57e25734N989a9c70.jpg"/></a></li>
<li><a href="javascript:;"><img src="images/57e339a5Nac4207ad.jpg"/></a></li>
</ul>
<ul id="banner-num">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<span id="banner-left"><</span>
<span id="banner-right">></span>
</div>
</body>
</html>