精华内容
下载资源
问答
  • transition实现焦点图切换仅包括焦点图自动切换,不包括点击切换(前一张,后一张,点击焦点切换)HTMLsrc填写第一张图片地址 </div>CSS#bannerImg { display: block; width: 730px; he

    transition实现焦点图切换

    仅包括焦点图自动切换,不包括点击切换(前一张,后一张,点击焦点切换)


    HTML

    src填写第一张图片地址

    <div class="wrap" >
        <img src="img/1.jpg" alt="" id='bannerImg'>
    </div>

    CSS

    #bannerImg {
        display: block;
        width: 730px;
        height: 336px;
    }

    JS

    srcArray存放轮播图片src

    window.onload = function() {
        const img = document.getElementById("bannerImg")
        const srcArray = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
        const len = srcArray.length - 1
        let index = 0
        setInterval(function() {
            img.style.transition='opacity 1s ease-in 0s'
            img.style.opacity=0.2
            setTimeout(function(){
                img.src = srcArray[index]
                img.style.transition='opacity 1s ease-out'
                img.style.opacity=1
            },1000)
            setTimeout(function(){
                img.style.transition='none'
            },2000)
            if(++index > len) {
                index = 0
            }
        },4000)
    }

    目录

    展开全文
  • jQuery全屏banner焦点图切换

    千次阅读 2017-07-03 11:09:41
    Query全屏banner焦点图切换

    效果:
    这里写图片描述
    如图所示:
    1.点击圆点切换图片
    2.点击箭头切换图片
    3.x秒后自动往后跳一张图(图中未演示)

    代码

    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    <title>jQuery全屏banner焦点图切换代码</title>
    
    <script type="text/javascript" src="js/jQuery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
    <style>
    /* css 重置 */
    body,div,ul,li,dl,dt,dd,h2,p{padding:0;margin:0;font-family:"微软雅黑";}
    ul{list-style:none ;}
    img{border:none;}
    a{blr:expression(this.onFocus=this.blur());outline:none;}
    
    /* banner-box */
    .banner-box{min-width:1210px;height:360px;position:relative;overflow:hidden;}
    .banner-box .bd{ width:100% !important;}
    .banner-box .bd li .m-width {width:1210px;margin:0 auto;overflow:hidden;}
    .banner-box .bd li{width:100% !important;height:360px;}
    .banner-box .bd li a{display:block;background-size:auto;}
    
    .banner-btn{width:1210px;position:absolute;top:120px;left:50%;margin-left:-605px;}
    .banner-btn a{display:block;width:49px;height:104px;position:absolute;top:0;filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;opacity:0.4;}
    .banner-btn a.prev{left:20px;background:url(img/foot.png) no-repeat 0 0;} 
    .banner-btn a.next{right:20px;background:url(img/foot.png) no-repeat -49px 0;}
    
    .banner-box .hd {position:absolute;top:210px;left:537px;}
    .banner-box .hd ul li{width:12px;height:12px;border-radius :50%;text-indent:-9999px;margin-right:20px;background:#ccc;float:left;cursor:pointer;}
    .banner-box .hd ul li.on{background:#DA324D;}
    </style>
    
    </head>
    <body>
    
    <div class="banner-box">
        <div class="bd">
            <ul>                
                <li style="background:#F3E5D8;">
                    <div class="m-width">
                    <a href="javascript:void(0);"><img src="img/img1.jpg" /></a>
                    </div>
                </li>
                <li style="background:#B01415">
                    <div class="m-width">
                    <a href="javascript:void(0);"><img src="img/img2.jpg" /></a>
                    </div>
                </li>
                <li style="background:#C49803;">
                    <div class="m-width">
                    <a href="javascript:void(0);"><img src="img/img3.jpg" /></a>
                    </div>
                </li>
                <li style="background:#FDFDF5">
                    <div class="m-width">
                    <a href="javascript:void(0);"><img src="img/img4.jpg" /></a>
                    </div>
                </li>  
    
            </ul>
        </div>
        <div class="banner-btn">
            <a class="prev" href="javascript:void(0);"></a>
            <a class="next" href="javascript:void(0);"></a>
            <div class="hd">
            <ul></ul>
            </div>
        </div>
    </div>
    
    <script type="text/javascript">
    $(document).ready(function(){
    
        $(".prev,.next").hover(function(){
            $(this).stop(true,false).fadeTo("show",0.9);
        },function(){
            $(this).stop(true,false).fadeTo("show",0.4);
        });
    
        $(".banner-box").slide({
            titCell:".hd ul",
            mainCell:".bd ul",
            effect:"fold",
            interTime:3500,//跳转间隔时间
            delayTime:500,
            autoPlay:true,
            autoPage:true, 
            trigger:"click" 
        });
    
    });
    </script>
    </body>
    </html>
    

    GitHub源码

    展开全文
  • CSS实现焦点图切换

    千次阅读 2013-08-21 22:52:44
    *{margin:0;padding:0;list-style-type:none;}  a,img{border:0;}  body{font-family:Arial,Tahoma,宋体;font-size:12px;}  a{color:#000;text-decoration:none;blr:expression(this.onFocus=this.blur())


    <style type="text/css">
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}
        body{font-family:Arial,Tahoma,宋体;font-size:12px;}
        a{color:#000;text-decoration:none;blr:expression(this.onFocus=this.blur());outline:none;}
        a:hover{color:#c00;text-decoration:underline;}
        .layout{width:985px;height:430px;margin:50px auto;}
        div.cols{float:left;margin-right:5px;display:inline;height:300px;overflow:hidden;}
        div.cols .pic{float:left;position:relative;}
        div.cols .pic .black{cursor:pointer;width:100%;position:absolute;left:0;top:0;background-color:#000;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);}
        div.colsfelt{width:320px;}
        div.colsmiddle{width:140px;}
        div.colsright{width:515px;margin:0;}
        div.colsmiddle .pic{margin-bottom:5px;}
        div.colsright .pic{margin:0 5px 5px 0;}
        div.colsfelt .pic .black{height:430px;}
        div.colsmiddle .pic .black{height:120px;}
        div.colsright .h185 .black{height:160px;}
        div.colsright .h240 .black{height:240px;}
        div.cols .pic a:hover .black{opacity:0;-moz-opacity:0;filter:alpha(opacity=0);}
    </style>

    HTML:

    <div class="layout">
        <div class="colsfelt cols">
            <div class="pic"><a href="http://hongshengpeng.com/article/show/155.aspx">
            <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://hongshengpeng.com/UpLoadFiles/20130821/2013082116360660.jpg" width="394" height="430" />
            <div class="black"></div></a></div>
        </div>
        <div class="colsmiddle cols">
            <div class="pic"><a href="http://www.hongshengpeng.com/article/show/150.aspx">
            <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://www.hongshengpeng.com/UpLoadFiles/20130818/2013081809285523.JPG" width="150" height="100" />
            <div class="black"></div></a></div>
            <div class="pic"><a href="http://www.hongshengpeng.com/article/show/150.aspx">
            <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://www.hongshengpeng.com/UpLoadFiles/20130818/2013081809285523.JPG" width="150" height="100" />
            <div class="black"></div></a></div>
            <div class="pic"><a href="http://www.hongshengpeng.com/article/show/150.aspx">
            <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://www.hongshengpeng.com/UpLoadFiles/20130818/2013081809285523.JPG" width="150" height="100" />
            <div class="black"></div></a></div>
        </div>
        <div class="colsright cols">
            <div class="pic h185"><a href="http://www.hongshengpeng.com/article/show/150.aspx">
            <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://www.hongshengpeng.com/UpLoadFiles/20130818/2013081809285523.JPG" width="320" height="160" />
            <div class="black"></div></a></div>
            <div class="pic h185"><a href="http://www.hongshengpeng.com/article/show/150.aspx">
            <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://www.hongshengpeng.com/jquery/images/06.jpg" width="185" height="160" />
            <div class="black"></div></a></div>
            <div class="pic h240"><a href="http://www.hongshengpeng.com/article/show/150.aspx">
            <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://www.hongshengpeng.com/UpLoadFiles/20130818/2013081809285523.JPG" width="265" height="240" />
            <div class="black"></div></a></div>
            <div class="pic h240"><a href="http://www.hongshengpeng.com/article/show/150.aspx">
            <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://www.hongshengpeng.com/UpLoadFiles/20130818/2013081809285523.JPG" width="240" height="240" />
            <div class="black"></div></a></div>
        </div>
    </div>

    点击查看演示

    展开全文
  • 3.引入jquery文件,编写切换函数 <pre name="code" class="javascript"><script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ var i...

    1.html页面准备图片,显示其中一张,其他图片利用绝对定位重叠

    <pre name="code" class="html"><body>
    	<div id="focus">
    		<ul >  
    			<li style="display:block"><a href="" ><img src="./img/4.jpg"></a></li>  
    			<li><a href=""><img src="./img/1.jpg"></a></li>  
    			<li><a href=""><img src="./img/2.jpg"></a></li>  
    			<li><a href=""><img src="./img/3.jpg"></a></li>  
    		</ul> 
        </div> 	
    </body>


    
    

    2.css样式

    <style type="text/css">
        body,*,ul,li{margin: 0;padding:0;list-style: none}
    	#focus{
    		width: 1000px;
    		height: 400px;
    		margin: 100px auto;
    		position: relative;
    	}
    	#focus ul li {
    		position: absolute;
    		top: 0;
    		left:0;
    		display: none;
    	}
    	#focus ul li img{
    		width: 1000px;
    		height:400px;
    	}
    </style>



    3.引入jquery文件,编写切换函数

    <pre name="code" class="javascript"><script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>  
    <script type="text/javascript"> 
    $(function(){ 
    	var i=0;  
    	setInterval(move, 2000);  
    	function move(){  
    		if(i>3){  
    		  i=0;  
    		}else{  
    	           $('#focus ul li').eq(i).fadeIn(2000).siblings('li').fadeOut(2000); 
    	           i++;  
            }  
        }
    });
    </script> 


    
    

    展开全文
  • 原创:js焦点图切换 (仿造flash)

    千次阅读 2005-12-15 17:26:00
     //每张图切换时间 (单位毫秒); var imgUrl=new Array(); var imgLink=new Array(); var imgtext=new Array(); var imgAlt=new Array(); var adNum=0; //焦点字框高度样式表 开始 document.write('...
  • jQuery实现焦点图自动切换

    千次阅读 2015-10-10 16:10:57
    jQuery实现焦点图自动切换 1. 页面布局结构图: 其中按钮切换区的按钮预定义了与图片基色调相同的颜色: 2. 获取按钮切换区的li标签,并定义鼠标划过事件:(index为全局变量) 将鼠标划过的...
  • jquery多图tab标签切换焦点图,由huiyi8素材网提供。flash特效 jquery多图tab标签切换焦点图下载地址:http://www.huiyi8.com/sc/7171.html(转载请注明此处)
  • 闲来无事又整理了一些图片特效的实例,各种图片播放器 焦点图 旋转幻灯片 四屏切换 相册代码,大概40多个   下载地址:http://download.csdn.net/detail/spritenet/5270609       友情再次提示:请...
  • jQuery全屏焦点图特效制作带标题的焦点图切换代码 jQuery背景和banner图片一起切换全屏焦点图切换代码 jQuery仿音悦台网站全屏带标题的焦点图轮播代码 jQuery响应式焦点图插件制作响应式全屏焦点图...
  • 素材类别:jquery 左右切换 tab代码 tab标签切换代码 ...jquery左右切换(支持文字)焦点图,由huiyi8素材网提供。 jquery左右切换(支持文字)焦点图下载地址:http://www.huiyi8.com/sc/7167.html(转载请注明此处)
  • 支付宝首页焦点图

    千次阅读 2012-12-17 15:11:35
    第一次开始写博客,前几天学了一点jquery写了一个焦点图,一直以来,所有学的东西... 看了一下支付宝的焦点图切换的效果,其实原理就是有两个动作而已,一个是自动播放的效果,另一个就是鼠标点击小点的动作;首先是点
  • 原文地址:http://www.jsfoot.com/jquery/images/qh/2012-10-30/787.html   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ... ...jquery高仿2012淘宝商城多格子焦点图滚动切换 *{m
  • javascript焦点图(可以自动切换

    千次阅读 2014-05-08 14:31:22
    先编写好实现图片切换的函数,这里主要是包含for历遍所以图片并设置display为none和传递index(这里把index赋值给inew); ---->b.编写鼠标经过时候获取index,这里必须通过历遍和赋值把鼠标经过的index赋值个inew,...
  • 实现jQuery手机触屏左右滑动用到一个滑动插件TouchSlide,大家可以百度下。...首先来看看左右滑动切换焦点图: JQuery代码 $(function(){ TouchSlide({ slideCell:"#slideBox", titCell:".myhd ul", /
  • jquery焦点图,带左右切换

    千次阅读 2013-03-18 09:32:32
    //鼠标滑上焦点图时停止自动播放,滑出时开始自动播放 $("#focus").hover(function() { clearInterval(picTimer); },function() { picTimer = setInterval(function() { showPics(index); index++; if(index == len)...
  • 1、jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动   查看演示   2、jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 ...4、jQuery iNav插件图片分类导航选项卡切换图片滚动列表
  • 2、Flash焦点图切换代码 本地下载 效果展示 3、JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 本地下载 效果展示 4、4屏Flash+Xml轮换代码 本地下载 效果展示 5、4屏产品图片...
  • 之前实现了箭头切换,现在来添加按钮切换。在点击按钮时,直接切换到对应的图片。下面来为小圆点按钮添加点击事件://为小圆点添加点击事件 for(var i =0; i <buttons.length; i++){ buttons[i].onclick = ...
  • 1、jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动   查看演示   2、jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 ...4、jQuery iNav插件图片分类导航选项卡切换图片滚动列表
  • 焦点轮播(2) js箭头切换

    千次阅读 2017-10-07 11:06:28
    先用JS实现前后箭头切换图片的功能。首先在页面加载完成时通过id号来获取元素。window.onload = function (){ var container = document.getElementById('container'); var list = document.getE
  • Qt控件焦点切换

    千次阅读 2017-05-25 17:29:29
    1 qq切换焦点 Qt中QWidget提供了一个静态方式实现该效果 其中也包含介绍使用[static] void QWidget::setTabOrder(QWidget *first, QWidget *second) Puts the second widget after the first widget
  • 纯CSS3实现绚丽焦点图切换效果,这是一款纯CSS3实现的焦点图插件,焦点图设计十分清新简单,图片滑动特别流畅,是一款值得一用的CSS3焦点图。切换点通过表单radio来实现,通过radio的checked判断图片的切换位置。 ...
  • 一个自动获取图片焦点,并定时切换的代码: 此图镇楼: 1.html代码:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" ...
  • 精美的HTML5焦点图特效

    千次阅读 2018-02-28 09:34:57
    1、jQuery/CSS3 3D焦点图动画之前我们已经向大家分享过很多基于jQuery和CSS3的3D焦点图动画插件,今天要分享的这款jQuery 3D焦点图动画也非常不错,有好几种炫酷的3D图片切换动画,可以为你的焦点图...
  • qt按键焦点切换

    千次阅读 2015-06-03 13:00:26
    对于4个控件,当按下左右按键时焦点可以左右切换,如下:   关键代码 1.实现焦点切换功能 使用事件过滤器来对事件进行分类处理这样就可以在a1至a4等控件上实现,按下右键后即把焦点转到右边控件上的功能。 先在aa...
  • 演示地址:http://www.corange.cn/demo/3855/index.html截图如下主要代码jquery焦点图,带左右切换 原文地址:http://www.corange.cn/archives/2012/09/3855.html
  • showArea:"", // 大显示区域id,如果没有就不显示 showWidth:700, // 大宽度 showHeight:525, // 大高度 showTitle: false, // 是否在大下方显示标题 width:300, // 每行的宽度 ...
  • 原生js实现焦点轮播动态切换

    千次阅读 2016-06-03 11:07:47
    欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新...UML序列和流程 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,918
精华内容 19,167
关键字:

焦点图切换