jQuery带左侧缩略图图片幻灯片自动切换特效.zip资源-CSDN文库

共20个文件

png：16个

js：2个

html：1个

版权申诉

jquery代码

jquery特效

jquery插件

68 浏览量 2023-09-25 13:43:11 上传评论收藏 95KB ZIP 举报

**jQuery带左侧缩略图图片幻灯片自动切换特效** jQuery是一种广泛应用于Web开发的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。在这个"jQuery带左侧缩略图图片幻灯片自动切换特效"中，我们可以深入探讨jQuery如何实现这一功能。 1. **幻灯片基础** 幻灯片效果是网页设计中常见的元素，通常用于展示一组图片或内容，通过定时切换或用户交互来呈现不同的项目。在jQuery中，我们可以通过改变元素的CSS属性（如`display`或`opacity`）来创建滑动动画效果。 2. **左侧缩略图** 缩略图导航是幻灯片的一个重要组成部分，允许用户直观地看到所有可用的幻灯片并手动选择。这个特效的左侧区域可能包含每个幻灯片的预览图，当用户点击某个缩略图时，对应的主幻灯片将被显示。 3. **自动切换** 自动切换功能是通过设置定时器来实现的，jQuery的`setInterval`函数可以每隔一段时间执行一次指定的函数，从而实现图片的自动轮播。 4. **jQuery代码** 在`js`文件夹中，可能包含一个或多个.js文件，其中的代码实现了幻灯片特效。关键部分可能包括： - 使用`.each()`遍历所有幻灯片和缩略图。 - 使用`.click()`为缩略图绑定点击事件，当点击时触发幻灯片切换。 - 使用`.animate()`或`.fadeIn()`/`.fadeOut()`实现平滑的过渡效果。 - 使用`setInterval()`实现自动切换，并可能使用`.stop()`在用户交互时暂停自动切换。 5. **jQuery特效** jQuery提供了一系列的动画方法，如`.slideToggle()`、`.fadeIn()`、`.fadeOut()`等，这些方法可以使图片的显示和隐藏更加平滑自然。在这个特效中，可能结合使用了这些方法来实现幻灯片的淡入淡出效果。 6. **jQuery插件** 虽然这个项目没有明确提及使用jQuery插件，但实现类似功能时，开发者可能会利用现有的jQuery插件，如Slick、FlexSlider或 bxSlider，它们提供了现成的幻灯片解决方案，只需简单配置即可使用。如果项目没有使用插件，那么所有的逻辑都是自定义编写的。 7. **HTML结构** `index.html`文件中应该包含了幻灯片的HTML结构，包括主幻灯片区域和左侧的缩略图导航。HTML元素需要正确地组织和标记，以便jQuery代码能够正确地识别和操作它们。 8. **CSS样式** 虽然没有提到具体的CSS文件，但实现这种特效肯定需要CSS来控制幻灯片和缩略图的布局、尺寸、颜色等视觉效果。CSS可能在HTML文件内部（内联样式）或作为外部文件引用。这个项目展示了如何使用jQuery和基本的HTML/CSS技术创建一个具有实用性和用户体验的图片幻灯片组件。无论是初学者还是有经验的开发者，都能从中学习到如何构建动态的、互动的Web界面元素。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery带左侧缩略图图片幻灯片自动切换特效.zip （20个子文件）

jssor.slider-21.1.6.mini.js 44KB

jquery-1.11.3.min.js 94KB

img

09.png 3KB

05.png 3KB

02.png 3KB

10.png 3KB

08.png 3KB

loading.gif 5KB

04.png 2KB

12.png 3KB

01.png 2KB

03.png 3KB

11.png 2KB

13.png 3KB

t01.png 2KB

07.png 2KB

14.png 3KB

06.png 3KB

a17.png 5KB

