<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style type="text/css"> *{ margin: 0; padding: 0; font-family: "微软雅黑"; font-size: 12px; -webkit-user-select: none; } ul,li{ list-style-type: none; } img{ display: block; border: none; } a, 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 .bannerInner{ position: absolute; top: 0; left: 0; width: 1000px; height: 300px; } .banner .bannerInner div{ width: 1000px; height: 300px; float: left; background: url(img/loading.gif) no-repeat center center; } .banner .bannerInner img{ display: none; width:100%; height: 100%; opacity: 0; filter:alpha(opacity=0); } .banner .bannerTip{ position: absolute; /*left:50%; margin-left: -80px; width: 100%;*/ right:20px; bottom:20px; height: 12px; overflow: hidden; } .banner .bannerTip li{ float: left; margin-left: 10px; width: 12px; height: 12px; border-radius: 50%; background-color: #31B0D5; cursor: pointer; } .banner .bannerTip li.bg{ background-color: #FF0000; } .banner a{ position: absolute; top:50%; margin-top: -25px; width:30px; height: 50px; background-image: url("img/pre.png"); display: none; 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: -50px 0; } </style> </head> <body> <!--<div class="banner" id="banner1"> <div class="bannerInner"> <div><img src="img/banner1.jpg"></div> <div><img src="img/banner2.jpg"></div> <div><img src="img/banner3.jpg"></div> <div><img src="img/banner4.jpg"></div> </div> <ul class="bannerTip"> <li></li> <li></li> <li></li> <li></li> </ul> <a class="bannerLeft" href="javascript:;"></a> <a class="bannerRight" href="javacsript:;"></a> </div>--> <div class="banner" id="banner2" style="margin-top: 30px;"> <div class="bannerInner"></div> <ul class="bannerTip"></ul> <a class="bannerLeft" href="javascript:;"></a> <a class="bannerRight" href="javacsript:;"></a> </div> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <script type="text/javascript" src="banner2.js"></script> <script type="text/javascript"> //$("#banner1").banner("banner-data.txt",2000); $("#banner2").banner("banner-data2.txt",3000); </script> </body> </html>
[
{"img":"img/banner1.jpg","desc":"图1"},
{"img":"img/banner2.jpg","desc":"图2"},
{"img":"img/banner3.jpg","desc":"图3"}
]
//无缝滚动 ~function(jQuery){//接收传入的jQuery形参，让闭包里的jQuery都是自己私有的变量，不用全局下的jQuery function lbtBanner(ajaxURL,interval){ var $banner = $(this);//$("#banner1")调用banner这个方法，方法中的this是#banner1 var $bannerInner = $banner.children(".bannerInner"),$bannerTip = $banner.children(".bannerTip");//分别在子元素中获取 var $bannerLeft = $banner.children(".bannerLeft"),$bannerRight = $banner.children(".bannerRight"); var $divList = null,$imgList = null,$oLis = null;//这三个是通过jsonData加载成功才有的，所以在这里不能获取 //1，AJAX读取数据 var jsonData = null,count = null; $.ajax({ url: ajaxURL + "?_=" + Math.random(), type: "get",//get请求 dataType: "json",//json格式对象 async: false,//同步，数据请求失败下面代码不执行 success: function (data){//请求成功就把data赋值给jsonData jsonData = data; } }); //2，实现数据绑定 bindData();//执行方法实现数据绑定 function bindData(){ var str = "",str2 = ""; $.each(jsonData,function(index,item){//写在对象上的工具方法，遍历jsonData对象 str += " <div><img src='' trueImg=' " + item["img"] + " '></div> ";//拼接字符串注意""和''用法 index === 0 ? str2 += "<li class='bg'></li>" : str2 += "<li></li>";//如果是第一个让它有选中样式 }); str += '<div><img src="" trueImg="' + jsonData[0]["img"] + '"/></div>'; $bannerInner.html(str);//jQ方法添加内容 $bannerTip.html(str2); count = jsonData.length+1; $bannerInner.css({width:count*1000}); //内容添加完成就可以获取这些元素了 $divList = $bannerInner.children("div"); $imgList = $bannerInner.find("img");//后代获取 $oLis = $bannerTip.children("li"); } //3，实现图片的延迟加载 window.setTimeout(lazyImg,500);//设置定时器 function lazyImg(){ $imgList.each(function (index,item){//遍历所有图片进行延迟加载 var _this = this;//保持_this也是当前图片，$imgList.eq(index)就是item var oImg = new Image;//创建一个图片类的实例赋值给临时变量 //当前图片的trueImg赋值给临时图片变量src，$(this)和$(item)一样，回调函数中的this就是我当前遍历的这一项 oImg.src = $(this).attr("trueImg"); oImg.onload = function(){//临时图片加载成功后执行的方法 $(_this).prop("src",this.src).css("display","block"); //当前真实图片添加内置属性，this.src->oImg.src，把临时图片的路径赋值给真实图片的路径src，并且添加块状显示的样式 oImg = null; $(_this).animate({opacity:1},300) } }); } //4，实现自动轮播 interval = interval || 3000;//形参传入时间就用传入的，未传入就用默认的3000毫秒 var step = 0, autoTimer = null;//定义全局变量step和autoTimer定时器 autoTimer = window.setInterval(autoMove,interval);//设置定时器 function autoMove(){ if(step>=(count-1)){ step = 0; $bannerInner.css("left",0);//立马回到第一张，肉眼看不出来 } step++;//索引累加 $bannerInner.animate({left:-step*1000},500) changeTip();//执行轮播切换方法 } //第一张 step=0 2000 step=1 运动到-1000 //第二张 step=1 2000 step=2 运动到-2000 function changeTip(){ var tempStep = step >= $oLis.length ? 0 : step; $oLis.each(function(index,item){ if(index === tempStep){ $(this).addClass("bg").siblings().removeClass("bg") } }); } //5,控制左右按钮的显示隐藏和自动轮播的开始和暂停 $banner.on("mouseover",function(){//为整个banner添加鼠标移动事件 window.clearInterval(autoTimer);//清除定时器 $bannerLeft.css("display","block");//左右按钮显示 $bannerRight.css("display","block"); }).on("mouseout",function(){//链式写法，为整个banner添加鼠标移动事件 autoTimer = window.setInterval(autoMove,interval);//设置定时器 $bannerLeft.css("display","none");//左右按钮隐藏 $bannerRight.css("display","none"); }); //6，实现焦点切换 $oLis.on("click",function(){//为每个li焦点添加鼠标点击事件 step = $(this).index();//this->当前oLis，获取当前li的索引存给step changeTip();//执行轮播图切换方法，此时方法中的step就是刚刚赋值的step $bannerInner.animate({left:-step*1000},500); }); //7，实现左右切换 $bannerRight.on("click",autoMove);//给右按钮添加点击事件执行autoMove方法 $bannerLeft.on("click",function(){//给做按钮添加点击事件 if(step <= 0){//如果索引为0，切换到第一张了 step = count - 1;//把索引赋值为图片的总数量值，再累减的时候就变成最后一张了 $bannerInner.css({left:-step*1000},1000); } step--;//索引累减 $bannerInner.animate({left:-step*1000},500); changeTip();//执行轮播图切换方法，此时方法中的step就是刚刚赋值的step }); } jQuery.fn.extend({//扩展jQuery插件，jQuery现在是这个闭包里的私有变量 banner: lbtBanner//基于原型扩展一个方法banner }); }(jQuery)//把全局下的jQuery传给自执行函数的形参jQuery进来，让闭包里的jQuery都是自己私有的变量，不用全局下的jQuery