web网页轮播图/js控制轮播图

最新推荐文章于 2024-04-13 17:28:35 发布

火星第一帅

最新推荐文章于 2024-04-13 17:28:35 发布

阅读量4k

点赞数 3

分类专栏： js网页轮播图文章标签： js web 轮播图网页轮播图 js轮播图

js网页轮播图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

以下是完整网页轮播图完整代码，喜欢的码农可以赋值进行调试使用：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

#box{

width:660px;

height:330px;

border:5px solid #e5e5e5;

margin:20px auto;

position:relative;

}

#img{

width:660px;

height:330px;

}

#lunbo-title{

height:40px;

line-height:40px;

position:absolute;

right:15px;

color:#fff;

font-size:14px;

}

#lunbo-num{

height:40px;

line-height:40px;

position:absolute;

z-index: 11;

left:15px;

color:#fff;

font-size:14px;

}

.wrap-prev-next{

width:100%;

height:40px;

position:absolute;

z-index: 10;

background: #000;

line-height:30px;

left:0;

bottom:-20px;

opacity:0.8;

}

.prev-next{

width:40px;

height:50px;

line-height:50px;

position:absolute;

top:145px;

font-size:28px;

color:#FFF;

text-decoration:none;

}

a:hover {

opacity:0.3;

}

#prev {

left:5px;

}

#next {

right:5px;

}

</style>

</head>

<body>

<div id="box">

<a id="imga" href="" target="_blank">

<img id="img" />

</a>

<p class="wrap-prev-next">

<a id="lunbo-title">图片文字加载中……</a>

<a id="lunbo-num"></a>

</p>

<a id="prev" class="prev-next" href="javascript:void(0)">《</a>

<a id="next" class="prev-next" href="javascript:void(0)">》</a>

</div>

</body>

<script>

window.onload= function(){

var oBox=document.getElementById("box");

var imga = document.getElementById("imga");

var oImg=document.getElementById("img");

var oText1=document.getElementById("lunbo-title");

var p1=document.getElementById("p1");

var oText2=document.getElementById("lunbo-num");

var oPrev=document.getElementById("prev");

var oNext=document.getElementById("next");

var arrSrc=[

"http://p2.cri.cn/M00/98/27/CqgNOlsQRXaAMYcqAAAAAAAAAAA746.660x330.jpg",

"http://storage.j1home.com/Provider/licensePhoto//%25E7%25A4%25BE%25E4%25BC%259A%25E7%25BB%2584%25E7%25BB%2587/%25E5%2585%25AC%25E7%259B%258A/%25E5%2595%2586%25E5%25AE%25B6/3L%25E7%25BE%258E%25E5%258F%2591%25E6%25B2%2599%25E9%25BE%2599/1509514828534.png",

"http://p2.cri.cn/M00/98/27/CqgNOlsQRXaAMYcqAAAAAAAAAAA746.660x330.jpg",

var arrTxt=["文案1","文案2","文案3","文案4","文案5","文案6","文案7"];

var arrHref=["http://news.cri.cn/20180531/8abbc78f-bfed-db9d-c919-728ecb02e0ef.html",

"http://news.cri.cn/20180601/c64d3cea-2ca9-5e14-ed79-dad56f3b7a99.html",

"http://news.cri.cn/20180601/c9aee353-5a34-e908-49d2-995955ef4486.html",

"http://news.cri.cn/20180531/8abbc78f-bfed-db9d-c919-728ecb02e0ef.html",

"http://news.cri.cn/20180531/8abbc78f-bfed-db9d-c919-728ecb02e0ef.html"];

var num=0;

function lunboFun(){

imga.href= arrHref[num];

oImg.src = arrSrc[num];

oText1.innerHTML= num+1 +"/" + arrSrc.length;