index.html 11KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery带左侧缩略图图片幻灯片自动切换特效</title> </head> <body style="padding:0px; margin:0px; background-color:#000;font-family:helvetica, arial, verdana, sans-serif"> <script src="/demos/googlegg.js"></script>     <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> <script src="js/jssor.slider-21.1.6.mini.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function ($) { var jssor_1_SlideshowTransitions = [ {$Duration:1200,$Zoom:1,$Easing:{$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad},$Opacity:2}, {$Duration:1000,$Zoom:11,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,$Zoom:1,$Rotate:1,$During:{$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}}, {$Duration:1000,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}}, {$Duration:1200,x:0.5,$Cols:2,$Zoom:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,x:4,$Cols:2,$Zoom:11,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2}, {$Duration:1200,x:0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}}, {$Duration:1000,x:-4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}}, {$Duration:1200,x:-0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}}, {$Duration:1000,x:4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}}, {$Duration:1200,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}}, {$Duration:1000,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Top:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.7}}, {$Duration:1200,x:-4,y:2,$Rows:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Row:28},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}}, {$Duration:1200,x:1,y:2,$Cols:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:19},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.8}} ]; var jssor_1_options = { $AutoPlay: true, $SlideshowOptions: { $Class: $JssorSlideshowRunner$, $Transitions: jssor_1_SlideshowTransitions, $TransitionsOrder: 1 }, $ArrowNavigatorOptions: { $Class: $JssorArrowNavigator$ }, $ThumbnailNavigatorOptions: { $Class: $JssorThumbnailNavigator$, $Rows: 2, $Cols: 6, $SpacingX: 14, $SpacingY: 12, $Orientation: 2, $Align: 156 } }; var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options); /*responsive code begin*/ /*you can remove responsive code if you don't want the slider scales while window resizing*/ function ScaleSlider() { var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth; if (refSize) { refSize = Math.min(refSize, 960); refSize = Math.max(refSize, 300); jssor_1_slider.$ScaleWidth(refSize); } else { window.setTimeout(ScaleSlider, 30); } } ScaleSlider(); $(window).bind("load", ScaleSlider); $(window).bind("resize", ScaleSlider); $(window).bind("orientationchange", ScaleSlider); /*responsive code end*/ }); </script> <style> /* jssor slider arrow navigator skin 05 css */ /* .jssora05l (normal) .jssora05r (normal) .jssora05l:hover (normal mouseover) .jssora05r:hover (normal mouseover) .jssora05l.jssora05ldn (mousedown) .jssora05r.jssora05rdn (mousedown) .jssora05l.jssora05lds (disabled) .jssora05r.jssora05rds (disabled) */ .jssora05l, .jssora05r { display: block; position: absolute; /* size of arrow element */ width: 40px; height: 40px; cursor: pointer; background: url('img/a17.png') no-repeat; overflow: hidden; } .jssora05l { background-position: -10px -40px; } .jssora05r { background-position: -70px -40px; } .jssora05l:hover { background-position: -130px -40px; } .jssora05r:hover { background-position: -190px -40px; } .jssora05l.jssora05ldn { background-position: -250px -40px; } .jssora05r.jssora05rdn { background-position: -310px -40px; } .jssora05l.jssora05lds { background-position: -10px -40px; opacity: .3; pointer-events: none; } .jssora05r.jssora05rds { background-position: -70px -40px; opacity: .3; pointer-events: none; } /* jssor slider thumbnail navigator skin 01 css *//*.jssort01-99-66 .p (normal).jssort01-99-66 .p:hover (normal mouseover).jssort01-99-66 .p.pav (active).jssort01-99-66 .p.pdn (mousedown)*/.jssort01-99-66 .p { position: absolute; top: 0; left: 0; width: 99px; height: 66px;}.jssort01-99-66 .t { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}.jssort01-99-66 .w { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}.jssort01-99-66 .c { position: absolute; top: 0px; left: 0px; width: 95px; height: 62px; border: #000 2px solid; box-sizing: content-box; background: url('img/t01.png') -800px -800px no-repeat; _background: none;}.jssort01-99-66 .pav .c { top: 2px; _top: 0px; left: 2px; _left: 0px; width: 95px; height: 62px; border: #000 0px solid; _border: #fff 2px solid; background-position: 50% 50%;}.jssort01-99-66 .p:hover .c { top: 0px; left: 0px; width: 97px; height: 64px; border: #fff 1px solid; background-position: 50% 50%;}.jssort01-99-66 .p.pdn .c { background-position: 50% 50%; width: 95px; height: 62px; border: #000 2px solid;}* html .jssort01-99-66 .c, * html .jssort01-99-66 .pdn .c, * html .jssort01-99-66 .pav .c { /* ie quirks mode adjust */ width /**/: 99px; height /**/: 66px;} </style> <div id="jssor_1" style="position: relative; margin: 0 auto; top: 20px; left: 0px; width: 960px; height: 480px; overflow: hidden; visibility: hidden; background-color: #24262e;">  <div data-u="loading" style="position: absolute; top: 0px; left: 0px;"> <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div> <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:1

评论收藏

内容反馈

版权申诉