本文實例為大家分享了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":"第四張輪播圖"}
]
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
