Javascript 单击缩略图或链接时创建放大效果

我有一个基本的图像滑块

jQuery（文档）.ready（函数（$）{
$（'#复选框'）。更改（函数（）{
setInterval（函数（）{
moveRight（）；
}, 3000);
});
var slideCount=$（'#slider ul li'）。长度；
var slideWidth=$（'#slider ul li'）.width（）；
var slideHeight=$（'#slider ul li'）.height（）；
var sliderUlWidth=slideCount*slideWidth；
$（'#slider'）.css（{宽度：slideWidth，高度：slideHeight}）；
$（'#slider ul'）.css（{width:sliderUlWidth，marginLeft:-slideWidth}）；
$（“#slider ul li:last child”）.prependTo（“#slider ul”）；
函数moveLeft（）{
$（'#滑块ul'）。设置动画({
左：+slideWidth
}，200，函数（）{
$（“#slider ul li:last child”）.prependTo（“#slider ul”）；
$（'#滑块ul'）.css（'左'，''）；
});
};
函数moveRight（）{
$（'#滑块ul'）。设置动画({
左：-滑动方向
}，200，函数（）{
$（“#slider ul li:first child”）。附加到（“#slider ul”）；
$（'#滑块ul'）.css（'左'，''）；
});
};
$（'a.control\u prev'）。单击（函数（）{
左移（）；
});
$（'a.control\u next'）。单击（函数（）{
moveRight（）；
});
});    
html{
边框顶部：5px实心#fff；
背景：#8A8A8A；
颜色：#2a2a2a；
}
html，正文{
保证金：0；
填充：0；
字体系列：“开放式SAN”；
}
h1{
颜色：#fff；
文本对齐：居中；
字体大小：300；
}
#滑块{
位置：相对位置；
溢出：隐藏；
保证金：20px自动0自动；
边界半径：4px；
}
#滑块ul{
位置：相对位置；
保证金：0；
填充：0；
高度：600px；
列表样式：无；
}
#李小玲{
位置：相对位置；
显示：块；
浮动：左；
保证金：0；
填充：0；
宽度：1200px；
高度：600px；
背景：#ccc；
文本对齐：居中；
线高：300px；
}
a、 控制上一个，控制下一个{
位置：绝对位置；
最高：40%；
z指数：999；
显示：块；
填充：4%3%；
宽度：自动；
高度：自动；
背景：#2a2a；
颜色：#fff；
文字装饰：无；
字号：600；
字号：18px；
不透明度：0.8；
光标：指针；
}
a、 控制上一个：悬停，a。控制下一个：悬停{
不透明度：1；
-webkit过渡：所有0.2秒轻松；
}
a、 控制前{
边界半径：0 2px 2px 0；
}
a、 控制下一步{
右：0；
边界半径：2px 0 0 2px；
}
.U选项{
位置：相对位置；
利润率：10px自动；
宽度：160px；
字号：18px；
}

在单击滑块时添加类，并使用类似css的样式设置幻灯片元素的样式

element.active {
 position: fixed;
 top: 50px;
 left: 50%;
 transform: translateX(-50%);
 bottom: 50px;
  z-index: 9999;
}

然后元素将从幻灯片中弹出，您可以向元素的活动类添加任何您想要的内容。在您的示例中，单击幻灯片元素

  $('#slider li').on('click', function () {
     $(this).toggleClass('active');
  });

活动类的css

li.active {
     position: fixed !important;
     top: 50px;
     left: 50%;
     transform: translateX(-50%);
     bottom: 50px;
}

用于简单叠加

li.active:after {
  content: '';
  position: fixed;
  top: -50px;
  bottom: -50px;
  background: rgba(0,0,0,0.75);
  left: -50%;
  width: 200%;
  height: 200%;
}

在HTML中放置一个按钮，并使用它在单击时显示
幻灯片。还可以将与滑块相关的完整HTML包装在一个div中，并在开始时隐藏该div。如下图所示

<button id="showSlider">Show me the slider</button>

<div id="sliderWrapper" style="display:none;">
 <!--Your current HTML goes here-->
</div>

现在将“文档准备”功能修改为以下内容

jQuery(document).ready(function($) {

  $('#showSlider').on('click', function() { // button click event
    SliderScripts();  // run the sliders scripts
    $('#sliderWrapper').show(); / show the slider.
    $(this).hide(); //hide the button
  });

});

下面是一个工作片段


jQuery（文档）.ready（函数（$）{
$（'#showSlider'）。在（'单击'，函数（）上）{
滑块脚本（）；
$（'#SliderRapper'）.show（）；
$（this.hide（）；
});
});
函数滑块脚本（）{
$（'#复选框'）。更改（函数（）{
setInterval（函数（）{
moveRight（）；
}, 3000);
});
var slideCount=$（'#slider ul li'）。长度；
var slideWidth=$（'#slider ul li'）.width（）；
var slideHeight=$（'#slider ul li'）.height（）；
var sliderUlWidth=slideCount*slideWidth；
$（“#滑块”）.css({
宽度：滑动宽度，
高度：滑块高度
});
$（'#滑块ul'）.css({
宽度：滑块宽度，
边缘左侧：-滑动宽度
});
$（“#slider ul li:last child”）.prependTo（“#slider ul”）；
函数moveLeft（）{
$（'#滑块ul'）。设置动画({
左：+slideWidth
}，200，函数（）{
$（“#slider ul li:last child”）.prependTo（“#slider ul”）；
$（'#滑块ul'）.css（'左'，''）；
});
};
函数moveRight（）{
$（'#滑块ul'）。设置动画({
左：-滑动方向
}，200，函数（）{
$（“#slider ul li:first child”）。附加到（“#slider ul”）；
$（'#滑块ul'）.css（'左'，''）；
});
};
$（'a.control\u prev'）。单击（函数（）{
左移（）；
});
$（'a.control_next'）。单击（函数（）{
moveRight（）；
});
}
html{
边框顶部：5px实心#fff；
背景：#8A8A8A；
颜色：#2a2a2a；
}
html，
身体{
保证金：0；
填充：0；
字体系列：“开放式SAN”；
}
h1{
颜色：#fff；
文本对齐：居中；
字体大小：300；
}
#滑块{
位置：相对位置；
溢出：隐藏；
保证金：20px自动0自动；
边界半径：4px；
}
#滑块ul{
位置：相对位置；
保证金：0；
填充：0；
高度：600px；
列表样式：无；
}
#李小玲{
位置：相对位置；
显示：块；
浮动：左；
保证金：0；
填充：0；
宽度：1200px；
高度：600px；
背景：#ccc；
文本对齐：居中；
线高：300px；
}
a、 控制前，
a、 控制下一步{
位置：绝对位置；
最高：40%；
z指数：999；
显示：块；
填充：4%3%；
宽度：自动；
高度：自动；
背景：#2a2a；
颜色：#fff；
文字装饰：无；
字号：600；
字号：18px；
不透明度：0.8；
光标：指针；
}
a、 控制前：悬停，
a、 控制下一步：悬停{
不透明度：1；
-webkit过渡：所有0.2秒轻松；
}
a、 控制前{
边界半径：0 2px 2px 0；
}
a、 控制下一步{
右：0；
边界半径：2px 0 0 2px；
}
.U选项{
位置：相对位置；
利润率：10px自动；
宽度：160px；
字号：18px；
}

给我看看滑块

幻灯片1
幻灯片2
幻灯片3
幻灯片4

自动播放滑块
基本思想：使用一些jQuery lightbox脚本->这一个非常好，imho。在示例第页-th
jQuery(document).ready(function($) {

  $('#showSlider').on('click', function() { // button click event
    SliderScripts();  // run the sliders scripts
    $('#sliderWrapper').show(); / show the slider.
    $(this).hide(); //hide the button
  });

});