缩略图轮播

  

 <%--  全景图片--%>
        <script type="text/javascript">
            var n, interval;
            $(document).ready(function () {
                var $div_li = $("div .showSImgBox li");
                $div_li.click(function () {
                    var index = $div_li.index(this);
                    $(this).addClass("showCurrent").siblings().removeClass();
                    var src = $(".showSImgBox li img").eq(index).attr("src");
                    $(" div .showBImgBox img").attr("src", src).fadeIn(5000)
                });
                time(0);
            });
            var n, interval = null; 				//	n:指定 或 标记当前播放的图片
            function time(index) {
                n = index;
                if (interval == null) {
                    interval = setInterval("play()", 5000);
                }
            }

            function play() {
                var count = $(" .showSImgBox li").length;
                n++;
                if (n > count) {
                    n = 0;
                }
                $(".showSImgBox li").removeClass("showCurrent");
                $(".showSImgBox li").eq(n).addClass("showCurrent");

                var src = $(".showSImgBox li img").eq(n).attr("src");
                $("div .showBImgBox img").attr("src", src).fadeIn(5000);
            }
        </script>
        <div class="qjShowBox">
            <div class="showBImgBox">
                <img alt="" src="images/quanjing.jpg" />
                <%--    <img src="images/qjShowBimg00.jpg" />--%>
            </div>
            <div class="showSImgBox" id="showSImgBox">
                <ul>
                    <asp:Repeater runat="server" ID="rptquanjingsmall">
                        <ItemTemplate>
                            <li><a href="javascript:void(0)">
                                <img src="<%#globalVariables.FileDir+Eval("GlobalPicBig2") %>" alt="" width="181px"
                                    height="90px" /></a></li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
        </div>
时间: 2024-08-23 21:50:28

缩略图轮播的相关文章

自定义属性作业——带缩略图的轮播切换——JS学习笔记2015-5-31(第44天)

今天看着老师的教程,学习完了自定义属性的章节,同时完成了带缩略图的轮播切换: 收获:1.在写HTML结构的时候发现空格符或者换行符对样式的影响,比如<li></li><li></li>之间如果有空格或者间距会产生间隙:因为现代浏览器基本上都可以解析出来: 2.绝对定位下的水平和垂直居中问题以及复习了解决方案: 3.在这个作业中,应用到了this,自定义属性,for循环,点击事件,动态获取组元素,数组等多种基础知识,可见基础的重要性: 4.收获完成作业时候的那

超炫酷的jQuery轮播焦点图 底部带切换缩略图

详细内容请点击 前面我们刚刚分享过一款jQuery/HTML5响应式焦点图动画应用,效果非常炫酷.这次我们再来分享一款基于jQuery的图片轮播焦点图,这款jQuery焦点图的特点是整个图片播放器是宽屏的效果,并且在焦点图底部有一排可以滑动的缩略图,点击缩略图可以快速跳转到相应的图片.  在线演示源码下载 学习来源:http://www.html5tricks.com/jquery-cool-image-slider-thumb.html 更多html5内容请点击

15款jQuery带缩略图的图片轮播切换特效代码

JQuery宽屏电影大图幻灯片轮播切换代码 jquery带文字缩略图的图片轮播切换代码 jQuery OwlCarousel图片滚动插件世界杯图片轮播滚动代码 jQuery仿中国建设银行带缩略图控制滚动图片轮播切换 jquery图片滑动切换效果左右按钮控制图片滑动轮播切换效果 jQuery幻灯片插件可自动轮播和暂停的图片幻灯片代码 jQuery带缩略图的焦点图代码_带标题的焦点图代码 jquery图片轮播插件带小缩略图片的焦点图切换效果代码 原生js图片插件缩略图片控制大图淡出淡进切换支持图片轮

Vue 3D轮播 带缩略图 版本 (+动画 翻卡)

前言 用Vue来写了 移动端 3D轮播 带缩略图  ,在加 动画翻卡效果  ,其实也不是太难吧,也就做了一下午,哈哈, 船到桥头自然直,这样才可以, 首先看下做好的效果图 可以 点击 滑动 ,可以触摸滑动, 可以点击 缩略图滑动, 最后 在点击那个 选中的 翻卡的 那个有翻卡 的3D效果 代码: <template> <section class="container"> <div id="slide" class="slid

20款带左右箭头的焦点图片轮播特效代码

20款带左右箭头的焦点图片轮播特效代码分享 html5带倒影3D图片叠加轮播切换特效 jQuery slide图片自动轮播滚动插件 jQuery焦点图插件带按钮控制图片轮播滚动代码 jquery仿hao123带新闻标题图片轮播滚动效果 jQuery仿瑞丽全屏透明遮罩图片轮播滚动代码 jQuery带网上开户表单的焦点图轮播代码 jquery左右箭头控制带缩略图片轮播切换 jQuery responsiveslides.js响应式图片轮播特效 jQuery OwlCarousel图片滚动插件世界杯图

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

从零开始,搭建博客系统MVC5+EF6搭建框架(5),博客详情页、留言、轮播图管理、右侧统计博文

一.博客系统进度回顾 上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效果 2.2实现控制器在前台控制器中创建一个Blog的控制器,主要是展示博客分类以及详情页 Action详情页实现: 1 /// <summary> 2 /// 详情页 3 /// </summary> 4 /// <param name="id"><

淡入淡出js轮播广告

淡入淡出js轮播广告,写法类似自动播放的tab选项卡,加入了淡入淡出效果. js代码: function lunbo(contClass, numArr, normalClass, hoverClass){ function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag =

jQuery eislideshow 图片轮播

在线实例 基础演示 自动播放 使用方法 <div id="ei-slider" class="ei-slider"> <ul class="ei-slider-large"> <li> <img src="images/large/4.jpg" alt="image04" /> <div class="ei-title"> &l