最近终于写成了自己创作的图片轮播插件，使用原生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. 在Windows中隐藏用户的方法

    这两天新建了一个用户用于共享文件,由于我的电脑只有我一个人用,多了一个用户后在登录界面上觉得挺碍事的,便想把它隐藏起来.找了一下,可以通过如下方式实现: 在注册表编辑器新建项值: HKEY_LOCAL ...

  2. Java问题汇集(2)

    1.Error setting driver on UnpooledDataSource 具体:Exception in thread "main" org.apache.ibat ...

  3. Android自定义组合控件

    今天和大家分享下组合控件的使用.很多时候android自定义控件并不能满足需求,如何做呢?很多方法,可以自己绘制一个,可以通过继承基础控件来重写某些环节,当然也可以将控件组合成一个新控件,这也是最方便 ...

  4. 使用Arcglobe 10与3dmax建立三维城市

    转自:http://www.cnblogs.com/jinlun/p/3380307.html 随着国家大力推进数字城市的建设,三维城市的建设也是势在必行的.与传统二维地图相比,三维城市在立体层次.视 ...

  5. Visual Studio 2012 Professional 密钥

    Visual Studio 2012 Professional 密钥 4D974-9QX42-9Y43G-YJ7JG-JDYBP

  6. [King.yue]关于CSLA框架的一些看法

    CSLA.Net 是一个有帮助的成熟开发框架,但不适于初学者.该框架支持在任何地方.任何时间创建对象,值得我们花时间去学习了解这一框架.CSLA.Net 框架设计的业务对象,支持对完全透明的数据源进行 ...

  7. JZ2440开发笔记（1）——arm-linux-gcc环境搭建

    1 下载arm-linux-gcc-4.4.3安装包,http://arm9.net/download.asp 2 解压arm-linux-gcc-4.4.3-20100728.tar.gz,使用命令 ...

  8. 【原】Spark Rpc通信源码分析

    Spark 1.6+推出了以RPCEnv.RPCEndpoint.RPCEndpointRef为核心的新型架构下的RPC通信方式.其具体实现有Akka和Netty两种方式,Akka是基于Scala的A ...

  9. node系列2

    文件操作 NodeJS能够操作文件.小至文件查找,大至代码编译,几乎没有一个前端工具不操作文件.换个角度讲,几乎也只需要一些数据处理逻辑,再加上一些文件操作,就能够编写出大多数前端工具,本章将介绍与之 ...

  10. cep