用html+css+js实现的一个简单的图片切换特效


Posted in Javascript onMay 28, 2014

如图所示。

用html+css+js实现的一个简单的图片切换特效
该图片切换特效实现很简单,而且兼容性很好。

html页面如下

<div class="wrapper"> 
<div id="focus"> 
<ul> 
<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" alt="QQ商城焦点图效果下载" /></a></li> 
<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/02.jpg" alt="QQ商城焦点图效果教程" /></a></li> 
<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/03.jpg" alt="jquery商城焦点图效果" /></a></li> 
<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/04.jpg" alt="jquery商城焦点图代码" /></a></li> 
<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/05.jpg" alt="jquery商城焦点图源码" /></a></li> 
</ul> 
</div> </div><!-- wrapper end --> 
</body>

css样式
<style type="text/css"> 
* {margin:0; padding:0;} 
body {font-size:12px; color:#222; font-family:Verdana,Arial,Helvetica,sans-serif; background:#f0f0f0;} 
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} 
.clearfix {zoom:1;} 
ul,li {list-style:none;} 
img {border:0;} .wrapper {width:800px; margin:0 auto; padding-bottom:50px;} 
/* qqshop focus */ 
#focus {width:800px; height:280px; overflow:hidden; position:relative;} 
#focus ul {height:380px; position:absolute;} 
#focus ul li {float:left; width:800px; height:280px; overflow:hidden; position:relative; background:#000;} 
#focus ul li div {position:absolute; overflow:hidden;} 
#focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000;} 
#focus .btn {position:absolute; width:780px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:right;} 
#focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;} 
#focus .btn span.on {background:#fff;} 
#focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url(img/sprite.png) no-repeat 0 0; cursor:pointer;} 
#focus .pre {left:0;} 
#focus .next {right:0; background-position:right top;} 
</style>

js脚本
$(function() { 
var sWidth = $("#focus").width(); //获取焦点图的宽度(显示面积) 
var len = $("#focus ul li").length; //获取焦点图个数 
var index = 0; 
var picTimer; //以下代码添加数字按钮和按钮后的半透明条,还有上一页、下一页两个按钮 
var btn = "<div class='btnBg'></div><div class='btn'>"; 
for(var i=0; i < len; i++) { 
btn += "<span></span>"; 
} 
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>"; 
$("#focus").append(btn); 
$("#focus .btnBg").css("opacity",0.5); 
//为小按钮添加鼠标滑入事件,以显示相应的内容 
$("#focus .btn span").css("opacity",0.4).mouseenter(function() { 
index = $("#focus .btn span").index(this); 
showPics(index); 
}).eq(0).trigger("mouseenter"); 
//上一页、下一页按钮透明度处理 
$("#focus .preNext").css("opacity",0.2).hover(function() { 
$(this).stop(true,false).animate({"opacity":"0.5"},300); 
},function() { 
$(this).stop(true,false).animate({"opacity":"0.2"},300); 
}); 
//上一页按钮 
$("#focus .pre").click(function() { 
index -= 1; 
if(index == -1) {index = len - 1;} 
showPics(index); 
}); 
//下一页按钮 
$("#focus .next").click(function() { 
index += 1; 
if(index == len) {index = 0;} 
showPics(index); 
}); 
//本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度 
$("#focus ul").css("width",sWidth * (len)); 
//鼠标滑上焦点图时停止自动播放,滑出时开始自动播放 
$("#focus").hover(function() { 
clearInterval(picTimer); 
},function() { 
picTimer = setInterval(function() { 
showPics(index); 
index++; 
if(index == len) {index = 0;} 
},4000); //此4000代表自动播放的间隔,单位:毫秒 
}).trigger("mouseleave"); 
//显示图片函数,根据接收的index值显示相应的内容 
function showPics(index) { //普通切换 
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值 
$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position 
//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果 
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果 
} 
});

用到的左右切换图片

用html+css+js实现的一个简单的图片切换特效

Javascript 相关文章推荐
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
vue $mount 和 el的区别说明
Sep 11 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 Javascript
HTML页面登录时的JS验证方法
May 28 #Javascript
22点关于jquery性能优化的建议
May 28 #Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 #Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 #Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 #Javascript
node.js Web应用框架Express入门指南
May 28 #Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 #Javascript
You might like
基于mysql的bbs设计(四)
2006/10/09 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
php实现webservice实例
2014/11/06 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
Zabbix实现微信报警功能
2016/10/09 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
谈谈Python中的while循环语句
2019/03/10 Python
Python多项式回归的实现方法
2019/03/11 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
python 模拟登陆163邮箱
2020/12/15 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
公证委托书格式
2014/09/13 职场文书
公务员检讨书
2014/11/01 职场文书
优秀党支部申报材料
2014/12/24 职场文书
优秀高中学生评语
2014/12/30 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
预备党员入党感想
2015/08/10 职场文书
《花钟》教学反思
2016/02/17 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
浅谈Python 中的复数问题
2021/05/19 Python
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技