最近终于写成了自己创作的图片轮播插件，使用原生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. jQuery里面的datepicker日期控件默认是显示英文的，如何显示中文或其他语言呢？

    jQuery里面的datepicker日期控件默认是显示英文的,如何让他显示中文或其他呢? [官方的写法]: (1)引入JS文件: <script type="text/javascr ...

  2. （转载）腾讯CMEM的PHP扩展

    (转载)http://blog.renren.com/share/223341289/7693783476 题外话 最近公司在做相关的业务,由于Memcached协议缺少返回码,为了保证业务数据的安全 ...

  3. c++ 弧度值与角度值的转换

    Rad_to_deg --- 弧度_到_角度 的 比率Rad_to_deg = 45.0 / atan(1.0): 弧度值到角度值的转换 用 角度 = 弧度值* Rad_to_deg 角度值到弧度值的 ...

  4. Flex 箭头（军标）库封装完成

    封装的一个月,在这个月期间还完成的一些其它的工作:公司有规定不能公布代码,我可以讲一下大致的流程,真的很抱歉! 1.用B样条曲线画箭头的两侧的曲线,这个要注意了,不要贝塞尔曲线,因为贝塞尔曲线的算法会 ...

  5. FlexSlider插件的详细设置参数 http://www.woothemes.com/flexslider/

    http://www.woothemes.com/flexslider/ FlexSlider插件的详细设置参数 $(window).load(function() { $('.flexslider' ...

  6. bzoj2946 [Poi2000]公共串（SA，SAM）

    [题意] 多串求LCS.   [思路]   主要是想找一下SAM的优越感 :) velui good 后缀数组划分height需要注意不少细节 <_<,然后不停debug   [代码]   ...

  7. shell常识总结

    #!/bin/bash cmd="ls -lt | grep ^d | awk 'NR==1 {print $9}'" $cmd 这是一个获取文件夹名字的脚本,但是却提示: ls: ...

  8. HIbernate学习笔记（一） 了解hibernate并搭建环境建立第一个hello world程序

    Hibernate是一个开放源代码的ORM(对象关系映射)框架,它对JDBC进行了轻量级的封装,Java程序员可以使用面向对象的编程思维来操纵数据库,它通过对象属性和数据库表字段之间的映射关系,将对象 ...

  9. Does not contain a valid host;port authority解决方法

    ERRORorg.apache.hadoop.hdfs.server.namenode.NameNode: java.lang.IllegalArgumentException: Does not c ...

  10. Scala IDE for Eclipse的下载、安装和WordCount的初步使用（本地模式和集群模式）

    包括: Scala IDE for Eclipse的下载  Scala IDE for Eclipse的安装 本地模式或集群模式 我们知道,对于开发而言,IDE是有很多个选择的版本.如我们大部分人经常 ...