纯CSS3打造焦点轮播图(无js)

今天给大家带来一个不借助js,只用纯css3实现的焦点轮播图教程,包括轮播间隔时间我们也可以自定义。这里我们用到的是css3的@keyframe规则和animation属性。注意,此规则与属性仅IE10以及Chrome、Safari、Opera、Firefox支持。具体用法可以参照这篇文章:http://www.w3cplus.com/content/css3-animation或者网络相关资料。

首先我们先构建主框架,很简单,就不详述了。

<div id = "container">  
  <ul id="slide">
    <li id="first"><a href=""><img src="1.jpg" alt="图片1"/></a></li>
    <li id="second"><a href=""><img src="2.jpg" alt="图片2"/></a></li>
    <li id="third"><a href=""><img src="3.jpg" alt="图片3"/></a></li>
    <li id="fourth"><a href=""><img src="4.jpg" alt="图片4"/></a></li>
  </ul>
</div>

继续阅读纯CSS3打造焦点轮播图(无js)

新手学做Javascript原生版焦点轮播图补充

在上一个轮播图教程里(新手学做Javascript原生版焦点轮播图)我们只是实现了最简单的图片轮播,而一个完整的焦点轮播图还应该包括说明文字、指示数字与图片的同步轮播。当然,我们就在上一篇创建的代码基础上添加修改。因为是新手教程,便于理解,我尽可能地简单化,在此不考虑性能问题。

实现效果:三张图片轮流播放,指示数字、说明文字与图片同步轮播,当鼠标处于轮播图上时使其停止轮播,离开图片区再度实现轮播。并且当鼠标位于数字上时立即切换到相对应的图片、文字。 继续阅读新手学做Javascript原生版焦点轮播图补充

新手学做Javascript原生版焦点轮播图

焦点图算是javascript的一个常用特效,很多人面试时都会被问到焦点图的实现方法,而对于入门新手来说,并不容易,起码我是这样的。今天就教新手们做一个最简单的焦点轮播图,也让自己巩固一下。

实现效果:三张图片轮流播放,当鼠标处于轮播图上时使其停止轮播,离开图片区再度实现轮播。

实现方法:html中只放置一个img标签,js里创建一个含有三张图片路径的数组,使用setInterval()方法按照指定周期调用数组里的图片路径替换到img标签的src属性里。当然还需要一个鼠标的onmouseover与onmouseout事件来切换是否轮播。
继续阅读新手学做Javascript原生版焦点轮播图