jquery书架式图片展示特效
时间：2021-07-01 10:21:17 帮助过：0人阅读
jquery书架 jquery图片展示 jquery拖动 jquery书柜 jquery特效 jquery下载
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>jquery书架式图片展示特效_jquery图片特效插件</title>
<link rel="stylesheet" href="css/sti_style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/mediaelementplayer.css">
<style>
body { margin:0; }
</style>
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/jquery.versatileTouchSlider.min.js"></script>
<script src="js/mediaelement-and-player.min.js"></script>
<script>
jQuery(document).ready(function() {
$.versatileTouchSlider('#ex_shelf_full', {
slideWidth: 960, // some number. ex: 960 or '100%'
slideHeight: 'auto', // some number. ex: 220 or 'auto'
showPreviousNext: true,
currentSlide: 0,
scrollSpeed: 600,
autoSlide: false,
autoSlideDelay: 3000,
showPlayPause: true,
showPagination: true,
alignPagination: 'left',
alignMenu: 'left',
swipeDrag: true,
sliderType: 'image_shelf', // image_shelf, image_banner, image_text, image_gallery
pageStyle: 'numbers', // numbers, bullets, thumbnails
orientation: 'horizontal', // horizontal, vertical (if vertical, the "slideHeight" option must be a number, not 'auto')
onScrollEvent: function() {},
ajaxEvent: function() {}
}
);
});
</script>
</head>
<body>
<div class="sti_container" id="ex_shelf_full" style="margin-top:50px;">
<div class="slider_description"><strong>jquery书架式图片展示特效</strong></div>
<div class="sti_slider">
<div class="sti_items">
<!-- SLIDE GROUP 1 -->
<div class="sti_slide">
<div class="sti_shelf_divider"></div>
<div class="sti_prod">
<img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150">
<a href="http://www.kaiwo123.com/ad/h1.jpg" class="link video sti_lightbox" data-type="video-vimeo" data-size="700x394" title="Lamborghini Aventador"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150">
<a href="http://www.kaiwo123.com/ad/h2.jpg" class="link video sti_lightbox" data-type="video-youtube" data-size="700x420" title="Youtube Video (For The Birds / PIXAR)"></a>
<a href="#" class="ribbon ribbon_green" title="Ribbon"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_3_thumb.jpg" alt="" width="110" height="150">
<a href="http://www.kaiwo123.com/ad/h3.jpg" class="link video sti_lightbox" data-type="video-vimeo" data-size="700x394" title="Vimeo Video"></a>
<a href="#" class="ribbon ribbon_red" title="Ribbon"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_4_thumb.jpg" alt="" width="110" height="150">
<a href="http://www.kaiwo123.com/ad/h4.jpg" class="link audio sti_lightbox" data-type="audio" data-size="450x50" title="Audio Example. HTML5 Support / Flash Fallback"></a>
<a href="#" class="ribbon ribbon_green" title="Ribbon"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_5_thumb.jpg" alt="" width="110" height="150">
<a href="http://www.kaiwo123.com/ad/h5.jpg" class="link video sti_lightbox" data-type="video" data-size="540x303" title="MP4 Video. HTML5 Support / Flash Fallback"></a>
<a href="#" class="ribbon ribbon_orange" title="Ribbon"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150">
<a href="http://www.kaiwo123.com/ad/h1.jpg" class="link zoom sti_lightbox" data-type="image" title="Lightbox image example"></a>
<a href="#" class="ribbon ribbon_blue" title="Ribbon"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150">
<a href="http://www.kaiwo123.com/ad/v1.jpg" class="link audio sti_lightbox" data-type="audio" data-size="450x50" title="Audio Example 2. HTML5 Support / Flash Fallback"></a>
</div>
<div class="sti_shelf_divider_bottom"></div>
</div>
<!-- SLIDE GROUP 2 -->
<div class="sti_slide">
<div class="sti_shelf_divider"></div>
<div class="sti_prod">
<img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150">
<a href="#" class="link more" title="Title"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150">
<a href="content/audio/AirReview-Landmarks-02-ChasingCorporate.mp3" class="link audio sti_lightbox" data-type="audio" data-size="450x50" title="Audio Example. HTML5 Support / Flash Fallback"></a>
<a href="#" class="ribbon ribbon_green" title="Ribbon"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_3_thumb.jpg" alt="" width="110" height="150">
<a href="#" class="link more" title="Title"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_4_thumb.jpg" alt="" width="110" height="150">
<a href="http://vimeo.com/53327926" class="link video sti_lightbox" data-type="video-vimeo" data-size="700x394" title="Vimeo Video"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_5_thumb.jpg" alt="" width="110" height="150">
<a href="content/html/html_content.html" class="link content sti_lightbox" data-type="html-content" data-size="550x450" title="HTML Content"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150">
<a href="#" class="link more" title="Title"></a>
<a href="#" class="ribbon ribbon_red" title="Ribbon"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150">
<a href="#" class="link more" title="Title"></a>
</div>
<div class="sti_shelf_divider_bottom"></div>
</div>
<!-- SLIDE GROUP 3 -->
</div><!-- sti_items -->
</div><!-- sti_slider -->
<div class="sti_paginate">
<div class="sti_page"></div>
<div class="sti_control">
<a href="#" class="sti_btn sti_play"><img src="img/play.png" alt=""></a>
<a href="#" class="sti_btn sti_pause"><img src="img/pause.png" alt=""></a>
</div>
</div>
</div><!-- sti_container -->
<div>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="https://www.mgtv.xyz" target="_blank">mgtv素材</a></p>
</div>
</body>
人气教程排行
- 0次 1 jQuery带标题左右移动图片相册
- 0次 2 jQuery上下自动切换图片相册
- 0次 3 CSS3选项动画切换效果
- 0次 4 jQuery自适应图片画廊插件
- 0次 5 jquery+css3手风琴图片切换特效
- 0次 6 CSS3图片导航效果
- 0次 7 CSS3+jQuery横向手风琴折叠效果
- 0次 8 jQuery+CSS3模拟Mac OS界面
- 0次 9 JS横向滚动带倒影照片展
- 0次 10 jQuery背景墙聚光灯效果
- 0次 11 jQuery全页图像预览画廊
- 0次 12 jQuery+CSS图片浮动层效果
- 0次 13 jQuery响应式动画片头效果
- 0次 14 jQuery图片分割显示内容
- 0次 15 jquery滑动显示和隐藏图片效果
- 0次 16 jQuery+CSS3缩略图邻近效应
- 0次 17 jquery文中图片放大显示特效
- 0次 18 jquery多个图标组成3D旋转效果
- 0次 19 jQuery内容滑动效果jFlow插件
- 0次 20 jQuery点击图片翻页效果