用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 相关文章推荐
jquery ajax执行后台方法
Mar 18 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
深入探寻javascript定时器
Jan 02 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
javascript倒计时效果实现
Nov 12 Javascript
Three.js基础部分学习
Jan 08 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
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
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Python多项式回归的实现方法
2019/03/11 Python
python画微信表情符的实例代码
2019/10/09 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
python3 简单实现组合设计模式
2020/07/02 Python
简述python Scrapy框架
2020/08/17 Python
Django Form常用功能及代码示例
2020/10/13 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
银行委托书范本
2014/04/04 职场文书
小学生环保标语
2014/06/13 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
初中团委工作总结
2015/08/13 职场文书
2016十一国庆节感言
2015/12/09 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android