最近终于写成了自己创作的图片轮播插件，使用原生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. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 首页Portal界面拖拽(Ⅵ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 构建Web界面>,主要介绍系统界面布局.导出数据等. 本篇将介绍首页Portal界面拖拽. 一.首页Portal界面拖拽 ...

  2. 一步步写STM32 OS【一】 序言

    一直想写个类似uCOS的OS,近段时间考研复习之余忙里偷闲,总算有点成果了.言归正传,我觉得OS最难的部分首先便是上下文切换的问题,他和MCU的架构有关,所以对于不同的MCU,这部分需要移植.一旦这个 ...

  3. dev combobox edit 怎么设置让选项清空

    dev combobox edit 怎么设置让选项清空 功能需求: 点击combobox edit1的选项A 使得 combobox edit2出现选项a: 然后再点击combobox edit1的选 ...

  4. Appium 小白从零安装 ，Appium连接真机测试。

    以下是我个人在初次安装使用Appium时的过程,过程中遇到了一些问题,在这里也一一给出解决办法. Appium安装过程 先安装了 Node.js.在node的官网上下载的exe安装文件. 在node的 ...

  5. 使--no-ri --no-rdoc成为gem安装的默认选项

    在使用gem install命令的时候,希望加上--no-ri --no-rdoc选项,但是不希望每一次都手动加上这个选项. 其实可以通过编辑配置文件,改变gem install的默认选项. 在win ...

  6. 【转】小解DCT与DFT

    这学期当本科生数字图像处理的助教老师,为使学生更好地理解DCF和DFT之间的关系给出三题,大家可以思考一下,看一下自己对这些最简单的变换是否真正理解. 1.求解序列f(n)=[2,3,3,4,4,3, ...

  7. （转载）JDK中的设计模式

    写的很好,学习道路更轻松一些 原文地址:http://blog.csdn.net/gtuu0123/article/details/6114197 JDK中设计模式 分类: Java相关 设计模式 2 ...

  8. 待修改 nyoj 412 又是一个遗留问题

    测试的数据都正确啊,跟别人正确代码也对比了一下,一直wrong ans,这道题是搞不定了,思路是这样的,一个int 的数, 例如 一个数的二进制是1001100,那么大于这个数的最小的有相同个数1的数 ...

  9. Linux内存寻址之分页机制

    在上一篇文章Linux内存寻址之分段机制中,我们了解逻辑地址通过分段机制转换为线性地址的过程.下面,我们就来看看更加重要和复杂的分页机制. 分页机制在段机制之后进行,以完成线性—物理地址的转换过程.段 ...

  10. 在C#中生成唯一的字符串和数字【GUID】转

    转自:http://www.cnblogs.com/lcwzj/archive/2009/04/16/1436992.html 当我们想要获得一个唯一的key的时候,通常会想到GUID.这个key非常 ...