用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输出列表实现代码
Sep 12 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
react antd实现动态增减表单
Jun 03 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
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
PHP实现简单的计算器
2020/08/28 PHP
jQuery数组处理方法汇总
2011/06/20 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
详解vue-router基本使用
2017/04/18 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
详解Python3中的Sequence type的使用
2015/08/01 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
2014年应届大学生自我评价
2014/01/09 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
个人典型事迹材料
2014/12/30 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang