标签: slideshow

我需要制作一个滑块.

我有内容(应该水平移动)和两个按钮 - "右"和"左".

如果按住按钮并按住它,内容将开始移动(按适当的方向).如果您没有按住按钮,则移动停止.此行为复制通常窗口滚动条的行为.

我写了一些代码:

var animateTime = 1,
    offsetStep = 5;

//event handling for buttons "left", "right"
$('.bttR, .bttL')
    .mousedown(function() {
        scrollContent.data('loop', true).loopingAnimation($(this));
    })
    .bind("mouseup mouseout", function(){
        scrollContent.data('loop', false);
    });


$.fn.loopingAnimation = function(el){
    if(this.data('loop') == true){
        var leftOffsetStr;

        leftOffsetInt = parseInt(this.css('marginLeft').slice(0, -2));

        if(el.attr('class') == 'bttR')
            leftOffsetStr = (leftOffsetInt - offsetStep).toString() + 'px';
        else if(el.attr('class') == 'bttL')
            leftOffsetStr = (leftOffsetInt + offsetStep).toString() + 'px';


        this.animate({marginLeft: leftOffsetStr}, animateTime, function(){
            $(this).loopingAnimation(el);
        })
    }
    return this;
}

但它确实有一些我不喜欢的东西:

1. 它总是调用函数animation(loopingAnimation) - …

我用 jquery 构建了一个特色选项卡系统（4 个选项卡）。它手动工作，但我想让它自动循环，ig 每 5 秒一次。我什至可以通过单击触发每个选项卡，但我不知道如何在到达最后一个选项卡后从第一个选项卡返回到开头。

编码太长，无法通过这里，所以我制作了一个 jsfiddle 链接： http: //jsfiddle.net/ZSPX3/

我只想遍历每个选项卡并单击它们，然后再次从选项卡的开头开始，就像我想要无限幻灯片一样。但我被困住了...

我不需要任何插件，我想学习如何亲手做到这一点，拜托。

非常感谢

我发现这个惊人的jQuery幻灯片名为Skitter.这很棒!所以我在我的最新项目中实现了它.是否可以改变两个图像之间的时间间隔.我搜索了他们网站和javascript文件中的每个位置.在jquery.skitter.js页面下面有线条

interval:2500,
interval_in_elements:300,//间隔动画悬停元素hideTools interval_out_elements:500,//间隔动画输出元素hideTools

我更改了那些但是没有效果的那些.

我的代码

