用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 相关文章推荐
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
js 通用订单代码
Dec 23 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
JSONP跨域请求
Mar 02 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
我所理解的JavaScript中的this指向
Sep 04 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根据年月获取季度的方法
2014/03/31 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
Symfony查询方法实例小结
2017/06/28 PHP
javascript数组的使用
2013/03/28 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
python冒泡排序算法的实现代码
2013/11/21 Python
python使用mysql的两种使用方式
2018/03/07 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
python制作填词游戏步骤详解
2019/05/05 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
美国零售商店:Blue&Cream
2017/04/07 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
中学生获奖感言
2014/02/04 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
Python安装使用Scrapy框架
2022/04/12 Python