纯js写图片轮播插件

最近终于写成了自己创作的图片轮播插件，使用原生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写图片轮播插件的更多相关文章

PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
结构-行为-样式-requireJs实现图片轮播插件
最近工作需要,就自己写了一个图片轮播插件,不过想到要集成到框架中,于是又用RequireJs改了一遍. 主要文件: style.css jquery-1.11.1.min.js require.js ...
图片轮播插件-carouFredSel
carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...
JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
Javascript和jQuery WordPress 图片轮播插件，内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
图片轮播插件Nivo Slider
推荐:图片轮播插件Nivo Slider 因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是, ...
面板支持单个，多个元素的jQuery图片轮播插件
一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...
原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点自动轮播点击小圆圈按钮,显示相应图片点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

随机推荐

从头开始编写一个Orchard网上商店模块(2) - 配置您的Orchard开发环境
原文地址:http://skywalkersoftwaredevelopment.net/blog/writing-an-orchard-webshop-module-from-scratch-par ...
bootm命令中地址参数，内核加载地址以及内核入口地址
bootm命令只能用来引导经过mkimage构建了镜像头的内核镜像文件以及根文件镜像,对于没有用mkimage对内核进行处理的话,那直接把内核下载到连接脚本中指定的加载地址0x30008000再运行就 ...
NESPER的大体结构 z
NEsper从内容上分为两块,NEsper的核心NEsper.dll和NEsper.IO.dll. (1)NEsper的核心包包含了EPL语法解析引擎,事件监听机制,事件处理等核心模块. (2)NEs ...
MongoDB(索引及C#如何操作MongoDB)(转载)
MongoDB(索引及C如何操作MongoDB) 索引总概况 db.test.ensureIndex({"username":1})//创建索引 db.test.ensureInd ...
Unity3d 巫师3Ciri的渲染
--wolf96 16/10/6
EMC
1.EMC的概念 EMC(Electro Magnetic Compatibility)即电磁兼容,是指设备或系统在其电磁环境中符合要求运行并不对其环境中的任何设备产生无法忍受的电磁干扰的能力.就是它 ...
Linux 设备模型浅析之 uevent 篇（2）
Linux 设备模型浅析之 uevent 篇本文属本人原创,欢迎转载,转载请注明出处.由于个人的见识和能力有限,不可能面面俱到,也可能存在谬误,敬请网友指出,本人的邮箱是 yzq.seen@gma ...
Linux的五个查找命令：find,locate,whereis,which,type
使用电脑的时候,经常需要查找文件. 在Linux中,有很多方法可以做到这一点.国外网站LinuxHaxor总结了五条命令,你可以看看自己知道几条.大多数程序员,可能经常使用其中的2到3条,对这5条命令 ...
PHP函数补完：var_export()
var_export() 函数返回关于传递给该函数的变量的结构信息,它和 var_dump() 类似,不同的是其返回的表示是合法的 PHP 代码.var_export必须返回合法的php代码, 也就是 ...
BZOJ 3280: 小R的烦恼 & BZOJ 1221: [HNOI2001] 软件开发
3280: 小R的烦恼 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 399 Solved: 200[Submit][Status][Discuss ...

纯js写图片轮播插件

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

随机推荐

热门专题