商城常用滚动的焦点图效果代码简单实用
更新时间：2013年03月28日 14:26:51 作者：
此效果在网上使用的频率比较多一点但大多是插件，要么JS写的太过于复杂童鞋们看起来有一定的难度，这个相对来说比较简单一点,感兴趣的可以参考下哈
这种商城的效果网上很多，但大多是插件，要么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>
效果图如下：
复制代码 代码如下:
<!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>
效果图如下：
相关文章
这篇文章主要介绍了jQuery旋转木马式幻灯片轮播特效，很全面的图片轮播，特别适合用与产片展示，感兴趣的小伙伴们可以参考一下2015-12-12
prepend（）方法可以将指定元素插入匹配元素内部开头，主要用到content和selector参数，这篇文章主要给大家介绍jQuery中prepend（）方法使用，需要的朋友可以参考下2015-08-08
本文主要讲诉了本人制作一个jquery焦点图切换的简易插件的过程，十分的详细，希望对大家能有所帮助2014-08-08
这篇文章主要介绍了JQUERY实现网页右下角固定位置展开关闭特效的方法,涉及jquery操作页面元素的显示与隐藏等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
为了简化JavaScript的开发，一些JavaScript程序库诞生了，下面是目前集中流行的JavaScript程序库的介绍和对比，感兴趣的朋友可以了解下2013-09-09
jQuery 技巧，以前发布了很多了，具体的可以参考脚本之家以前发布的文章。2010-04-04
JQuery 中没有文本框高亮显示这个插件，自己今天写了一个Plugin，把代码贴出来分享一下2011-04-04
这篇文章主要给大家介绍了关于jQuery列表动态增加和删除的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
Draggable是easyui中用于实现拖拽功能的一个插件。利用它，我们可以实现控件的拖拽效果。Draggble覆盖默认值$.fn.draggable.defaults。2015-08-08
这篇文章主要介绍了jQuery响应滚动条事件功能,可实现针对滚动条状态的实时计算与响应功能,具有一定参考借鉴价值,需要的朋友可以参考下2017-10-10
最新评论