JS 模拟京东轮播器

最新推荐文章于 2021-11-15 13:43:59 发布

小沈哥

最新推荐文章于 2021-11-15 13:43:59 发布

阅读量292

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_18600061/article/details/53610543

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

京东轮播器的代码 HTML 和 CSS

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>模拟JD商城轮播图</title>
    <style type="text/css">  
        /*banner图锟斤拷始*/
        #container {
            width: 980px;
            height: 400px;
            /*  border:3px solid red;*/
            margin: 20px auto;
            overflow: hidden;
            position: relative;
        }

        #container #list {
            width: 6860px;
            height: 400px;
            position: absolute;
            z-index: 1;
            transition: all 0.5s ease-out;
            -moz-transition: all 0.5s ease-out; /* Firefox 4 */
            -webkit-transition: all 0.5s ease-out; /* Safari and Chrome */
            -o-transition: all 0.5s ease-out; /* Opera */
            background-color: #dedab4;
        }

        #container #list img {
            width: 980px;
			border:none;
            height: 400px;
            float: left;

        }

        .arrow {
            cursor: pointer;
            display: none;
            line-height: 39px;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            width: 40px;
            height: 40px;
            position: absolute;
            z-index: 2000;
            top: 200px;
            background-color: RGBA(0, 0, 0, .3);
            color: #fff;
        }

        .arrow:hover {
            background-color: RGBA(0, 0, 0, .7);
        }

        #container:hover .arrow {
            display: none;
        }

        #prev {
            left: 20px;
        }

        #next {
            right: 20px;
        }

        #buttons {
            position: absolute;
            height: 10px;
            width: 100px;
            z-index: 2000;
            bottom: 10px;
            left: 465px;
        }

        #buttons span {
            cursor: pointer;
            float: left;
            border: 1px solid #fff;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: RGBA(0, 0, 0, .3);
            margin-right: 5px;
        }

        #buttons .on {
            background: #fff;
        }

        .sp-arrow.sp-a1{
            left: 15px;
            display: block;
            background-position: top left;
        }

        .sp-arrow.sp-a2{
            right: 15px;
            display: block;
            background-position: top right;
        }

        .sp-arrow {
            position: absolute;
            top: 50%;
            width: 28px;
            height: 38px;
            margin-top: -19px;
            display: none;
            opacity: 0.8;
            cursor: pointer;
            z-index: 1000;
            background: transparent url(arrows.png) no-repeat;
            -webkit-transition: opacity linear 0.3s;
            -moz-transition: opacity linear 0.3s;
            -o-transition: opacity linear 0.3s;
            -ms-transition: opacity linear 0.3s;
            transition: opacity linear 0.3s;
        }
    </style>
	<script>
		window.οnlοad=function(){	//JS 禁止鼠标右键出现菜单下拉
			document.οncοntextmenu=function(){
				return false;
			}
		}
	</script>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
    <div id="container">
        <div id="list" style="left:-980px">
            <a href="#">
                <img src=''/>
            </a>
        
            <a href="#">
                <img src='images/xiao_shen_ge1.jpg'/>
            </a>
        
            <a href="#">
                <img src='images/xiao_shen_ge2.jpg'/>
            </a>
        
            <a href="#">
                <img src='images/xiao_shen_ge3.jpg'/>
            </a>

            <a href="#">
                <img src='images/xiao_shen_ge4.jpg'/>
            </a>

            <a href="#">
                <img src='images/xiao_shen_ge5.jpg'/>
            </a>
        </div>
        <div id="buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>

        <a href="javascript:void(0);" id="prev" class="arrow"><</a>
        <a href="javascript:void(0);" id="next" class="arrow">></a>

        <span id="prevPicture" class="sp-arrow sp-a1" ></span>
        <span id="nextPicture" class="sp-arrow sp-a2" ></span>
    </div>
</body>
</html>

JS 代码：slider.js

