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


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 相关文章推荐
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
node.js express框架简介与实现
Jul 23 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 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
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
python把一个字符串切开的实例方法
2020/09/27 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
群众路线教育党课主持词
2014/04/01 职场文书
预备党员公开承诺书
2014/05/28 职场文书
2015年人事科工作总结
2015/04/28 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python