精华内容
下载资源
问答
  • 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源码

    展开全文
  • jQuery网站焦点图切换

    2018-08-15 10:35:37
    HTML: &lt;div class="hot"&gt; &lt;div class="hot-pics"&gt; &lt;ul&gt; &lt;li&gt;&lt;img src="./images/hot_1.jpg"/&gt;&lt...

    HTML:

    <div class="hot">
        <div class="hot-pics">
            <ul>
                <li><img src="./images/hot_1.jpg"/></li>
                <li><img src="./images/hot_2.jpg"/></li>
                <li><img src="./images/hot_3.jpg"/></li>
                <li><img src="./images/hot_4.jpg"/></li>
                <li><img src="./images/hot_5.jpg"/></li>
            </ul>
        </div>
        <div class="hot-bar">
            <ul>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

     

    JavaScript:

    <script>
        //焦点图切换功能
        $(function () {
            var height = 382;                       //每张图片的高度
            var speed = 700;                        //动画时间
            var delay = 1500;                       //自动切换的间隔时间
            var now = 0;                            //当前显示的图片的索引
            var max = 4;                            //图片的最大索引
    
            //实现图片无缝切换
            var $picsUI = $(".hot-pics ul");//获取对象
            //复制列表中的第一个图片,追加到列表的最后
            $picsUI.find("li:first").clone().appendTo($picsUI);
            var $barLi = $(".hot-bar li"); //获取对象
            //设置周期计时器,实现图片的自动切换
            var timer = setInterval(changeAuto, delay);
            //鼠标滑过时暂停移动,移除时恢复移动
            $(".hot").on({
                mouseenter: function () {
                    clearInterval(timer);
                },
                mouseleave: function () {
                    clearInterval(timer);
                    timer = setInterval(changeAuto, delay);
                }
            });
    
            //单击小圆点切换图片
            $barLi.click(function () {
                now = $(this).index();
                changeNext();
                changeBar();
            });
    
            //图片自动切换
            function changeAuto() {
                if (!$picsUI.is(":animated")) {
                    if (now < max) {
                        now += 1;
                        changeNext();
                    } else {
                        now = 0;
                        changeFirst();
                    }
                    changeBar();
                }
            }
    
            //切换到下一张图片
            function changeNext() {
                $picsUI.animate({top: -height * now}, speed);
            }
    
            //切换到第一张图片
            function changeFirst() {
                $picsUI.animate({top: -height * (max + 1)}, speed, function () {
                    $(this).css("top", 0);
                });
            }
    
            //点亮当前小圆点
            function changeBar() {
                $barLi.eq(now).addClass("current").siblings().removeClass("current");
            }
        });
    </script>

     

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

    千次阅读 2013-08-21 22:52:44
    HTML:    <div class="pic"><a href="http://hongshengpeng.com/article/show/155.aspx">    <div class="black"></div></a></div>      <div class="pic"><a href=...


    <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>

    点击查看演示

    展开全文
  • 1.html页面准备图片
  • jquery多图tab标签切换焦点图,由huiyi8素材网提供。flash特效 jquery多图tab标签切换焦点图下载地址:http://www.huiyi8.com/sc/7171.html(转载请注明此处)
  • 精美的HTML5焦点图特效

    千次阅读 2018-02-28 09:34:57
    1、jQuery/CSS3 3D焦点图动画之前我们已经向大家分享过很多基于jQuery和CSS3的3D焦点图动画插件,今天要分享的这款jQuery 3D焦点图动画也非常不错,有好几种炫酷的3D图片切换动画,可以为你的焦点图...
  • 在网站开发过程中,特别是前端开发这块,经常会使用到很多图片滑块动画,也就是一些基于jQuery和HTML5的焦点图插件。本文将为大家收集10个超赞的jQuery图片滑块动画,这些现成的jQuery插件将为你节省很多开发时间,...
  • 怎么做HTML焦点图+实例练习

    千次阅读 2018-05-19 17:45:45
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="...焦点图&lt;/title&gt; &lt;style&gt; /* 清空默认边距 */ *{
  • 素材类别:jquery 左右切换 tab代码 tab标签切换代码 tab标签矢量素材  jquery左右切换(支持文字)焦点图,由...jquery左右切换(支持文字)焦点图下载地址:http://www.huiyi8.com/sc/7167.html(转载请注明此处)
  • 站长特效 三屏带箭头和缩略图js焦点图定时切换特效 站长特效网 站长特效网,以质量为核心,以实用为目的,打造一流网页特效站!zzjs.net,站长js特效。      一号标题:站长特效网,以质量为核心,以...
  • 原创: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('...
  • HTML特效动画、焦点图

    2018-03-20 11:34:34
    另外,动画使用了一张立体感很强的天空背景,让蝴蝶飞舞时更加显得立体逼真。在线演示 源码下载4、HTML5 Canvas波浪动画还记得之前我们分享的超酷的HTML5 Canvas波浪墙吗,是的,只要你的浏览器...
  • 原文地址: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
  • <HTML> <HEAD> <TITLE>JS图片滤镜 焦点图片自动切换显示效果丨芯晴网页特效丨CsrCode.Cn</TITLE><br /><style><br /> .30pt{color:#ce288c;font-size:30pt} </style> <SCRIPT language=...
  • jquery焦点图,带左右切换

    千次阅读 2013-03-18 09:32:32
    演示地址:http://www.corange.cn/demo/3854/index.html截图如下主要代码/* focus btn is little button */body{ padding:0; margin:0;}img{ border:none}#focus{width:980px;height:400px;overflow:hidden;position:...
  • 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", /
  • 定时器制作图片自动切换 ul{ margin:0; padding:0;} li{ list-style:none;} img{ border:none; vertical-align:top;} body{ background:#ccc;} #pic{ width:300px; height:400px; margin:40px auto; background:#...
  • 一个自动获取图片焦点,并定时切换的代码: 此图镇楼: 1.html代码:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns=...
  • jQuery图标放大轮播焦点图 Flash图片焦点图滑动切换 ...Flash右侧焦点图上下滑动切换 ...左右按钮滑动切换的网页幻灯片 ...双图同时滑动切换焦点图 ...html5网页图片左右滑动焦点图 转载于:h...
  • HTML5+CSS3实现的立方体翻转3D全屏焦点图特效源码

    千次下载 热门讨论 2014-09-25 14:22:58
    这是一款非常大气华丽的HTML5/CSS3 3D实现的全屏3D焦点图特效插件,在页面的两侧,有两个带有立体浮动效果的左右箭头进行图片的切换。其焦点图的图片切换方式是3D效果的,类似立方体翻转一样,焦点图默认显示文字,...
  • //http://www.unitymanual.com/topic/index.html // Example with autoplay /* $(window).load(function() { $("#photo_container").isc({ imgArray: carousel_images, autoplay: true, autoplayTimer: 5000 ...
  • HTML+CSS 焦点图设计(详细步骤)

    千次阅读 2019-02-28 15:27:07
    1. 界面分析 2. 界面分析完后,不管三七二十一,先整一个大盒子,再在大盒子里面塞图片,塞小盒子 3. 代码: &lt;...DOCTYPE html&...html lang="...156-定位练习2-焦点图&lt;/tit
  • 一.登入页面 <...DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登入</title> <script> function checkFrom() { var n...
  • 小海今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动。功能上,这款HTML5图片播放器支持鼠标滑动、手机端触摸滑动以及自动播放。外观上,这款HTML5图片切换动画的两侧有淡化处理,因此...
  • jQuery全屏焦点图特效制作带标题的焦点图切换代码 jQuery背景和banner图片一起切换全屏焦点图切换代码 jQuery仿音悦台网站全屏带标题的焦点图轮播代码 jQuery响应式焦点图插件制作响应式全屏焦点图...
  • 演示地址:http://www.corange.cn/demo/3855/index.html截图如下主要代码jquery焦点图,带左右切换 原文地址:http://www.corange.cn/archives/2012/09/3855.html
  • demo04.html 手动滚动图片 ul,li{margin:0;padding:0} img{border:0px;} #container{padding:40px;} #showArea img{width:700px;} a{text-decoration:none;border:0px;} #scrollDiv{border:#ccc 1px solid...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,488
精华内容 10,995
关键字:

html焦点图切换