商城常用滚动的效果,代码简单实用,学习的好例子
2013-03-28 10:51
429 查看
这种商城的效果网上很多,但大多是插件,要么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>
效果图如下:
相关文章推荐
- 商城常用滚动的焦点图效果代码简单实用
- 商城常用滚动的焦点图效果代码简单实用
- “返回顶部代码”滑动效果 jQuery超级简单实用写法
- JS简单实用的倒计时效果实现代码
- Silverlight实用窍门系列:20.后台CS代码中创建四种常用的动画效果【附带源码实例】
- 简单实用的新闻模块常用效果
- TensorFlow个人学习(下载安装&简单代码例子)
- Android代码混淆的一个常用的简单例子
- 学习Jammendo代码的心路历程(一)简单的淡出效果实现
- Jquery选择器的概念以及选择器的学习一(基本、层级、简单,另有简单动画效果代码)
- 爱分享 jquery 简单实用的无缝滚动效果
- jquery实现简单实用的弹出层效果代码
- 最近想学习下css3过渡效果,做了个简单例子,供大家参考
- 【Android学习日记】(五) 常用例子代码
- 一句jQuery代码实现返回顶部效果(简单实用)
- jquery中模拟tabs效果易会代码(简单实用)
- jquery 简单实用的无缝滚动效果
- JS实现的N多简单无缝滚动代码(包含图文效果)
- jquery实现简单实用的弹出层效果代码
- JS实现的N多简单无缝滚动代码(包含图文效果)