简单实现js轮播图效果
程序员文章站
2022-05-26 08:33:23
本文实例为大家分享了js实现轮播图效果展示的具体代码，供大家参考，具体内容如下
html结构
本文实例为大家分享了js实现轮播图效果展示的具体代码，供大家参考，具体内容如下
html结构
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
-webkit-user-select:none;
}
ul,li{
list-style:none;
}
img{
display:block;
border:none;
}
a{
display:block;
color:#000;
text-decoration: none;
}
a:hover,a:active,a:visited,a:target{
display:block;
color:#000;
text-decoration: none;
}
.banner{
position:relative;
margin:0 auto;
width:1000px;
height:300px;
overflow:hidden;
}
.banner .inner{
position:absolute;
top:0;
left:0;
height:300px;
width:1000px;/*在js数据绑定结束后根据请求数据的多少来动态调整宽度*/
}
.banner .inner div{
float:left;
width:1000px;
height:300px;
background:url('img/default.gif') no-repeat center center #e1e1e1;
}
.banner .inner img{
display:none;
width:100%;
height:100%;
opacity:0;
filter:alpha(opacity=0);
}
.banner .bannertip{
height:18px;
position:absolute;
right:20px;
bottom:20px;
}
.banner .bannertip li{
float:left;
margin-left:10px;
width:18px;
height:18px;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.banner .bannertip li.bg{
background:red;
}
.banner a{
display:none;
position:absolute;
top:50%;
margin-top:-22.5px;
width:30px;
height:45px;
background-image:url("img/pre.png");
background-repeat:no-repeat;
opacity:0.5;
filter:alpha(opacity=50);
}
.banner a:hover{
opacity:1;
filter:alpha(opacity=100);
}
.banner a.bannerleft{
left:20px;
background-position:0 0;
}
.banner a.bannerright{
right:20px;
background-position:-45px 0;
}
</style>
</head>
<body>
<div class='banner' id='banner'>
<div class='inner'>
<div><img src="img/banner1.jpg" alt=""></div>
<div><img src="img/banner2.jpg" alt=""></div>
<div><img src="img/banner3.jpg" alt=""></div>
<div><img src="img/banner4.jpg" alt=""></div>
</div>
<ul class='bannertip'>
<li class='bg'></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" class='bannerleft'></a>
<a href="javascript:;" class='bannerright'></a>
</div>
</body>
</html>
js
(function(){
var banner = document.getelementbyid('banner');
var bannerinner = utils.firstchild(banner);
var bannertip = utils.children(banner,'ul')[0];
var imglist = bannerinner.getelementsbytagname('img');
var olis = bannertip.getelementsbytagname('li');
var bannerleft = utils.children(banner,'a')[0];
var bannerright = utils.children(banner,'a')[1];
//实现数据绑定：ajax请求数据、按照字符串拼接的方式绑定数据
var jsondata = null,count = null
~function(){
var xhr = new xmlhttlrequest;
xhr.open('get',"json/banner.txt?_="+math.random(),false);
xhr.onreadystatechange = function(){
if(xhr.readystate === 4 && /^2\d{2}$/.test(xhr.status)){
jsondata = utils.formatjson(xhr.responsetext);
}
}
xhr.send(null);
}()
~function(){
//绑定轮播图区域的数据
var str = "";
if(jsondata){
for(var i = 0,len = jsondata.length;i<len;i++){
str+='<div><img src="" trueimg="'+jsondata[i]['img']+'"></div>'
}
//为了实现无缝滚动，需要把第一张克隆一份放在末尾
str+= '<div><img src="" trueimg="'+jsondata[0]['img']+'"></div>'
}
bannerinner.innerhtml = str;
count = jsondata.length+1;
utils.css(bannerinner,"width",count*1000);
//绑定焦点区域的数据
str = '';
if(jsondata){
for(var i = 0,len = jsondata.length;i<len;i++){
i===0?str+='<li class="bg"></li>':str+='<li></li>';
}
}
bannertip.innerhtml = str;
}()
//图片延迟加载
function lazyimg(){
for(var i = 0,len = imglist.length;i<len;i++){
~function(i){//这里使用闭包，来避免onload事件异步导致的只有最后一张图片延迟加载的问题
var curimg = imglist[i];
var oimg = new image;
oimg.src = curimg.getattribute('trueimg');
oimg.onload = function(){
curimg.src = this.src;
curimg.style.display = "block";
oimg = null;
myanimate(curimg,{opacity:1},300)
}
}(i)
}
}
window.settimeout(lazyimg,500);
var step = 0;//记录的是步长，（当前是哪一张图片，0是第一张图片）
//实现自动轮播
var autotimer = window.setinterval(automove,2000);
function automove(){
if(step===count-1){
step =0;
bannerinner.style.left = 0
}
step++;
myanimate(bannerinner,{left:-step*1000},500)
changetip();
}
//实现焦点对齐
function changetip(){
var tempstep = step > olis.length-1 ? 0 : step;
for(var i = 0,len = olis.length;i<len;i++){
var curli = olis[i];
i === tempstep ? utils.addclass(curli,"bg") : utils.removeclass(curli,"bg")
}
}
//鼠标滑过停止和开启轮播
banner.onmouseover = function(){
window.clearinterval(autotimer);
bannerleft.style.display = bannerright.style.display = 'block';
}
banner.onmouseout = function(){
autotimer = window.setinterval(autotimer,2000);
bannerleft.style.display = bannerright.style.display = 'none';
}
//点击焦点实现轮播图的切换
~function(){
for(var i = 0,len = olis.length;i<len;i++){
var curli = olis[i];
curli.index = i;
curli.onclick = function(){
step = this.index;
changetip();
myanimate(bannerinner,{left:-step*1000},500)
}
}
}()
//实现左右切换
bannerright.onclick = automove();
bannerleft.onclick = function(){
if(step<=0){
step = count-1;
utils.css(bannerinner,"left",-step*1000);
}
step--;
automove();
}
})()
绑定的数据
[
{"img":"img/banner1.jpg","desc":"第一张轮播图"},
{"img":"img/banner2.jpg","desc":"第二张轮播图"},
{"img":"img/banner3.jpg","desc":"第三张轮播图"},
{"img":"img/banner4.jpg","desc":"第四张轮播图"}
]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。