cycle是一个很棒的jquery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能
下载cycle插件并引入,此时,注意把引入它的代码放在引入jquery主文件之后。
. 代码如下:
<head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" >
</head>
. 代码如下:
<ul id="goods">
<li>
<img src="img/lenovopad.jpg" alt="lenove pad" />
<p class="title">联想a3000(8gb/白色)</p>
<p class="author">娱乐平板电脑,手机平板电脑 </p>
</li>
<li>
<img src="img/note3.jpg" alt="note3" />
<p class="title">三星galaxy note iii</p>
<p class="author">三星note系列的第三代产品,配备5.7英寸全高清炫丽屏(super amoled),
分辨率为1080p(1920*1080像素)</p>
</li>
<li>
<img src="img/ipadair.png" alt="ipadair" />
<p class="title">ipad air</p>
<p class="author">ipad air拥有令人惊叹的ipad air纤薄轻巧。通过一系列改进,我们将ipad air
的体积比上一代ipad减小了近四分之一.尽管如此,当拿起它时,你仍会发觉它依然坚固耐用。</p>
</li>
</ul>
. 代码如下:
html, body {
margin: 0;
padding: 0;
}
body {
font: 62.5% verdana, helvetica, arial, sans-serif;
color: #000;
background: #fff;
}
ul#goods {
list-style: none;
margin: 0;
padding: 0;
height: 210px;
width: 500px;
overflow: hidden;
}
ul#goods li {
list-style: none;
margin: 0;
padding: 0;
height: 210px;
width: 500px;
background-color: #f79321;
position: relative;
}
ul#goods li img {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 210px;
}
ul#goods li .title {
margin-left: 300px;
padding: 10px;
width: 180px;
font-weight: bold;
font-size: 1.2em;
background-color: #000;
color: #fff;
overflow: hidden;
}
ul#goods li .author {
margin-left: 300px;
padding: 10px 10px 0 10px;
width: 180px;
font-weight: bold;
background-color: #f79321;
color: #fff;
}
. 代码如下:
$(document).ready(function() {
$('#goods').cycle();
});
. 代码如下:
$(document).ready(function() {
$('#goods').cycle({
timeout: 2000,
speed: 200,
pause: true
});
});
. 代码如下:
$('#goods').cycle({
fx:'fade',
timeout: 2000,
speed: 200,
pause: true
});
如对本文有疑问, 点击进行留言回复!!
vue源码实战render.js与$nextTick的异步调用
同事牛逼啊,写了个隐藏 bug,我排查了 3 天才解决问题!
【JavaScript笔记(一)】万丈高楼平地起 - 基本概念篇
网友评论