JS学习十四：div拖拽示例、轮播图片示例

div拖拽效果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            #box {
                 width:100px;
                 height:100px;
                 background-color:red;
                 position: absolute;
            }
        </style>
    </head>
    <body style="height: 1000px;position: relative;">
        <div id="box"></div>
        
        <script type="text/javascript">
            var jsDiv = document.getElementById("box")
            basex = 0
            basey = 0
            movex = 0
            movey = 0
            //鼠标按下事件
            jsDiv.addEventListener("mousedown", function(e){
                var ev = e || window.event
                basex = ev.pageX
                basey = ev.pageY
                // 鼠标移动事件,针对Document
                // document.addEventListener("mousemove", function(e){
                document.onmousemove = function(e){
                    var ee = e || window.event
                    movex = ee.pageX - basex
                    basex = ee.pageX
                    movey = ee.pageY - basey
                    basey = ee.pageY
                    jsDiv.style.left = jsDiv.offsetLeft + movex + "px"
                    jsDiv.style.top = jsDiv.offsetTop + movey + "px"
                // }, false)
                }                
            }, false)
            //鼠标松开事件
            document.addEventListener("mouseup", function(){
                document.onmousemove = null
            })            
        </script>
    </body>
</html>

 

 

图片轮播：

鼠标进入图标或者点击第几张图片：轮播停止，并出现上下面的标签

<!DOCTYPE html>
<html>
    <head>
        <link href="css/bt.css" rel="stylesheet" type="text/css" />
    </head>
    <body style="height: 1000px;">
        <div id="box">
            <img src="img/1.jpg" id="pic"/>
            <ul id="list">
                <li class="lili">1</li>
                <li  class="lili">2</li>
                <li class="lili">3</li>
                <li class="lili">4</li>
            </ul>
            <div id="left" class="bt"><</div>
            <div id="right" class="bt">></div>
        </div>
    </body>
    <script type="text/javascript" src="js/loop.js"></script>
</html>

 

* {
    margin: 0;
    padding: 0;
}
/* 轮番图的宽高的样式 */
#box {
    width: 790px;
    height: 340px;
    margin: 0 auto;
    position: relative;
}
/* 上下面"<>"的样式 */
.bt {
    width: 50px;   /*文本宽高*/
    height: 80px;
    background-color: rgba(0,0,0,0.2);
    color: #fff;   /*文本字体颜色*/
    font-size: 30px;   /*文本字体大小*/
    line-height: 80px;   /*垂直居中*/
    text-align: center; /*文本居中*/
    position: absolute; /*定位*/
    top: 130px; /*定位的top值*/
    display: none;
}
/* 文本<>定位的位置 */
#left {
    left: 0;
}
#right {
    right: 0;
}

#list {
    list-style: none;
    position: absolute;
    bottom: 20px;
    left:250px;
}
#list li {
    float: left;
    width: 20px;
    height: 20px;
    background-color: #aaa;
    margin-left: 10px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
}

 

var jsBox = document.getElementById("box")
var jsPic = document.getElementById("pic")
var jsLeft = document.getElementById("left")
var jsRight = document.getElementById("right")
var jsLisArr = document.getElementsByClassName("lili")

//第一张图片默认为第一个li，当前li为红色
jsLisArr[0].style.backgroundColor = "red"

//启动一个定时器去更换jsPic中的src属性
var currangePage = 1
var timer = setInterval(startloop, 1000)
function startloop() {
    currangePage++
    changePage()
}
function changePage() {
    if (currangePage == 5) {
        currangePage = 1
    } else if (currangePage == 0) {
        currangePage = 4
    }
    //更换图片
    jsPic.src = "img/" + currangePage + ".jpg"
    //清空所小圆点的颜色
    for (var i = 0; i < jsLisArr.length; i++) {
        jsLisArr[i].style.backgroundColor = "#aaa"
    }
    //将当前图片对应的数字着红色
    jsLisArr[currangePage - 1].style.backgroundColor = "red"
}

//鼠标进入box
jsBox.addEventListener("mouseover", overFunc, false)
function overFunc() {
    //停止定时器
    clearInterval(timer)
    //显示左右按钮
    jsLeft.style.display = "block"
    jsRight.style.display = "block"
}

//鼠标进入左右按钮，按钮颜色加深
jsLeft.addEventListener("mouseover", deepColor, false)
jsRight.addEventListener("mouseover", deepColor, false)
function deepColor() {
    this.style.backgroundColor = "rgba(0,0,0,0.6)"
}
//鼠标离开左右按钮，按钮颜色变浅
jsLeft.addEventListener("mouseout", qianColor, false)
jsLeft.addEventListener("mouseout", qianColor, false)
function qianColor() {
    this.style.backgroundColor = "rgba(0,0,0,0.1)"
}

//点击左右侧按钮
jsLeft.addEventListener("click", function(){
    currangePage--
    changePage()
},false)
jsRight.addEventListener("click", function(){
    currangePage++
    changePage()
},false)

//进入小圆点
for (var i = 0; i < jsLisArr.length; i++) {
    jsLisArr[i].index = i + 1
    jsLisArr[i].addEventListener("mouseover", function(){
         // currangePage = parseInt(this.innerHTML)
        //如果li中的没有数字，则给li元素节点增加index属性，使用index表示第几个li
        //直接使用i，i有问题
        currangePage = parseInt(this.index)
        changePage()
    }, false)
}

 

 

 

轮番，第三方包：swiper

 

posted on 2018-11-20 23:44  myworldworld  阅读(687)  评论(0)    收藏  举报

导航