七空幻音LOGO

七空幻音

简单的JQuery轮播图2015-10-14 21:12:57

轮播图在很多网站都会出现,有横向轮播图、纵向轮播图、淡入淡出轮播图、3D轮播图……等等

本站使用的是JQ制作的轮播图。接下来我们用一个简单的JQ程序实现简单的轮播切换

准备工具:

1.JQ类库一份

2.html编辑器

3.浏览器(推荐最新火狐或谷歌)

远离IE—珍爱生命

如果有JQ类库的小伙伴就不用管下面这一步,如果没有JQ的可以用下面这个代码使用百度的JQ


//使用百度jq类库
<script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>


过程很快的,不会太麻烦,CSS和HTML我会直接发出来并写上一些重要的注释,该文章主要是用JQ


<div class="container">

<div class="pic">//4张轮播图片 start 

<div class="content" style="display:block;">//单独的一个图片div设置默认显示
            <a href="#">
                <img src="img/1.jpg" alt=""/>
            </a>
        </div>
        <div class="content">
            <a href="#">
                <img src="img/2.jpg" alt=""/>
            </a>
        </div>
        <div class="content">
            <a href="#">
                <img src="img/3.jpg" alt=""/>
            </a>
        </div>
        <div class="content">
            <a href="#">
                <img src="img/4.jpg" alt=""/>
            </a>
        </div>
    </div>//4张轮播图片 end
    <div class="btn">
        <ul>
            <li class="but"></li>//单独的一个类设置默认样式
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>


css:


*{
margin:0;//初始化就不说了
padding:0;
}
.container{
width:400px;//设置整个包裹图片和按钮的盒子宽度高度以及居中显示
height:200px;
margin:20px auto 0;
}
.content{//所有的图片都初始化为不显示,并设置绝对定位 PS:第一张图在html中设置display:block;默认显示
display:none;
position:absolute;
}
.content a img{//设置图片默认宽度高度
width:400px;
height:200px;
}
/*轮播按钮*/
.btn{
position:relative;//使用相对定位设置 右浮动 距离顶部定位180px
float:right;
top:180px;
z-index: 9999;//设置按钮在最顶层 以免按钮被淹没在图片最下面
}
.btn ul li{
width:10px;
height:10px;
border-radius:50%;//圆形按钮
list-style-type:none;//初始化li圆点
display:inline-block;//横向排列 其实左浮动也可以
background: #9e9d9c;
cursor:pointer;
}
/*轮播时按钮样式*/
.btn ul li.but{//JQ使用的时候点击按钮改变颜色
background: #53baff;
}


最重要的JQ脚本 其实轮播的jq很简单,只有几行代码即可实现轮播效果 


<script type="text/javascript">
var i = 0;//设置i并初始化为0(因为程序都是0开始的)
$(".btn ul li").click(function () { //当轮播下面的按钮被点击的时候
    i = $(this).index();//将点击的元素下标(位置,第一个为0,第二个为1……)赋值给i以便后面使用
    //然后将当前图片用eq索引当前按钮位置,并淡出(消失)遍历进入第二张图片
    $(".container .content").eq(i).fadeIn().siblings().fadeOut();
    //使用this关键字后就可以不用eq索引了因为本身就是点击的按钮
    //将当前点击的按钮类换成预先在css里面设置好的 "but"类,同样的遍历之后清除此类
    $(this).addClass("but").siblings().removeClass("but");
    //之后。。一个简单的点击轮播图实现了
});
//轮播图毕竟是要自动轮播的接下来就用js的定时函数setInterval()来定时更换轮播的图片与按钮的类
function start() {//自定义函数 start()用来定时更换
    i++;//将全局变量i自增1
    if (i > 3)//判断如果大于3(因为只有4张图片 0 1 2 3) 
        i = 0;//就把i初始化为0(转到第一张图片)
    $(".container .content").eq(i).fadeIn().siblings().fadeOut();//之后的和点击一样了,可以看看上面的
    //此处需要注意,因为是自动轮播的,所以需要用eq来索引当前图片的位置,来修改按钮类
    $(".btn ul li").eq(i).addClass("but").siblings().removeClass("but");
}
setInterval("start()", 3000);
</script>


然后就……没有然后了……一个简单的自动、点击轮播图就做完了,本站的轮播图添加了左右切换……这个原理也是很简单的,判断当前i位置在根据图片数量进行切换

详细图片
载入中...