简单的图片切换

 

今天写了一个jquery图片切换效果。

实现效果的方法比较简单，写这个效果主要是用于巩固自己的jquery基础。

该图片效果包含定时切换图片，下方菜单栏点击切换图片，鼠标放在显示框上时，停止自动切换图片。下面我来分享一下写这个效果的技巧。

 

 

思路：

1. 将图片插入在class为items 的div中，并将div的position设为absolute，添加到显示框中。
2. 点击下方菜单栏，通过index()方法获得菜单索引n，将图片框中的显示的图片隐藏， 而图片框中索引n的图片显示。
3. 设定定时器setInterval,定时用trigger()方法模拟菜单点击事件。

Css代码：

 

/*清除浮动*/
.clearfix:after{
display: block;
visibility: hidden;
height: 0;
content: " ";
font-size: 0px;
clear: both;
}
.clearfix{
zoom:1;
}

/*将所有图片用绝对定位放在同一位置*/
items{
width: 400px;
height: 300px;
position: absolute;
left: 0px;
top: 0px;
display: none;
}

 

Jquery代码：

//hover暂停定制
$items.hover(
function() {
if(t) clearInterval(t);
},
function() {
//主意：记得在重新设置定时器前，先去除原有的定时器
if(t) clearInterval(t);
//不要写成setInterval(“init()”,”2000”),这种写法效率很低。
t = setInterval(init,2000);
}
});

 

代码下载地址：https://github.com/yeahzan/image-switcher.git 

文章地址：http://www.yeahzan.com/blog/item/change.html