最近终于写成了自己创作的图片轮播插件，使用原生js编写。与目前网上流行的轮播插件相比，功能和效果稍弱，但是使用起来相当方便。

先看html代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>图片轮播</title>

    <link rel="stylesheet" type="text/css" href="pmmpig.css">

</head>

<body>

<div style="width: 600px; height: 300px; margin: 0 auto;">

    <div class="pigwrap">

        <ul>

            <li><img src="imgs/1.jpg"><a href="#">凤凰岭</a></li>

            <li><img src="imgs/2.jpg"><a href="#">凤凰岭梨花</a></li>

            <li><img src="imgs/3.jpg"><a href="#">外滩</a></li>

            <li><img src="imgs/4.jpg"><a href="#">威海日出</a></li>

            <li><img src="imgs/5.jpg"><a href="#">北京站</a></li>

            <li><img src="imgs/6.jpg"><a href="#">泰山</a></li>

        </ul>

    </div>

</div>

<script type="text/javascript" src="pmmpig.js"></script>

</body>

</html>

下面是CSS样式修饰部分

.pigwrap{

    width: 550px;

    height: 300px;

    position: relative;

    margin:;

    padding:;

    overflow: hidden;

}

.pigwrap ul{

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

}

.pigwrap li{

    float: left;

    list-style: none;

    height: 100%;

}

.pigwrap li img{

    width: 100%;

    height: 100%;

    cursor: pointer;

}

.pigwrap li a {

    display: block;

    width: 100%;

    height: 40px;

    margin-top: -40px;

    font-weight: bold;

    padding-left: 10px;

    color: #fff;

    font-size: 16px;

    line-height: 40px;

    font-family: "微软雅黑"

}

.pigwrap li a:link, .pigwrap li a:visited{

    text-decoration: none;

}

.pigwrap li a:hover, .pigwrap li a:active{

    text-decoration: underline;

}

.foot{

    width: 100%;

    height: 20px;

    position: absolute;

    bottom: 40px;

    text-align: center;

}

.circle{

    background-color: #f5f5f5;

    width: 15px;

    height: 15px;

    margin: 0 auto;

    display: inline-block;

    border-radius: 7px;

    margin-right: 10px;

    cursor: pointer;

    display: none;

    opacity: 0.3;

}

.gobtn{

    display: none;

    position: absolute;

    top: 100px;

    left: 0px;

    width: 100%;

    height: 60px;

    overflow: hidden;

}

.gobtn .btnleft{

    float: left;

    margin-left: 10px;

    background-image:  url("../imgs/btn.gif");

    cursor: pointer;

}

.gobtn .btnright{

    float: right;

    margin-right: 10px;

    margin-top: -60px;

    background-image:  url("../imgs/btn.gif");

    cursor: pointer;

}

下面是js部分

var pigNum = 0;

var current = 1;

var speed = 10;

var timer = null;

var contro = null;

var stop = 3000;

var owrap = null;

var oul = null;

var pigWidth = 0;

(function () {

    // body...

    init();

    nextPig();

    contro = setInterval(function(){

        nextPig();

    }, stop);

})();

function init() {

    owrap = document.getElementsByClassName("pigwrap")[0];

    oul = owrap.getElementsByTagName("ul")[0];

    pigNum = oul.getElementsByTagName("li").length;

    pigWidth = owrap.clientWidth;

    initView();

    owrap.onmouseover = function (e) {

        // body...

        mouseoverHandler();

    }

    owrap.onmouseout = function () {

        // body...

        mouseoutHandler();

    }

}

function initView () {

    // body...

    var lis = oul.getElementsByTagName("li");

    for (var i = 0; i < lis.length; ++i){

        var li = lis[i];

        li.style.width = pigWidth + "px";

    }

    oul.style.width = pigWidth*pigNum + "px";

    var footdiv = document.createElement("div");

    footdiv.setAttribute("class", "foot");

    var cirs = "";

    for(var i = 0; i < pigNum; ++i){

        cirs += "<div class='circle' onclick='topig("+(i+1)+")'></div>";

    }

    footdiv.innerHTML = cirs;

    owrap.appendChild(footdiv);

    var btndiv = document.createElement("div");

    btndiv.setAttribute("class", "gobtn");

    btndiv.innerHTML =

        "<div><img src='imgs/btn.gif' class='btnleft' onclick='toLastPig()'></div>"+

        "<div><img src='imgs/btn.gif' class='btnright' onclick='toNextPig()'></div>";

    owrap.appendChild(btndiv);

}

function mouseoutHandler () {

    // body...

    var cirs = owrap.getElementsByClassName("circle");

    for(var i = 0; i < cirs.length; ++i){

        cirs[i].style.display = "none";

    }

    cirs[current-1].style.opacity = 0.3;

    var btns = document.getElementsByClassName("gobtn");

    btns[0].style.display = "none";

    clearInterval(contro);

    contro = setInterval(function(){

        nextPig();

    }, stop);

}

