<!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
标签：function,轮播,img,jq,bannerInner,step,var,banner From： https://www.cnblogs.com/liufeiran/p/17947653