精华内容
下载资源
问答
  • jq幻灯片

    2019-10-07 08:48:11
    javascript脚本:$(function(){ $("#KinSlideshow").KinSlideshow(); }) HTML代码: <div id="KinSlideshow" > <a href=http://www.5xsj.net target="_blank">...img src="images/1...
     
    javascript脚本:

    $(function(){ $("#KinSlideshow").KinSlideshow(); })

    HTML代码:

    <div id="KinSlideshow" >
          <a href=http://www.5xsj.net target="_blank"><img src="images/1.jpg" alt="这是标题一" /></a>
          <a href=http://www.5xsj.net target="_blank"><img src="images/2.jpg" alt="这是标题二" /></a>
          <a href=http://www.5xsj.net target="_blank"><img src="images/3.jpg" alt="这是标题三" /></a>
          <a href=http://www.5xsj.net target="_blank"><img src="images/4.jpg" alt="这是标题四" /></a>
          <a href=http://www.5xsj.net target="_blank"><img src="images/5.jpg" alt="这是标题五" /></a>
          <a href=http://www.5xsj.net target="_blank"><img src="images/6.jpg" alt="这是标题六" /></a>
    </div>

     

    javascript脚本:

     

    $(function(){
            $("#KinSlideshow").KinSlideshow({
                    moveStyle:"down",         //设置切换方向为向下 [默认向左切换]
                    intervalTime:8,           //设置间隔时间为8秒  [默认为5秒]
                    mouseEvent:"mouseover"        //设置鼠标事件为“鼠标滑过切换”  [默认鼠标点击时切换]
                    titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //设置标题文字大小为14px,颜色:#FF0000
            });
    })

    转载于:https://www.cnblogs.com/Jlasp/archive/2013/05/11/3072399.html

    展开全文
  • JQ幻灯片

    2019-09-21 05:15:38
    jquery.panelgallery View Code /* * jQuery panelgallery plugin * @author admin@catchmyfame.com - http://www.catchmyfame.com * @version 1.1 * @date August 13, 2009 ... * @category jQuery...

    jquery.panelgallery

    View Code
    /*
     * jQuery panelgallery plugin
     * @author admin@catchmyfame.com - http://www.catchmyfame.com
     * @version 1.1
     * @date August 13, 2009
     * @category jQuery plugin
     * @copyright (c) 2009 admin@catchmyfame.com (www.catchmyfame.com)
     * @license CC Attribution-No Derivative Works 3.0 - http://creativecommons.org/licenses/by-nd/3.0/
     */
    
    (function($){
        $.fn.extend({
            panelGallery: function(options)
            {
                var defaults = 
                {
                    sections : 3,
                    imageTransitionDelay : 3000,
                    sectionTransitionDelay : 700,
                    startDelay : 2000,
                    repeat : true,
                    direction : "lr"
                };
            var options = $.extend(defaults, options);
        
                return this.each(function() {
                    var o=options;
                    var obj = $(this);
    
                    // Preload images
                    $("img", obj).each(function(i) { // preload images
                        preload = new Image($(this).attr("width"),$(this).attr("height")); 
                        preload.src = $(this).attr("src");
                    });
    
                    function getRandom()
                    {
                        return Math.round(Math.random()*100000000);
                    }
                    
                    function getDirection(imgIndex)
                    {
                        return ($("img:eq("+imgIndex+")", obj).attr("name") == "")? o.direction: $("img:eq("+imgIndex+")", obj).attr("name");
                    }
                    
                    function setupNextTransition(direction)
                    {
                        if((direction== "lr" || direction== "rl"))
                        {
                            if(isHorizReversed && direction== "lr")
                            {
                                panelIDArrayHoriz.reverse();
                                isHorizReversed = false;
                            }
                            if(!isHorizReversed && direction== "rl")
                            {
                                panelIDArrayHoriz.reverse();
                                isHorizReversed = true;
                            }
                            setTimeout(function(){$("#p"+panelIDArrayHoriz[0]).fadeIn(o.sectionTransitionDelay,doNext)},o.imageTransitionDelay);
                        }
                        else if((direction== "tb" || direction== "bt"))
                        {
                            if(isVertReversed && direction== "tb")
                            {
                                panelIDArrayVert.reverse();
                                isVertReversed = false;
                            }
                            if(!isVertReversed && direction== "bt")
                            {
                                panelIDArrayVert.reverse();
                                isVertReversed = true;
                            }
                            setTimeout(function(){$("#p"+panelIDArrayVert[0]).fadeIn(o.sectionTransitionDelay,doNext)},o.imageTransitionDelay);
                        }
                    }
    
                    var imgArray = $("img", obj);
                    $("img:not(:first)", obj).hide(); // Hides all images in the container except the first one
                    $("img", obj).css({'position':'absolute','top':'0px','left':'0px'}); // Set the position of all images in the container
    
                    var sectionsVert = o.sections;
                    var sectionsHoriz = o.sections;
                    var imgWidth = $("img:first", obj).attr("width"); // Get width of base image;
                    var imgHeight = $("img:first", obj).attr("height"); // Get height of base image;
                    var sectionWidth = Math.floor(imgWidth/o.sections); // Used when transitioning lr and rl
                    var sectionHeight = Math.floor(imgHeight/o.sections); // Used when transitioning tb and bt
                    if (imgWidth%o.sections != 0) sectionsHoriz++; // This will either equal sections or sections+1
                    if (imgHeight%o.sections != 0) sectionsVert++; // This will either equal sections or sections+1
                    $(this).css({'width':imgWidth,'height':imgHeight}); // Sets the container width and height to match the first image's dimensions
    
                    var imgOffsetLeft = 0;
                    var imgOffsetTop = 0;
                    var panelIDArrayVert = new Array(); // In order to accommodate multiple containers, we need unique div IDs
                    var panelIDArrayHoriz = new Array(); // In order to accommodate multiple containers, we need unique div IDs
    
                    for(var i=0;i<sectionsHoriz;i++)
                    {
                        panelID = getRandom();
                        $(this).append('<div class="sectionHoriz" id="p'+panelID+'">'); // Create a new div 'part'
                        $("#p"+panelID).css({'left':imgOffsetLeft+'px','background-position':-imgOffsetLeft+'px 50%','display':'none'}); // Set the left offset and background position. THIS ISNT WORKING IN WEBKIT
                        imgOffsetLeft = imgOffsetLeft + sectionWidth;    // Increment the offset
                        panelIDArrayHoriz[i] = panelID;
                    }
                    if(o.direction == "lr" || o.direction == "rl") $("div.sectionHoriz", obj).css({'top':'0px','background-repeat':'no-repeat','position':'absolute','z-index':'10','width':sectionWidth+'px','height':imgHeight+'px','float':'left','background-image':'url('+$("img:eq(1)", obj).attr("src")+')'});
    
                    for(var i=0;i<sectionsVert;i++)
                    {
                        panelID = getRandom();
                        $(this).append('<div class="sectionVert" id="p'+panelID+'">'); // Create a new div 'part'
                        $("#p"+panelID).css({'top':imgOffsetTop+'px','background-position':'50% '+-imgOffsetTop+'px','display':'none'}); // Set the left offset and background position
                        imgOffsetTop = imgOffsetTop + sectionHeight;    // Increment the offset
                        panelIDArrayVert[i] = panelID;
                    }
                    $("div.sectionVert", obj).css({'left':'0px','background-repeat':'no-repeat','position':'absolute','z-index':'10','width':imgWidth+'px','height':sectionHeight+'px','background-image':'url('+$("img:eq(1)", obj).attr("src")+')'});
    
                    var doingSection=0, doingImage=1, isHorizReversed = false, isVertReversed = false;
    
                    function doNext()
                    {
                        doingSection++;
                        var currentDirection = getDirection(doingImage);
    
                        if((currentDirection == "lr" || currentDirection == "rl") && doingSection<sectionsHoriz)
                        {
                            $("#p"+panelIDArrayHoriz[doingSection]).fadeIn(o.sectionTransitionDelay,doNext);
                        }
                        else if((currentDirection == "tb" || currentDirection == "bt") && doingSection<sectionsVert)
                        {
                            $("#p"+panelIDArrayVert[doingSection]).fadeIn(o.sectionTransitionDelay,doNext);
                        }
                        else
                        {
                            //alert('done'+currentDirection);
                            if(doingImage == 0 && o.repeat) $("img:last", obj).hide(); // If doingImage = 0 and we're repeating, hide last (top) image
                            // When we finish fading in the individual panels, show the corresponding image
                            // (which appears under the divs in terms of stacking order). This is a bit of
                            // slight of hand and allows us to load up the panel divs with the next image in the sequence.
                            $("img:eq("+doingImage+")", obj).show();
                            $("div.sectionVert", obj).hide(); // Now hide all the divs so we can change their image
                            $("div.sectionHoriz", obj).hide(); // Now hide all the divs so we can change their image
                            doingSection=0;
                            doingImage++;
                            $("div.sectionHoriz", obj).css({'background-image':'url('+$("img:eq("+doingImage+")", obj).attr("src")+')'});
                            $("div.sectionVert", obj).css({'background-image':'url('+$("img:eq("+doingImage+")", obj).attr("src")+')'});
                            if(doingImage < imgArray.length) // need to stop when doingImage equals imgArray.length
                            {
                                nextDirection = getDirection(doingImage);
                                setupNextTransition(nextDirection);
                            }
                            else if(o.repeat)
                            {
                                doingImage = 0;
                                $("img:not(:last)", obj).hide(); // Hides all images in the container except the last one
                                $("div.sectionVert", obj).hide();
                                $("div.sectionHoriz", obj).hide();
                                $("div.sectionHoriz", obj).css({'background-image':'url('+$("img:eq(0)", obj).attr("src")+')'});
                                $("div.sectionVert", obj).css({'background-image':'url('+$("img:eq(0)", obj).attr("src")+')'});
                                firstImageDirection = getDirection(0);
                                setupNextTransition(firstImageDirection);
                            }
                        }
                    }
                    var startDirection = ($("img:eq(1)", obj).attr("name")=="") ? o.direction: $("img:eq(1)", obj).attr("name"); // Check direction of the second image
                    if(startDirection == "rl")
                    {
                        panelIDArrayHoriz.reverse();
                        isHorizReversed = true;
                    }
                    if(startDirection == "bt")
                    {
                        panelIDArrayVert.reverse();
                        isVertReversed = true;
                    }
                    var startArray = (startDirection == "lr" || startDirection == "rl") ? panelIDArrayHoriz[0]:panelIDArrayVert[0];
                    setTimeout(function(){$("#p"+startArray).fadeIn(o.sectionTransitionDelay,doNext)},o.startDelay); // Kickoff the sequence
             });
            }
        });
    })(jQuery);

     

    Script :

    View Code
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="jquery.panelgallery-1_1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#container').panelGallery();
        });
    </script>

     

    HTML :

    View Code
    <div id="container" style="position:relative">
        <img src="1.jpg" alt="image 1" width="500" height="250" />
        <img src="2.jpg" alt="image 2" width="500" height="250" />
        <img src="3.jpg" alt="image 3" width="500" height="250" />
    </div>

     

    转载于:https://www.cnblogs.com/drinkoJam/archive/2013/01/06/2848373.html

    展开全文
  • jq幻灯片特效

    2016-08-02 10:36:28
    jq幻灯片特效
  • jq 幻灯片

    千次阅读 2013-01-16 16:26:15
    今日上班一个下午用jq写了一个幻灯片,呵呵!其实挺简单的,看代码吧: html: test

            今日上班一个下午用jq写了一个幻灯片,呵呵!其实挺简单的,看代码吧:

    html:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
      <meta charset="UTF-8">
      <title>test</title>
      <link rel="stylesheet" href="../css/text.css">
      <script type="text/javascript" src="../js/jquery-1.7.min.js"></script>
      <script type="text/javascript" src="../js/text.js"></script>
    </head>
    <body>
      <div class="test">
      	<ul class="slide" id="slide">
      		<li class="slide-item slide-first-item">
      			<img src="../image/banner.jpg" alt="">
      		</li>
      		<li class="slide-item">
      			<img src="../image/banner2.jpg" alt="">
      		</li>
      		<li class="slide-item">
      			<img src="../image/banner3.gif" alt="">
      		</li>
      		<li class="slide-item">
      			<img src="../image/banner4.png" alt="">
      		</li>
      		<li class="slide-item">
      			<img src="../image/banner5.png" alt="">
      		</li>
      		<li class="slide-item">
      			<img src="../image/banner.jpg" alt="">
      		</li>
      	</ul>
      	<div class="slide-choice">
           <button class="slide-choice-btn slide-choice-focus-btn" id="slide-choice-btn0" value = "0"></button>
           <button class="slide-choice-btn slide-choice-unfocus-btn" id="slide-choice-btn1" value="1"></button>
           <button class="slide-choice-btn slide-choice-unfocus-btn" id="slide-choice-btn2" value="2"></button>
           <button class="slide-choice-btn slide-choice-unfocus-btn" id="slide-choice-btn3" value="3"></button>
           <button class="slide-choice-btn slide-choice-unfocus-btn" id="slide-choice-btn4" value="4"></button> 
        </div>
      </div>
    </body>
    </html>

    css:

    *{
    	margin: 0;
    	padding: 0;
    }
    .test{
    	position: relative;
    	width: 100%;
    	height: 421px;
    	overflow: hidden;
    }
    .slide{
    	position: relative;
    	list-style: none;
    	position: absolute;
    	width: 9000px;
    }
    .slide-item{
    	float: left;
    }
    .slide-choice{
    	width: 100%;
    	height: 50px;
    	position: absolute;
    	bottom: 0;
    	text-align: center;
    	background: rgba(0,0,0,0.8);
    }
    .slide-choice-btn{
    	width: 10px;
    	height: 10px;
    	margin: 20px 10px 10px 10px;
    	border:0;
    	background-image:url(../image/result-btn.png);
    	background-repeat: no-repeat;
    }
    .slide-choice-focus-btn{
    	background-position: 0px -20px;
    }
    .slide-choice-unfocus-btn{
    	background-position: 0px 0px;
    }

    JS:

    window.onload = function(){
    	Slide.start();
    	$(".slide-choice-btn").click(Slide.btnClick);
    }
    
    var Slide = {
    	num : 6,
    	imgCount : 0,
    	btnCount : 0,
    	start : function(){
    		this.imgSlide();
    		this.btnSlide();
    	},
    	imgSlide : function(){
    			setInterval(function(){
    				var timeInterval = Slide.imgCount*-1500;
    				$(".slide").animate({"left":timeInterval},500);
    				Slide.imgCount++;
    				if(Slide.imgCount%Slide.num == 0){
    					Slide.imgCount = 0;
    				}
    				if(Slide.imgCount == 0){
    					$(".slide").animate({"left":0},0);
    					Slide.imgCount++;
    				}
    			},5000);
    	},
    	btnSlide : function(){
    		setInterval(function(){
    			$(".slide-choice-btn").css({"background-position":"0px 0px"});
    			Slide.btnCount = Slide.btnCount%(Slide.num-1);
    			$("#slide-choice-btn"+Slide.btnCount).css({"background-position":"0px -20px"});
    			Slide.btnCount++;
    		},5000);
    	},
    	btnClick : function(){
    		$(".slide-choice-btn").css({"background-position":"0px 0px"});
    		$(".slide").animate({"left":this.value*-1500},500);
    		$(this).css({"background-position":"0px -20px"});
    		Slide.btnCount = this.value;
    		Slide.imgCount = this.value;
    	}
    }

    效果图:(图片随意找的,不要见怪)



            JS写得比较烂,不要见怪,呵呵!

           注意:

          1:要引用jq包

          2:为了兼容IE,我用了图片!按钮的图片我用了CSS Sprites合并

    展开全文
  • JQ幻灯片,多图切换

    2011-11-01 16:45:39
    JQ幻灯片,多图切换,自己修改出来的,贡献给大家了
  • jq幻灯片2

    2019-10-07 08:48:13
    JS代码:$(function(){ $('#slides').slides({ preload: true, preloadImage: 'img/loading.gif', play: 5000, pause: 2500, hoverPause: true }); }); CSS样式: html, body, div,im...
    JS代码:
     $(function(){   $('#slides').slides({    preload: true,    preloadImage: 'img/loading.gif',    play: 5000,    pause: 2500,    hoverPause: true   });  });

    CSS样式:

    html, body, div,img, ol, ul, li { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
    ol, ul { list-style:none; }
    #container { width:850px; margin:0 auto; position:relative; z-index:0; }
    #slides { position:absolute; top:15px; left:4px; z-index:100; }
    #slides .next, #slides .prev {width:24px; height:43px;position:absolute;top:107px;left:-24px;display:block;z-index:101;background:url(img/arrow-prev.png);cursor:pointer;}
    #slides .next {left:800px;background:url(img/arrow-next.png); }
    .slides_container { width:800px; height:240px; overflow:hidden; position:relative; margin:0 auto;}
    .pagination { margin:10px auto 0; width:100px; }
    .pagination li { float:left; margin:0 1px; }
    .pagination li a { display:block; width:12px; height:0; padding-top:12px; background-image:url(img/pagination.png); background-position:0 0; float:left; overflow:hidden; }
    .pagination li.current a { background-position:0 -12px; }

    html代码:

    <div id="container">	
    <div id="slides">
    <div class="prev"></div>
        <div class="slides_container">
        <a href=""  target="_blank"><img src="img/hot_ad01.jpg"></a>
        <a href=""  target="_blank"><img src="img/hot_ad02.jpg"></a>
        <a href=""  target="_blank"><img src="img/hot_ad01.jpg"></a>
        <a href=""  target="_blank"><img src="img/hot_ad02.jpg"></a>
        </div>
        <div class="next"></div>
      </div>
     </div>

    转载于:https://www.cnblogs.com/Jlasp/archive/2013/05/11/3072437.html

    展开全文
  • photor.js 下载地址:https://github.com/ybx13579/jq-img-photor.js 纯图片轮播功能,不包含文字和标题,支持键盘操作。(没有定时播放功能) 支持移动设备带缩略图的jQuery幻灯片插件 效果图预览:
  • jq 幻灯片插件制作

    2013-08-14 15:15:00
    幻灯片插件制作 *{margin: 0;padding: 0;} .wrap{ width:800px; margin:0 auto;} .slider{width: 400px;height: 300px; position: relative;margin: 10px auto;overflow: hidden;border:2px #c0c9cf solid;} ....
  • // 幻灯片插件 // by ldp ; (function () { // 方法集合对象 var slider = { // 初始化函数 init: function (options) { return this.each(function () { va...
  • 5张图,5个div那么假设我把他们在一个div里 然后设置div div为绝对定位,第一张肯定是显示在前面的,接下来,我把第一张z-index为10,另外的订成8 然后求下面的思路,越详细越好,
  • JQ 手机幻灯片

    2019-08-12 01:03:37
    NULL 博文链接:https://onestopweb.iteye.com/blog/2245770
  • 脚本简介jq穿梭滑动幻灯片是一款带有左右箭头按钮的倒影滑动幻灯片。 脚本简介jq穿梭滑动幻灯片演示图:
  • jq穿梭滑动幻灯片.zip

    2019-07-04 23:48:20
    脚本简介jq穿梭滑动幻灯片是一款带有左右箭头按钮的倒影滑动幻灯片。   脚本简介jq穿梭滑动幻灯片演示图:
  • 主要介绍了JQ实现新浪游戏首页幻灯片,需要的朋友可以参考下
  • JQ滑动幻灯片

    千次阅读 2012-04-05 14:04:34
    网上找了好久的JQ滑动幻灯片的代码 都是高手写的 给了很多的参数 改起来用很简单 大家可以去看看  这个是我没事 自己写的 主要是练习几个函数的用法 HTML部分:
  • 一个基于JQ幻灯片很实用,使用很方便,兼容性强
  • jQ+HTML5视差滑动幻灯片是一款基于jquery+HTML5实现的视差图片滑动切换幻灯片
  • jQuery立体旋转幻灯片是一款超棒的旋转式幻灯jQuery插件。 jQuery立体旋转幻灯片演示图:
  • Q上下按钮幻灯片是一款基于jquery+css3实现的带上下按钮全屏滑动幻灯片
  • jQ立体旋转幻灯片.zip

    2019-07-04 23:48:37
    jQuery立体旋转幻灯片是一款超棒的旋转式幻灯jQuery插件。  jQuery立体旋转幻灯片演示图:
  • jQ上下按钮幻灯片.zip

    2019-07-04 23:40:07
    Q上下按钮幻灯片是一款基于jquery css3实现的带上下按钮全屏滑动幻灯片
  • JQ仿视频播放器图片浏览幻灯片代码是一款jQuery实现的类似播放器播放的图片切换代码,包括重播,暂停,调速度,跳到多少页。
  • 脚本简介jQ+HTML5视差滑动幻灯片是一款基于jquery+HTML5实现的视差图片滑动切换幻灯片
  • 脚本简介jQ HTML5视差滑动幻灯片是一款基于jquery HTML5实现的视差图片滑动切换幻灯片
  • 标题悬浮的jq淡入淡出图片幻灯片,jquery图片展示,小圆点图片切换,图片轮播图,可手动点击也可自动播放图片,图片转场过渡效果基于淡入淡出的渐变方式,大致风格想必大家很熟悉了,比较经典的外观,运行效果如下图...
  • jq各种插件层出不穷,当然幻灯片插件也不例外,于是本人也自已写了一款,对于目前所做项目来说,足够用了,slideV1.0插件使用很简单,配置如下: 1、三种按钮类型接口选择(默认类型、数字类型、缩略图类型) 2、...
  • 一款大气的jQ网站幻灯片切换效果焦点图代码,有需要了解习的朋友可进入参考。 这款jQuery网站幻灯片切换效果焦点图非常大气,要是网站首页应用此款效果,必定是蓬荜生辉啊! 导入jquery代码 代码如下 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,079
精华内容 431
关键字:

jq幻灯片