今天写了一个jquery图片切换效果。
实现效果的方法比较简单,写这个效果主要是用于巩固自己的jquery基础。
该图片效果包含定时切换图片,下方菜单栏点击切换图片,鼠标放在显示框上时,停止自动切换图片。下面我来分享一下写这个效果的技巧。
思路:
- 将图片插入在class为items 的div中,并将div的position设为absolute,添加到显示框中。
- 点击下方菜单栏,通过index()方法获得菜单索引n,将图片框中的显示的图片隐藏, 而图片框中索引n的图片显示。
- 设定定时器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
相关推荐
图片切换-简单图片切换-带页码 图片切换-简单图片切换-带页码
Flash简单图片切换,下侧小方格即为图片切换按钮,通过点击小方格可控制切换大图片,淡入淡出渐变方式的图片展示,新手学写的Flash幻灯片切换,十分简洁美观,附含Flash源文件。
Jquery写的简易图片切换效果
JavaScript实现简单图片切换 本文实例为大家分享了JavaScript实现简单图片切换的具体代码,供大家参考,具体内容如下 下边给出几种方法进行图片切换: 方法一 (小白专用款!简单易懂) 下边附上代码: <!...
jquery简单图片切换 用了jquery库,总体思想就是挪动位置来实现的
Vue实现简单图片切换效果 本文实例为大家分享了Vue实现简单图片切换的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
简单图片切换 非flash简单图片切换
简单、可修改的图片切换 简单、可修改的图片切换
简单图片切换代码! 很值得下载看看!资源免费,大家分享!!
简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换
采用jquery+js实现图片自动切换功能,简单,实用.
FLASH图片切换、新闻图片切换,简单易用。
jquery鼠标滑动按钮图片切换是一款网站常用的简单图片切换特效,带索引按钮,鼠标滑过自动切换。
jscode特效简单的图片切换
8中简单的图片切换效果,网页效果简单一用
主要介绍了jquery简单图片切换显示效果实现方法,可以实现简单的图片切换功能,具有一定参考借鉴价值,需要的朋友可以参考下
图片切换简单
NULL 博文链接:https://julyzergcn.iteye.com/blog/1452188
简单的Jquery实现图片切换,
NULL 博文链接:https://julyzergcn.iteye.com/blog/1452163