javascript - 尝试创建轮播效果时出错

标签 javascript jquery html css carousel

我正在尝试为我的网站创建轮播效果,但遇到了问题。我的代码如下,但是当我尝试单击其中一个按钮时,出现错误提示

Uncaught ReferenceError: slide is not defined
at HTMLButtonElement.onclick (index.html:22)

function slide(dir){
    var item_width = $('#carousel_ul li').width();
    if(dir == 'left'){
        var original_indent = $('#carousel_ul').css('left');
        var new_indent = parseInt(original_indent) + item_width;
        $('#carousel_ul').css('left': new_indent);
    }else if(dir == 'right'){
        var original_indent = $('#carousel_ul').css('left');
        var new_indent = parseInt(original_indent) - item_width;
        $('#carousel_ul').css('left': new_indent);
    }
}
#carousel_inner{
    float:left;
    width:600px;
    overflow:hidden;
}
#carousel_ul{
    position:relative;
    left:-200px;
    list-style:none;
    margin:0px;
    padding:0px;
    width:9999px;
}
#carousel_ul li{
    float:left;
    width:200px;
    padding:0px;
    height:200px;
    background:transparent;
    margin:0px;
}
#left_scroll,#right_scroll{
    float:left;
    margin-left:5px;
    margin-right:5px;
    height:150px;
    width:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="carousel_container">
    <div id="left_scroll"><button onclick="slide('left');">prev</button></div>
    <div id="carousel_inner">
        <ul id="carousel_ul">
            <li><img src="http://via.placeholder.com/150x150"></li>
            <li><img src="http://via.placeholder.com/150x150"></li>
            <li><img src="http://via.placeholder.com/150x150"></li>
            <li><img src="http://via.placeholder.com/150x150"></li>
            <li><img src="http://via.placeholder.com/150x150"></li>
            <li><img src="http://via.placeholder.com/150x150"></li>
            <li><img src="http://via.placeholder.com/150x150"></li>
            <li><img src="http://via.placeholder.com/150x150"></li>
            <li><img src="http://via.placeholder.com/150x150"></li>
            <li><img src="http://via.placeholder.com/150x150"></li>
        </ul>
    </div>
    <div id="right_scroll"><button onclick="slide('right');">next</button></div>
</div>

我也希望尝试让它进入无限循环,但不确定如何去做。

我在想:

$('#carousel_ul li:first').after($('#carousel_ul li:last'));
$('#carousel_ul li:last').before($('#carousel_ul li:first'));

我知道那里有很多不同的预制轮播,但我想自己尝试解决这个问题。

最佳答案

包含无限循环的更新 JS 文件:

function slide(dir){
    var item_width = $('#carousel_ul li').outerWidth();
    if(dir == 'left'){
        var original_indent = $('#carousel_ul').css('left');
        var new_indent = parseInt(original_indent) + item_width;
        $('#carousel_ul li:first').before($('#carousel_ul li:last'));
    }else if(dir == 'right'){
        var original_indent = $('#carousel_ul').css('left');
        var new_indent = parseInt(original_indent) - item_width;
        $('#carousel_ul li:last').after($('#carousel_ul li:first'));
    }
}

关于javascript - 尝试创建轮播效果时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51059886/

相关文章:

javascript - 如何仅删除每个主菜单的第一个二级子菜单的 margin-top

javascript - AJAX 和 IE - 无法获取属性错误

jquery - 淡入/淡出不起作用

javascript - JQuery/Javascript - 在 DOM 中搜索文本并插入 HTML

jquery - 即使为空也保留 td "expanded"

html - 标签位于顶部的内联表单字段

javascript - 使用 rotateY() css 翻转过渡时,有什么方法可以防止内容镜像?

php - 通过javascript提交两个表单而无需点击

javascript - 单击提交按钮打开打印预览

javascript - 使用 javascript 和 ajax 选项创建 select html