商城常用滚动的焦点图效果代码简单实用


Posted in Javascript onMarch 28, 2013

这种商城的效果网上很多,但大多是插件,要么JS写的太过于复杂,对于学习的童鞋来说看起来比较费劲,这个看起来比较简单,也比较容易理解,各位童鞋需要的请围观,也欢迎各位评价,贴代码(为方便使用,代码复制即可用,无需另外添加东西):

<!doctype html> 
<html lang="en"> 
<head> 
<title>商城常用滚动的效果,简单实用</title> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript"> 
$(function(){ 
var len = $(".num > li").length; 
var index = 0; 
var adTimer; 
$(".num li").mouseover(function(){ 
index = $(".num li").index(this); 
showImg(index); 
}).eq(0).mouseover(); 
//滑入 停止动画,滑出开始动画. 
$('.ad').hover(function(){ 
clearInterval(adTimer); 
},function(){ 
adTimer = setInterval(function(){ 
showImg(index) 
index++; 
if(index==len){index=0;} 
} , 3000); 
}).trigger("mouseleave"); 
}) 
// 通过控制top ,来显示不同的幻灯片 
function showImg(index){ 
var adHeight = $(".content .ad").height(); 
$(".slider").stop(true,false).animate({top : -adHeight*index},1000); 
$(".num li").removeClass("on") 
.eq(index).addClass("on"); 
} 
</script> 
<style type="text/css"> 
ul,li{ margin:0;padding:0;} 
.ad { margin-bottom:10px;width:586px; height:150px; overflow:hidden;position:relative;} 
.content .slider,.content .num{position:absolute;} 
.content .slider li{list-style:none;display:inline;} 
.content .slider img{ width:586px; height:150px;display:block;} 
.content .num{ right:5px; bottom:5px;} 
.content .num li{float: left;color: #FF7300;text-align: center; line-height: 16px;width: 16px;height: 16px;font-family: Arial; font-size: 12px;cursor: pointer;overflow: hidden;margin: 3px 1px;border: 1px solid #FF7300;background-color: #fff; 
} 
.content .num li.on{color: #fff;line-height: 21px;width: 21px;height: 21px; font-size: 16px;margin: 0 1px;border: 0;background-color: #FF7300;font-weight: bold;} 
</style> 
</head> 
<body> 
<div class="content"> 
<div class="ad" > 
<ul class="slider" > 
<li><img src="http://pic.875.cn/upload/2013-03-26/1504517406.jpg" width="586" height="150"/></li> 
<li><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" width="586" height="150"/></li> 
<li><img src="http://pic.875.cn/upload/2013-03-07/1506174974.jpg" width="586" height="150"/></li> 
<li><img src="http://pic.875.cn/upload/2013-03-26/1504517406.jpg" width="586" height="150"/></li> 
<li><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" width="586" height="150"/></li> 
</ul> 
<ul class="num" > 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
</ul> 
</div> 
</div> 
</body> 
</html>

效果图如下:
商城常用滚动的焦点图效果代码简单实用
Javascript 相关文章推荐
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 #Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 #Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 #Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 #Javascript
自定义jQuery选项卡插件实例
Mar 27 #Javascript
js数组的操作详解
Mar 27 #Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 #Javascript
You might like
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
微信支付开发维权通知实例
2016/07/12 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
jquery 新浪网易的评论块制作
2010/07/01 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
pytorch进行上采样的种类实例
2020/02/18 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
中学生学雷锋演讲稿
2014/04/26 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
病媒生物防治方案
2014/05/13 职场文书
幼师小班个人总结
2015/02/12 职场文书
教师节领导致辞
2015/07/29 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers