純js寫圖片輪播插件

時間 2019-11-18

原文原文鏈接

最近終於寫成了本身創做的圖片輪播插件，使用原生js編寫。與目前網上流行的輪播插件相比，功能和效果稍弱，可是使用起來至關方便。javascript

先看html代碼css

<!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樣式修飾部分html

.pigwrap{
    width: 550px;
    height: 300px;
    position: relative;

    margin: 0;
    padding: 0;
    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;
}

View Code

下面是js部分java

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);
}

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。