<script>
$(document).ready(function() {

var options = {};

if (document.location.search) {
    var array = document.location.search.split('=');
    var param = array[0].replace('?', '');
    var value = array[1];

    if (param == 'animation') {
        options.animation = value;
    }
    else if (param == 'type_navigation') {
        if (value == 'dots_preview') {
            $('.border_box').css({'marginBottom': '40px'});
            options['dots'] = true;
            options['preview'] = true;
        }
        else {
            options[value] = true;
            if (value == 'dots') $('.border_box').css({'marginBottom': '40px'});
        }
    }
}
$('.box_skitter_large').skitter({interval: 3000});
$('.box_skitter_large').skitter(options);

// Highlight
$('pre.code').highlight({source:1, zebra:1, indent:'space', …

我正在开发一个简单的幻灯片系统.我已将幻灯片包装在隐藏的div中,当点击图库中的缩略图时会显示该幻灯片.

幻灯片放映通过一个被调用的函数commence(),该函数在单击播放按钮时执行.

目前我已将它设置为div在单击停止时再次隐藏到整体,但我想保持div显示,只需停止幻灯片放映,换句话说,停止该commence()功能.

谁能告诉我怎么做？

这是我的JS:

function commence() {
    hidden = document.getElementById("hidden");
    hidden.style.display = 'block';
    pause = document.getElementById("pause");
    pause.style.display = 'block';
    play = document.getElementById("play");
    play.style.display = 'none';
    pic = document.getElementById("picbox"); // Assign var pic to the html element.
    imgs = []; // Assign images as values and indexes to imgs array.

/* --------------------------- IMAGE URLS FOR IMGS ARRAY -------------------------*/

    imgs[0] = "/snakelane/assets/images/thumb/_1.jpg";  imgs[10] = "/snakelane/assets/images/thumb/_19.jpg"; 
    imgs[1] = "/snakelane/assets/images/thumb/_2.jpg";  imgs[11] = "/snakelane/assets/images/thumb/_20.jpg"; 
    imgs[2] = …

我在这里有一个非常简单的幻灯片:http://jsfiddle.net/Jtec5/
这是代码:
HTML:

<div id="slideshow">
   <div>
     <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     <img src="http://gillespaquette.ca/images/stack-icon.png">
   </div>
</div>

CSS:

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

jQuery的:

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

我正在尝试添加圈子,告诉我幻灯片显示的是哪张照片以及幻灯片中有多少张照片,就像那些圈子一样:

而且我也无法做到这一点,图片进入幻灯片框并且不会脱落(使用固定的宽度和高度进行幻灯片放映和脚本修复照片的宽度和高度或者只是将其剪切到内部框的幻灯片的框架,不要下车),我的意思是我不希望照片显示如下:

这个问题已被提出,但没有答案 - 我相信因为没有提供足够的信息.

我使用bxslider作为我的模板.请参见此处:http: //bxslider.com/examples/image-slideshow-captions

我可以使用"title"属性创建一个非常简单的标题,但我希望能够创建字幕(具有不同的属性,如较小的文本),我想将其转换为链接.我已经尝试在容器中实现一个div,显然,我不能让它与滑块同步而不用jquery实现它.我也试过编辑CSS无济于事.

如何添加不仅仅是图像标题的标题？就像一个覆盖图片的div？

我想用javascript制作幻灯片,但我只知道如何用里面的几张图片做到这一点,但对于我的网页,我需要做幻灯片,我可以放置div？

我只需要两个幻灯片,每张幻灯片都有3个div,两个幻灯片左边都有变化.

HTML

<div id="container" class="cont2">

        <div id="box1" class="box">Div #1<div class="kkc"><p>Div Caption1</p></div></div>
        <div id="box2" class="box">Div #2<div class="kkc"><p>Div Caption2</p></div></div>
        <div id="box3" class="box">Div #3<div class="kkc"><p>Div Caption3</p></div></div>

CSS

#container {
position: absolute;
margin: 0px;
padding: 0px;
height: 304px;
width: 500px;
overflow: hidden; 
background-color:  white;
margin-top: 78px;
margin-left: 124px;
z-index: -1;
}

.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 50%;   
top: 0px;
margin-left: -25%;
z-index: -1;
cursor: pointer;
}

 #box1 {
background-color: …

我创建了一个JavaScript幻灯片,但我不知道如何添加淡入淡出效果.请告诉我怎么做,请用JavaScript告诉,不要jQuery!

码:

var imgArray = [
    'img/slider1.jpg',
    'img/slider2.jpg',
    'img/slider3.jpg'],
    curIndex = 0;
    imgDuration = 3000;

function slideShow() {
    document.getElementById('slider').src = imgArray[curIndex];
    curIndex++;
    if (curIndex == imgArray.length) { curIndex = 0; }
    setTimeout("slideShow()", imgDuration);
}
slideShow();

我的目标是使用 HTML/CSS/JS 制作背景图片的幻灯片。我发现的许多解决方案都促进了这样的事情：

my_recursion();

function my_recursion () {
 // cycle the Background image ...
 setTimeout(my_recursion, 3000);
}

我认为这是不好的风格是错误的吗？我希望在例如周期 1000 时，所有其他 999 个 my_recursion 实例仍然打开/在堆栈上？这不会创建消耗越来越多内存的无限堆栈吗？

或者是否涉及某种智能，例如“如果一个函数在最后调用自己，则第 (n-1) 个函数将被销毁，包括在其中分配的所有变量”？

我有三个面板，其中只有文本或文本和图像，可以无限循环，并且可以从1-1000张幻灯片进行缩放。

我有以下标记：

<div class="mb-panel-container cf">

    <div class="mb-panel-section mb-slider">

        <div class="mb-panel active">
            <h1>1.1</h1>
            <p>slide 1.1</p>
            <p class="datetime"></p>
        </div>

        <div class="mb-panel">
            <h1>1.2</h1>
            <p>slide 1.2</p>
            <p class="datetime"></p>
        </div>

        <div class="mb-panel">
            <h1>1.3</h1>
            <p>slide 1.3</p>
            <p class="datetime"></p>
        </div>

    </div>



    <div class="mb-panel-section mb-slider">

        <div class="mb-panel active">
            <h1>2.1</h1>
            <p>slide 2.1</p>
            <p class="datetime"></p>
        </div>

        <div class="mb-panel">
            <h1>2.2</h1>
            <p>slide 2.2</p>
            <p class="datetime"></p>
        </div>

        <div class="mb-panel">
            <h1>2.3</h1>
            <p>slide 2.3</p>
            <p class="datetime"></p>
        </div>

    </div>



    <div class="mb-panel-section mb-slider">

        <div class="mb-panel active">
            <h1>3.1</h1>
            <p>slide 3.1</p>
            <p class="datetime"></p>
        </div>

        <div class="mb-panel">
            <h1>3.2</h1>
            <p>slide 3.2</p> …