简单实现js轮播图效果

本文实例为大家分享了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":"第四张轮播图"}

]

以上是 简单实现js轮播图效果 的全部内容, 来源链接: utcz.com/z/355473.html

回到顶部