用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跳到页面指定位置的方法
May 12 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
javascript的push使用指南
Dec 05 Javascript
Javascript闭包实例详解
Nov 29 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
vue 动态表单开发方法案例详解
Dec 02 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
JpGraph php柱状图使用介绍
2011/08/23 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
大专生的学习自我评价
2013/12/04 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
初中作文评语大全
2014/04/23 职场文书
小学生读书活动总结
2014/06/30 职场文书
2014年财务科工作总结
2014/11/11 职场文书
写给老师的感谢信
2015/01/20 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
深入理解python协程
2021/06/15 Python