function mouseoverHandler () {

    // body...

    var cirs = owrap.getElementsByClassName("circle");

    for(var i = 0; i < cirs.length; ++i){

        cirs[i].style.display = "inline-block";

    }

    cirs[current-1].style.opacity = 0.9;

    var btns = document.getElementsByClassName("gobtn");

    btns[0].style.display = "block";

    clearInterval(contro);

}

function toLastPig () {

    // body...

    if (current == 1)

        topig(pigNum);

    else

        topig(current-1);

}

function toNextPig () {

    // body...

    if (current == pigNum)

        topig(1);

    else

        topig(current+1);

}

function topig (index) {

    // body...

    clearInterval(contro);

    //纠正位置

    oul.style.left = -pigWidth*(current-1) + "px";

    var cirs = owrap.getElementsByClassName("circle");

    cirs[current-1].style.opacity = 0.3;

    startMove(oul, pigWidth*(index-current), speed);

    current = index;

    contro = setInterval(function(){

        nextPig();

    }, stop);

    cirs[current-1].style.opacity = 0.9;

}

function nextPig (argument) {

    // body...

    var ow = owrap;

    var ul = oul;

    //纠正位置

    ul.style.left = -pigWidth*(current-1) + "px";

    current++;

    if (current > pigNum) {

        current = 1;

        startMove(ul, -pigWidth*(pigNum-1), speed);

        return ;

    }

    startMove(ul, pigWidth, speed);

}

function startMove (elemet, length, x) {

    // body...

    clearInterval(timer);

    var speed = 0;

    timer = setInterval(function(){

        if(Math.abs(length) <= Math.abs(speed)){

            clearInterval(timer);

            elemet.style.left = elemet.offsetLeft - length + "px";

        }else{

            speed = length / x;

            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            length -= speed;

            elemet.style.left = elemet.offsetLeft - speed + "px";

        }

    }, 30);

}

纯js写图片轮播插件的更多相关文章

  1. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  2. 结构-行为-样式-requireJs实现图片轮播插件

    最近工作需要,就自己写了一个图片轮播插件,不过想到要集成到框架中,于是又用RequireJs改了一遍. 主要文件: style.css jquery-1.11.1.min.js require.js ...

  3. 图片轮播插件-carouFredSel

    carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...

  4. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

  5. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  6. 图片轮播插件Nivo Slider

    推荐:图片轮播插件Nivo Slider         因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是, ...

  7. 面板支持单个，多个元素的jQuery图片轮播插件

    一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  8. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  9. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

随机推荐

  1. Mysql监控工具小集合

    介绍一些常见的Mysql监控工具. Cacti Cacti是 一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监测图形分析工具.它通过snmpget来获取数据,使用 RRDtool绘 ...

  2. ps中套索工具怎么使用的方法

    ps中套索工具怎么使用的方法 http://jingyan.baidu.com/article/5553fa82e864cc65a2393482.html

  3. PHP 201307 月最新手册chm 免费下载

    本次更新两个版本  php_manual_zh_notreview.chm (15MB 不带评论)     php_manual_zh_review.chm    (32MB 带评论)     制作方 ...

  4. [codevs]失恋28天题目系列

    失恋28天-追女孩篇 题目描述 Description 呵呵,相信大家失恋33天都看过吧,里面的主人公黄小仙和王小贱都有印象吧!这回我要给大家讲的是我 们班同学的失恋经历,呵呵他总共失恋了28天.但是 ...

  5. 【JS】Beginner8:Objects

    1.Real life object:propertiese & abilities JS object:a collection of named properties & meth ...

  6. UVA11324 The Largest Clique(DP+缩点)

    题意:给一张有向图G,求一个结点数最大的结点集,使得该结点中任意两个结点 u 和 v满足:要么 u 可以到达 v, 要么 v 可以到达 u(u 和 v 相互可达也可以). 分析:”同一个强连通分量中的 ...

  7. POJ3461–Oulipo(KMP)

    题目大意 给定一个文本串和模式串,求模式串在文本串中出现的次数 题解 正宗KMP 代码: #include<iostream> #include<cstring> #inclu ...

  8. POJ2192 - Zipper（区间DP）

    题目大意 给定三个字符串s1,s2,s3,判断由s1和s2的字符能否组成字符串s3,并且要求组合后的字符串必须是s1,s2中原来的顺序. 题解 用dp[i][j]表示s1的前i个字符和s2的前j个字符 ...

  9. 利用系统镜像文件安装.Net框架的方式

    最近重装系统之后,在安装部分程序时需要.NET3.5框架,在线安装时间较长,网上搜到了一个很好的解决办法.利用windows系统镜像.首先将镜像加载到驱动中比如L,然后在cmd中输入 dism.exe ...

  10. Polya定理

    http://www.cnblogs.com/wenruo/p/5304698.html 先看 Polya定理,Burnside引理回忆一下基础知识.总结的很棒. 一个置换就是集合到自身的一个双射,置 ...