CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS+js实现图片轮播插件

发布时间:『 2017-08-09 17:08』  博客类别:WEB前端  阅读(69) 评论(0)

今天我搜索博客时,发现有一个网友的博客上采用了图片轮播的形式进行广告播放。这样做可以增加广告展示位,还能提高广告位的曝光量。

我看了他的实现方式,特别麻烦。因此我根据我自己掌握的知识,制作了一款css+js的图片轮播组件。

先来看下运行效果:

图片轮播

这个组件还有另外一个特点,那就是支持自动播放。每隔几秒就会跟换图片。

相关css实现代码如下:

.box {
    width: 500px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}
.list, .index {
    position: absolute;
}
.index {
    right: 0px;
    bottom: 0px;
}
.index i {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 12px;
    background-color: #666;
    background-color: rgba(0,0,0,.6);
}
.index .on {
    background-color: #cd0000;
    background-color: rgba(255,0,0,.75);
}

下面是html代码:

<div id="box" class="box">
    <a href="/" class="list slide out"><img src="1.jpg" /></a>
    <a href="/" class="list slide out"><img src="2.jpg" /></a>
    <a href="/" class="list slide out"><img src="3.jpg" /></a>
    <a href="/" class="list slide out"><img src="4.jpg" /></a>
    <div id="index" class="index"></div>
</div>

最后为了实现轮播,我们还需要用js代码来添加事件。

var eleIndex = $("#index"), eleList = $("#box .list");
var funIndex = function() {
    var htmlIndex = '';
    eleList.each(function() {
        if ($(this).hasClass("out")) {
            htmlIndex += '<i></i>';    
        } else {
            htmlIndex += '<i class="on"></i>';
        }
    });
    eleIndex.html(htmlIndex);
};
var indexElement = -1, eleSlideIn = null;
$("#box").bind("click", function() {
    indexElement++;
    if (indexElement >= eleList.length) {
        indexElement = 0;
    }
    eleSlideIn && eleSlideIn.removeClass("in").addClass("out");
    eleSlideIn = $(eleList.get(indexElement)).removeClass("out").addClass("in");
    funIndex();
    return false;
}).trigger("click");

怎么样,看起来很简单吧。本实例中引用了jquery插件,需要运行demo的,请注意引入jquery插件。

——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   JavaScript     jquery     css  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有