/*
 * 代码托管到了CSDN:http://download.csdn.net/detail/qq_18600061/9507929   
 *
 * JS 实现京东轮播图片。(此插件：下载就能用，谢谢...)
 *      今天逛京东看着JD上面的轮播图挺有意思，于是自己就构思想实现一下，
 *      结果弄了一整天的时间，还是挺有意思，但是写这玩意，头脑必须时刻清晰，要不就容易绕晕。
 *      不知道代码是否还可以有优化的地方没有，希望大神来指点。
 */
$(function () {
    slider(980);
});

function slider(width){
         var container = document.getElementById("container");
         var list = document.getElementById("list");
         var buttons = document.getElementById("buttons").getElementsByTagName("span");
         var prev = document.getElementById("prev");
         var next = document .getElementById("next");

         var prevPicture = document .getElementById("prevPicture");
         var nextPicture = document .getElementById("nextPicture");

         var index = 1;
         var timer;
         var interval = 1000;

         var len = buttons.length;

         //切换 下一个按钮
         function showButton(){
            for (var i = 0; i < len; i++) {                
                if (buttons[i].className == "on" ){
                    buttons[i].className = "";
                    break;
                }
            }
            buttons[index-1].className = "on";
         }

         //核心代码。  切换图片
         function animate(offset){
            var go = function(){
                if(index==len+1) {                     
                    index = len-1;
                    flag=false;
                    setTimeout(go, interval);
                }
                if (index == 1) {
                    list.style.left = Math.abs(0)+"px"
                    flag=true;
                    index = 1;
                }
            }
            go();
            if(!flag){
                offset=Math.abs(offset);
            }
console.info("index="+index+"      offset="+offset);
            var newLeft =  parseInt(list.style.left);
            list.style.left = newLeft + offset +"px";
         }

         //定时播放
         function play() {
            timer = setTimeout(function () {
                next.onclick();
                play();
            }, interval);
         }

         //停止定时器
         function stop() {
            clearTimeout(timer);
         }

         //给容器绑定鼠标移进、移出事件
         container.onmouseover = stop;
         container.onmouseout = play;

         //程序启动 方法。
         play();

        //开关  true(顺着切换)、false(逆着切换)
        var flag=true;
        next.onclick = function(){
            //解决 prevPicture按钮 轮播Bug
            if(index==1){
                flag=true;
            }

            if(flag){
                index++;    
            }else{
                index--;
            }

            animate(-width);
            showButton();
        }
        prev.onclick = function(){
            index--;
            animate(width);
            showButton();
        }

     //给按钮绑定事件
     for (var i = 0; i < len; i++) {
        buttons[i].onclick = function () {
            if(this.className == 'on') 
                return;
            var myIndex = parseInt(this.getAttribute('index'));            
            var offset = -width * (myIndex - (index==1?0:index));
            if(!flag){
                offset=Math.abs(offset)
            }          
            animate(offset);
            index = myIndex;
            showButton();
        }
     }

     /*
      * 上一张
      * 下面偷了懒，用了JQuery的语法。
      *     $("#buttons span[class=on]").attr("index");
      *     也可以改成JS 语法。这为了方便所以没有改。
      */
     prevPicture.οnclick=function(){
        var _index = $("#buttons span[class=on]").attr("index");
        var prev = parseInt(_index);
        flag=false;
        if(prev==1){
            prev=5;
            //list.style.left = -4900+"px";
            list.style.left = -(len*width)+"px";
        }else{
            prev--;
            animate(width);
        }
        index = prev;
        showButton();
     }

     //下一张
     nextPicture.οnclick=function(){
        var _index = $("#buttons span[class=on]").attr("index");
        var next = parseInt(_index)+1;
        flag=true;
        if(next==len+1){
            next=1;
        }
        index = next;
        animate(-width);
        showButton();
     }
}

小沈哥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 模拟京东轮播器

/* * 代码托管到了CSDN:http://download.csdn.net/detail/qq_18600061/9507929 * * JS 实现京东轮播图片。(此插件：下载就能用，谢谢...) * 今天逛京东看着JD上面的轮播图挺有意思，于是自己就构思想实现一下， * 结果弄了一整天的时间，还是挺有意思，但是写这玩意，头脑必须时刻清晰，要不就容易绕晕。 * 不知道代码是否还可以有优化的地方没有，希望大神来指点。 */
复制链接

扫一扫