vue做的导航栏，左右各有按钮，点击向左右滚动

az44yao

已于 2022-01-21 20:28:14 修改

阅读量2.4k

点赞数

文章标签： vue.js 前端 javascript

于 2022-01-21 19:49:39 首次发布

原文链接：https://www.cnblogs.com/li-sir/p/14062037.html

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>标题</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .module-list-wrap{
            width: 400px;
            overflow-x: scroll;
        }
        .module-list li{
            font-style: normal;
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="module-list-wrap">
        <icon name="xiangzuojiantou" class="left-icon" @click="leftmove" >左箭头</icon>
        <ul class="module-list" :style="{width: itemlist.length * 100 + 'px','margin-left': xxx * 100 + 'px'}">
            <li v-for="(item, index) in itemlist" :key="index">{{ item.name }}</li>
        </ul>
        <icon class="right-icon" @click="rightmove" >右箭头</icon>
    </div>

</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            itemlist: [
                {name:'北京'},
                {name:'上海'},
                {name:'天津'},
                {name:'重庆'},
                {name:'河北'},
                {name:'山西'},
                {name:'内蒙古'},
                {name:'辽宁'},
                {name:'吉林'},
                {name:'黑龙江'},
                {name:'江苏'},
                {name:'浙江'},
                {name:'安徽'},
                {name:'福建'},
                {name:'江西'},
                {name:'山东'},
                {name:'河南'},
                {name:'湖北'},
                {name:'湖南'},
                {name:'广东'},
                {name:'广西'},
                {name:'海南'},
                {name:'四川'},
                {name:'贵州'},
                {name:'云南'},
                {name:'西藏'},
                {name:'陕西'},
                {name:'甘肃'},
                {name:'青海'},
                {name:'宁夏'},
                {name:'新疆'}
            ],
            xxx: 0,
        },
        methods: {
            leftmove() {
                if (this.xxx < 0) {
                    this.xxx += 1;
                }
            },
            rightmove() {
                if (this.xxx > -(this.itemlist.length + this.xxx)) {
                    this.xxx -= 1;
                }
            },
        }
    })
</script>
</body>
</html>

https://www.cnblogs.com/xuemingyao/p/5408627.html

* {margin: 0; padding: 0;}
        img {display: block; border: none;}
        ul, li {list-style: none;}
        a, a:hover, a:active, a:target {text-decoration: none; color: #000;}
        .outer {position: relative;margin: 0 auto;width: 1000px;height: 145px;overflow: hidden;box-shadow: 3px 3px 10px 0 #ccc;}
        .inner {position: absolute;top: 0;left: 0;width: 5000px;}
        .inner li {float: left;padding: 5px;}
        .inner li img{width: 209px; height: 125px;}
        .outer a {position: absolute;top: 50%;margin-top: -22.5px;width: 30px;height: 45px;background: url("img/pre.png") no-repeat;opacity: 0.3;filter: alpha(opacity=30);}
        .outer a:hover {opacity: 1; filter: alpha(opacity=100);}
        .outer a.btnLeft {left: 20px;}
        .outer a.btnRight {right: 20px; background-position: -50px 0;}
        .box{width:880px; overflow: hidden; height: 240px; position: absolute; left:60px;}

<div class="outer">
    <div class="box">
        <ul class="inner" id="inner">
            <li><img src="img/1.jpg"></li>
            <li><img src="img/2.jpg"></li>
            <li><img src="img/3.jpg"></li>
            <li><img src="img/4.jpg"></li>
            <li><img src="img/5.jpg"></li>
            <li><img src="img/6.jpg"></li>
            <li><img src="img/7.jpg"></li>
            <li><img src="img/8.jpg"></li>
            <li><img src="img/1.jpg"></li>
        </ul>
    </div>
    <a class="btnLeft"></a>
    <a class="btnRight"></a>
</div>

<script charset="utf-8" type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script charset="utf-8" type="text/javascript">
    (function () {
        var step = 0, count = $(".inner li").length-4;
        var $inner = $("#inner");
        function autoMove() {
            step++;
            if (step > count) {
                $inner.css("left", 0);
                step = 0;
            }
            $inner.stop().animate({left: -step * 219}, 500);
        }

        //->左右切换
        $(".outer").on("click","a",function() {
            if ($(this).index() == 1) {   //左
                step--;
                if (step < 0) {
                    $inner.css("left", -count * 219);
                    step = count - 1;
                }
                $inner.stop().animate({left: -step * 219}, 500);
            } else {   //右
                autoMove();
            }
        });
    })();
</script>js封装方法可以一个页面多次使用，只需传入对应id.
//图片滚动		roll("#inner");		roll("#inner2");
	function roll(oneRoll){		var step = 0;		var count = $(""+oneRoll+" li").length;		var $inner = $(""+oneRoll+"");		var liWidth = $(""+oneRoll+" li").outerWidth();		var ulWidth = liWidth * count + 'px';				//算出整个ul撑开的宽度		$inner.css("left", "0");		$(""+oneRoll+"").css({			"width": ulWidth		});				$inner.parent().siblings().filter(".btnLeft").hide();		if(count <= 3) {			$inner.parent().siblings().filter(".btnRight").hide();		}

 //点左按钮		$inner.parent().siblings().filter(".btnLeft").off("click").on("click", function() {			$inner.parent().siblings().filter(".btnRight").show();			step -= 1;			$inner.stop().animate({				left: -step * liWidth			}, 500);			if(step < 1) {				$(this).hide();			}		})		//点右按钮		$inner.parent().siblings().filter(".btnRight").off("click").on("click", function() {			step += 1;			var myStep = step - 1;			if(myStep == count-3) {				$inner.parent().siblings().filter(".btnRight").hide();			}			$inner.stop().animate({				left: -step * liWidth			}, 500);			$inner.parent().siblings().filter(".btnLeft").show();		})	}

https://www.kaiu.net/script/show/1857
https://demo.lanrenzhijia.com/demo/34/3466/demo/
https://sc.chinaz.com/jiaobendemo.aspx?downloadid=142790013840

az44yao

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
vue做的导航栏，左右各有按钮，点击向左右滚动

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="apple-mobile-we...
复制链接

扫一扫