美文网首页Android 实战技术应用HTML 技术集程序员
HTML - JavaScript仿京东轮播图

HTML - JavaScript仿京东轮播图

作者: Kris_liu | 来源:发表于2017-09-13 21:49 被阅读102次

使用js开发相对简单，都能看懂。先上图，喜欢的话下面是全部源码

鼠标离开轮播图自动定时播放，左右箭头消失 点击小圆点图片跟着一起换图 鼠标离开左右箭头<>出现，轮播图暂停轮放

HTML部分

好久没更新博客了，一直在学习新东西，在遇到一些自己的学习中遇到的一些关于HTML和Android中交互所要必学的都想分享出来，让更多人方便学习，少走更多的弯路，快速成长为编程大牛。下面是仿京东轮播图的所有代码和效果图，希望能对有需求的你有所帮助......

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
        //引入外部CSS
        <link rel="stylesheet" type="text/css" href="css/lbt.css"/>
    </head>
    <body>
        <div id="box">
            ![](img/0.jpg)
            <ul id="list">
                <li class="li">1</li>
                <li class="li">2</li>
                <li class="li">3</li>
                <li class="li">4</li>
                <li class="li">5</li>
                <li class="li">6</li>
                <li class="li">7</li>
                <li class="li">8</li>
            </ul>
            <div id="leftbt"><</div>
            <div id="rightbt">></div>
        </div>
        <!--引入外部js-->
        <script type="text/javascript" src="js/lunbotu.js"></script>
    </body>
</html>

js部分

//获取所有的li
var jsLis = document.getElementsByClassName("li");
//img节点
var jsImg = document.getElementById("img");
//当前显示的图片
var currentPage = 0;


//背景div
var jsBox = document.getElementById("box");

//左右按钮
var jsLeftBtn = document.getElementById("leftbt");
var jsRightBtn = document.getElementById("rightbt");


//第一个小圆点初始化成红色 
jsLis[0].style.backgroundColor = "red";

//创建定时器播放图片
var pTimer = setInterval(func,1000);
function func(){
    currentPage++;
    if(currentPage == 8){
        currentPage = 0;
    }
    
    //修改图片
    jsImg.src = "img/"+currentPage+".jpg";
    
    //清空所有小圆点的颜色
    for (var i = 0; i < jsLis.length; i++) {
        jsLis[i].style.backgroundColor="#aaa";
    }
    
    //修改小圆点的颜色
    jsLis[currentPage].style.backgroundColor = "red";
}


//给box添加鼠标进入事件
jsBox.addEventListener("mousemove",function(){

    //停止定时器 即销毁 所以下方还得在一次启动
    clearInterval(pTimer);
    
    jsLeftBtn.style.display = "block";
    jsRightBtn.style.display = "block";
},false);


jsBox.addEventListener("mouseout", function(){
    //启动定时器
    pTimer = setInterval(func, 1000);

    jsLeftBtn.style.display = "none";
    jsRightBtn.style.display = "none";
}, false);



//左右按钮
jsLeftBtn.addEventListener("mouseover", function(){
    jsLeftBtn.style.backgroundColor = "rgba(0,0,0,0.6)";
}, false);
jsRightBtn.addEventListener("mouseover", function(){
    jsRightBtn.style.backgroundColor = "rgba(0,0,0,0.6)";
}, false);

jsLeftBtn.addEventListener("mouseout", function(){
    jsLeftBtn.style.backgroundColor = "rgba(0,0,0,0.2)";
}, false);
jsRightBtn.addEventListener("mouseout", function(){
    jsRightBtn.style.backgroundColor = "rgba(0,0,0,0.2)";
}, false);

    
    
    
//鼠标移入显示的左边按钮<
jsLeftBtn.addEventListener("click",function(){
    currentPage--;
    if(currentPage == -1){
        currentPage = 7;
    }   
    jsImg.src = "img/"+currentPage+".jpg";
    //清空所有小圆点的颜色
    for (var i = 0; i < jsLis.length; i++) {
        jsLis[i].style.backgroundColor="#aaa";
        
    }
    //修改小圆点的元素
    jsLis[currentPage].style.backgroundColor = "red";
},false);

//右边按钮>
jsRightBtn.addEventListener("click",function(){
    currentPage++;
    if(currentPage == 8){
        currentPage = 0;
    }   
    jsImg.src = "img/"+currentPage+".jpg";
    for (var i = 0; i < jsLis.length; i++) {
        jsLis[i].style.backgroundColor="#aaa";
    }
    jsLis[currentPage].style.backgroundColor = "red";
},false);


//每一个小圆点都添加鼠标移入事件
for (var i = 0; i < jsLis.length; i++) {

//方法一：
    // jsLis[i].onmouseover = function() {
    //  //当前元素节点的文本节点

    //  //在事件函数中，this代表对应的元素节点
    //  currentPage = parseInt(this.innerHTML) - 1;
    //  jsImg.src = "img/"+currentPage + ".jpg";
    //  for (var i = 0; i < jsLis.length; i++) {
    //      jsLis[i].style.backgroundColor = "#aaa";
    //  }
    //  jsLis[currentPage].style.backgroundColor = "red";
    // };

//方法二：此处使用闭包，因为由于闭包会携带包含它的函数的作用域，因此会比其他函数占用更多的内存。过度使用闭包可能会导致内存占用过多。对于性能优化方面，我推荐使用方法一
    jsLis[i].onmouseover = (function(x){
        function m(){
            currentPage = x;
            jsImg.src = "img/"+currentPage + ".jpg";
            for (var i = 0; i < jsLis.length; i++) {
                jsLis[i].style.backgroundColor = "#aaa";
            }
            jsLis[currentPage].style.backgroundColor = "red";
        }
        return m;
    })(i);
}

CSS部分

这边就没什么好说的了都是基本属性 只要认真点就不会出错的，我是根据图片的大小编排div的，你也可以根据自己的需求实际采用

#box{
    width: 790px;
    height: 340px;
    /*background-color: red;*/
    margin: 0 auto;
    position: relative;
}
#list{
    list-style: none;
    bottom: 5px;
    left: 240px;
    position: absolute;
}
.li{
    float: left;
    
    width: 20px;
    height: 20px;
    font-size: 20px;
    
    background-color: #aaa;
    margin-right: 10px;
    
    text-align: center;
    line-height: 20px;
    
    border-radius: 50%;
}
#leftbt{
    position: absolute;
    width: 50px;
    height: 80px;
    left: 0px;
    top: 130px;
    background-color: rgba(0,0,0,0.2);
    font-size: 40px;
    color: white;
    line-height: 80px;
    text-align: center;
    /*不显示*/
    display: none;
}
#rightbt{
    position: absolute;
    width: 50px;
    height: 80px;
    right: 0px;
    top: 130px;
    background-color: rgba(0,0,0,0.2);
    font-size: 40px;
    color: white;
    line-height: 80px;
    text-align: center;
    display: none;
}

CSDN请移步到

http://blog.csdn.net/First_CooMan##

相关文章