Html代码
<div class='wrap'>
<div class='boxInner'>
// 这里面的内容都是动态添加的
</div>
<ul>
// 这里面的内容也是动态添加的
<li class='active'></li>
<li></li>
<li></li>
<li></li>
</ul>
// 左右按钮
<a herf='javascript:;' class='left'></a>
<a herf='javascript:;' class='right'></a>
</div>
CSS代码
图片是定位的，就会叠加在一起，这样就可以渐隐渐显，图片相对于容器wrap定位；ul指示器也是定位的，
*{
margin:0;
padding:0;
list-style:none;
}
.wrap{
width:1000px;
height:340px;
margin:30px auto;
position:relative;
// 图片未加载的时候显示的默认图片
background:url('img/default.gif') center no-repeat #ccc
}
.wrap img{
position:absolute;
left:0;
top:0;
// 实际开发的时候，我们会在Img身上套上一个div，所以应该考虑是是div隐藏
opacity:0;
filte:alpha(opacity=0);
z-index:0;
}
// 目前是最后一张图片在上面，可以使用z-index来使得第一张图片在上面 img:nth-child(1){ z-index:1;}
.wrap ul{
position:absolute;
right:30px;
bottom:30px;
}
.wrap ul li{
width:20px;
height:20px;
float:left;
margin-left:10px;
background:#ccc;
border-radius:50%;
}
.wrap ul li.active{
background:red;
}
// 左右按钮垂直居中 公共样式
.wrap a{
position:absolute;
top:50%;
width:30px;
height:46px;
margin-top:-23px;
background:url('img/pre.png') no-repeat; // 背景图
opacity:0.5;
filter:alpha(opacity:50);
display:none;
}
.wrap a:hover{
opacity:1;
filiter:alpha(opacity:100);
}
.wrap a.left{
left:20px;
background-position:0 0;
}
.wrap a.right{
right:20px;
background-position:-50px 0;
}
ajax获取数据
渐隐渐现的轮播图不需要多加第一张图片
// 首先先引入jquery
// 下面是自己写的js
// 首先获取元素
var $wrap=$('.wrap');
var $boxInner=$wrap.find('.boxInner'); // 限定范围的获取
var $aImg=null;
var $ul=$wrap.find('ul');//在wrap里面寻找ul
var $left=$wrap.find('.left');
var $right=$wrap.find('.right');
var $aLi=null;// ul下面的孩子li
// 获取的data放在全局，方便使用
var data=null;
// 全局变量n来控制图片的滚动
var n=0;
// ajax获取数据
getData();
function getData(){
$.ajax({
url:'json/data.txt', // 请求地址
type:'get', //请求方式
async:'false',//同步
dataType:'json', // 返回的数据类型
success:function(val){
// 成功的回调
data=val;// 成功获取的数据赋值给data data是获取的原生的js数据
}
})
}
// 绑定数据 确保数据是在外面可以获取的
bindData();
function bindData(){
var str=''; // 动态添加数据
var strLi='';
// 对获取的原始数据对象进行遍历 使用$.each(遍历的数据，callback回调函数（index索引值，索引值对应的内容item）)
$.each(data,function(index,item){
// 字符串拼接
str+='<img src="" imgSrc="'+item.imgSrc+'" alt=""/>';
strLi+=index==0?'<li class="active"></li>':'<li></li>';
});
// 还要添加一张第一张的图片
// str+='<img src="" imgSrc="'+data[0].imgSrc+'" alt=""/>';
// 把数据插入到容器里面
$boxInner.html(str);
$ul.html(strLi);
// 获取插入容器的图片和li
$aImg=$boxInner.children('img');
$aLi=$ul.children('li');
// 改变boxInner的宽度
// $boxInner.css({width:$aImg.length*1000});
// $boxInner.css('width',$aImg.length*1000);
}
console.log($aImg);// 有了图片
// 延迟加载
lazyImg();
function lazyImg(){
// 遍历图片
// $aImg.each(function(index,item){}) 实例的方法 区别是对于原生js的用法
$.each($aImg,function(index,item){ // 类的方法
// item每一个img对象是原生的js
// 创建临时图片对象
var tmpImg=new Image; //原生的
tmpImg.src=$(item).attr('realImg');// 拿到图片的真正的地址属性realImg
// 验证图片的准确性 原生才有onload事件
tmpImg.onload=function(){
// 对item赋值
item.src=this.src;
// 等图片加载成功之后，应该让第一张图片显示 渐隐显示 动态的 开启定时器之前应该先关闭定时器
$aImg.first().stop().animate({
opacity:1,
zIndex:1
},1500);
// fadeIn和fadeOut只针对display：none的，对于css属性设置为opacity来是无效的
// $aImg.first().stop().fadeIn().css('zIndex',1); 提高css的层级
tmpImg=null; // 释放临时变量
}
})
}
// 图片自动轮播 创建一个全局的变量n来决定第几张图片显示 开定时器
clearInterval(timer);
var timer=setInterval(autoMove,2000);
function autoMove(){
// 思路一
n++；
n%=$aImg.length;
autoPlayImg();
// 思路二
//if(n>=$aImg.length-1){
// n=-1;
// }
n++;
n%=$aImg.length;
// 那张图片的索引值等于n，那张图片就显示
setBanner(); // 这个函数在这调用，但是获取的n的值是全局变量的n值
}
function autoPlayImg(){
// 当索引值等于n的时候，就显示图片，层级提高，并且让对应的兄弟图片隐藏
$aImg.eq(n).css('zIndex',1).fadeIn(1000).siblings().css('zIndex',0).fadeOut();
// 焦点轮播要获取到n的值，n的值在定时器里面调用，异步，所以要在定时器里面调用，获取正确的n值
bannerTip();
}
function setBanner(){
//遍历每一张图片，那张图片的索引等于n，就让那张图片显示
$aImg.each(function(index,item){
if(index===n){
$(item).css({zIndex:1}).fadeIn(1000,function(){
$(this).siblings('img').css({zIndex:0}).fadeOut();
})
}else{
$(item).css({zIndex:0});
}
})
}
// 焦点自动轮播 那张图片显示的时候，那个焦点就点亮
function bannerTip(){
// 这个函数里面要获取n的值，n的值在定时器里面累加的，是异步，要获取就必须在前面定时器函数里面调用
// 让当前索引值为n的按钮点亮，同时让兄弟元素变灭
$aLi.eq(n).addClass('active').siblings().removeClass('active');
}
// 鼠标引入停止，移除继续运动
$wrap.mouseover(function(){
// $left.stop().fadeIn();
$left.show();
$right.show();
clearInterval(timer);
}).mouseout(function(){
$left.hide();
$right.hide();
// 开启定时器
timer=setInterval(autoMove,2000);
});
// 点击焦点手动切换
$aLi.click(function(){
// $(this).index() 获取不到n的值，只能获取li的索引值
n=$(this).index(); // 这个改变全局的n值，因为全局的n值与焦点的索引值不一样
autoPlayImg();
})
// 点击左右按钮手动切换
$right.click(function(){
autoMove():
});
$left.click(function(){
n--;
n=n%$aImg.length;
})
注意
jQuery中没有DOM映射（页面结构发生改变的时候，元素对象自动的发生改变，HTML的DOM结构跟元素集合之间存在一一对应的关系）
jQuery里面没有等号=，没有on
私有变量：形参；函数里面带var的变量
jQuery中索引值是负数也可以
网友评论