weixin_41790385 2018-03-07 03:29 采纳率: 0%
浏览 1419
已结题

求教flash制作的swf动画，图片加按钮渐变轮播

我需要做一个swf文档的图片轮播，放进公司网站首页的。请教如何制作图片轮播加按钮，点击按钮可渐变切换图片。做出来的效果需与以下链接一致：
http://www.weidmueller.com.cn/docs/cw_start_v2.aspx?id=63483&domid=1031&sp=V&m1=63476&m2=63483
本人没有动画制作基础，也不懂什么js和代码，所以请会做并愿意教的朋友写出详细制作过程（制作出来的文档必须为swf），万分感谢~

  • 写回答

5条回答 默认 最新

  • Somnambulist· 2018-03-07 04:04
    关注

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Document
    <br> *{<br> margin: 0;<br> padding: 0;<br> }<br> .carousel{<br> width: 560px;<br> height: 300px;<br> margin: 100px auto;<br> border: 1px solid #000;<br> position: relative;</p> <pre><code> } .carousel .m_unit{ width: 9000px; position: absolute; top: 0; left: 0; } .carousel .m_unit ul{ list-style: none; } .carousel .m_unit ul li{ float: left; width: 560px; height: 300px; } .btns a{ position: absolute; width: 40px; height: 40px; top: 50%; margin-top: -20px; background-color: yellow; z-index: 999; } .btns a.leftBtn{ left: 10px; } .btns a.rightBtn{ right: 10px; } .circles{ position: absolute; bottom: 10px; right: 10px; width: 150px; height: 18px; } .circles ol{ list-style: none; } .circles ol li{ float: left; width: 18px; height: 18px; margin-right: 10px; border-radius: 50%; background-color: pink; cursor: pointer; } .circles ol li.cur{ background-color: purple; } &lt;/style&gt; </code></pre> <p></head><br> <body><br> <div class="carousel"><br> <div class="btns"><br> <a href="javascript:;" class="leftBtn" ></a><br> <a href="javascript:;" class="rightBtn"></a><br> </div><br> <div class="m_unit"><br> <ul><br> <li><a href="#"><img src="images/0.jpg" alt="" /></a></li><br> <li><a href="#"><img src="images/1.jpg" alt="" /></a></li><br> <li><a href="#"><img src="images/2.jpg" alt="" /></a></li><br> <li><a href="#"><img src="images/3.jpg" alt="" /></a></li><br> <li><a href="#"><img src="images/4.jpg" alt="" /></a></li><br> </ul><br> </div><br> <div class="circles"><br> <ol><br> <li class="cur"></li><br> <li></li><br> <li></li><br> <li></li><br> <li></li><br> </ol><br> </div><br> </div></p> <pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.12.3.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; var $carousel = $(&quot;.carousel&quot;); var $m_unit = $(&quot;.m_unit&quot;); var $imageLis = $(&quot;.m_unit li&quot;); var $cilclesLis = $(&quot;.circles ol li&quot;); //克隆图片第1张 $(&quot;.m_unit ul&quot;).append($imageLis.eq(0).clone()); //信号量 var idx = 0; //定时器 var timer = setInterval(rightBtnHandler, 2000); //鼠标进入定时器停止 $carousel.mouseenter(function(){ clearInterval(timer); }); $carousel.mouseleave(function(){ timer = setInterval(rightBtnHandler, 2000); }); //监听 $(&quot;.rightBtn&quot;).click(rightBtnHandler); function rightBtnHandler(){ //函数截流 if($m_unit.is(&quot;:animated&quot;)) return; //具体业务 idx++; $m_unit.animate({&quot;left&quot; : -560 * idx},300,function(){ if(idx &gt; 4){ idx = 0; $m_unit.css(&quot;left&quot;,0); } }); changeCircle(); } //监听 $(&quot;.leftBtn&quot;).click(function(){ //函数截流 if($m_unit.is(&quot;:animated&quot;)) return; //具体业务 idx--; if(idx &lt; 0){ idx = 4; $m_unit.css(&quot;left&quot;,-5 * 560); } $m_unit.animate({&quot;left&quot; : -560 * idx},300); changeCircle(); }); //小圆点的监听 $cilclesLis.click(function(){ //你点击第几个小圆点，信号量就是多少 idx = $(this).index(); //拉动 $m_unit.animate({&quot;left&quot; : -560 * idx},300); //更改小圆点 changeCircle(); }); //更改小圆点 function changeCircle(){ var n = idx &lt;= 4 ? idx : 0; //让信号量那个小圆点有cur，其他小圆点没有cur $cilclesLis.eq(n).addClass(&quot;cur&quot;).siblings().removeClass(&quot;cur&quot;); } &lt;/script&gt; </code></pre> <p></body><br> </html></p> <p>希望有所帮助！！！</p>
    评论

报告相同问题？

悬赏问题

  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler
  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题：自动化测试