如何给下面的轮播图加左右切换的按钮？求大神
0
悬赏园豆：20
[待解决问题]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换轮播图</title>
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
#banner{
height: 280px;
width: 320px;
background: wheat;
margin: 0px auto;
border: 2px dashed gray;
position: relative;
z-index: 2;
}
#banner span{
z-index: 22;
font-size: 30px;
cursor: pointer;
}
#banner span:nth-child(1){
position: absolute;
left: 30px;
bottom: 20px;
}
#banner span:nth-child(2){
position: absolute;
bottom: 20px;
}
#allist{
height: 280px;
width: 320px;
}
#allist a{
display: none;
}
#iconlist{
position: absolute;
left: 120px;
bottom: 20px;
}
#iconlist li{
height:14px;
width: 14px;
background: blueviolet;
border-radius: 50%;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="banner">
<div id="allist">
<a href="#" style="display: block;"><img src="img/lu1.jpg"/></a>
<a href="#"><img src="img/lu2.jpg"/></a>
<a href="#"><img src="img/lu3.jpg"/></a>
<a href="#"><img src="img/lu4.jpg"/></a>
</div>
<ul id="iconlist">
<li style="background: magenta;"></p>
<p></p>
<p></p>
<p></p>
</ul>
<span><</span>
<span>></span>
</div>
</body></html>
<script>
window.onload=function(){
var imgs=document.getElementById("allist").getElementsByTagName("a");
var icon=document.getElementById("iconlist").getElementsByTagName("li");
var biglun=document.getElementById("banner");
var m=0;
var timer=setInterval(run,2000);
function run(){
if(m>=3){
m=0;
}
m++;
con(m);
toy(m);
}
function con(n){
for(var i=0;i<imgs.length;i++){
imgs[i].style.display="none";
}
imgs[n].style.display="block";
}
function toy(n){
for(var i=0;i<icon.length;i++){
icon[i].style.background="";
}
icon[n].style.background="magenta";
}
biglun.onmouseover=function(){
clearInterval(timer);
}
biglun.onmouseout=function(){
timer=setInterval(run,2000);
}
for(var i=0;i<icon.length;i++){
(function(i){
icon[i].onmouseover=function(){
con(i);
toy(i);
m=i+1;
}})(i)}
//向左向右这个怎么写？我试了好多次。。。
}</script>
所有回答(1)
0
在你的代码基础上，稍微改了一下，我整个发出来：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换轮播图</title>
<style>
* {
padding: 0px;
list-style: none;
text-decoration: none;
}
#banner {
height: 300px;
width: 480px;
background: wheat;
margin: 0px auto;
border: 1px solid gray;
position: relative;
z-index: 2;
}
#banner span {
z-index: 22;
font-size: 30px;
cursor: pointer;
}
#banner span:nth-child(1) {
position: absolute;
left: 30px;
bottom: 20px;
}
#banner span:nth-child(2) {
position: absolute;
bottom: 20px;
}
#allist {
height: 300px;
width: 480px;
}
#allist a {
display: none;
}
#allist img {
height: 300px;
width: 480px;
}
#iconlist {
position: absolute;
left: 120px;
bottom: 0px;
}
#iconlist li {
height: 22px;
width: 16px;
background: blueviolet;
border-radius: 50%;
float: left;
margin-left: 10px;
padding-left: 6px;
}
</style>
<link rel="shortcut icon" href="https://cdn.segmentfault.com/v-5c78d357/global/img/favicon.ico" />
<script src="Jquery/1.11.0/jquery.min.js"></script>
<script>
window.onload = function () {
var imgs = document.getElementById("allist").getElementsByTagName("a");
var icon = document.getElementById("iconlist").getElementsByTagName("li");
var biglun = document.getElementById("banner");
var m = 0;
var count = imgs.length;//图片总数量
var timer = setInterval(run, 2000);
function run() {
if (m >= count) {
m = 0;
}
showPic(m);
m++;
}
function con(n) {
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.display = "none";
}
imgs[n].style.display = "block";
}
function toy(n) {
for (var i = 0; i < icon.length; i++) {
icon[i].style.background = "";
}
icon[n].style.background = "magenta";
}
biglun.onmouseover = function () {
clearInterval(timer);
}
biglun.onmouseout = function () {
timer = setInterval(run, 2000);
}
for (var i = 0; i < icon.length; i++) {
(function (i) {
icon[i].onmouseover = function () {
showPic(i);
m = i + 1;
}
})(i)
}
//向左
$("#pre").click(function () {
if (m <= 0) {
m = count;
}
m--;
showPic(m);
});
//向右
$("#next").click(function () {
if (m >= count) {
m = 0;
}
showPic(m);
m++;
});
function showPic(i) {
con(i);
toy(i);
}
}
</script></head>
<body>
<div id="banner">
<div id="allist">
<a href="#" style="display: block;">
<img src="Images/海洋之心.jpg" /></a>
<a href="#">
<img src="Images/冰冠公主.jpg" /></a>
<a href="#">
<img src="Images/大秦宣太后.jpg" /></a>
<a href="#">
<img src="Images/地狱火.jpg" /></a>
<a href="#">
<img src="Images/电玩小子.jpg" /></a>
<a href="#">
<img src="Images/黄金射手座.jpg" /></a>
</div>
<ul id="iconlist">
<li style="background: magenta;"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</ul>
<span id="pre"><</span>
<span id="next">></span>
</div>
</body>
</html>
