文档章节

slider--banner

0000001
 0000001
发布于 2014/07/02 10:48
字数 282
阅读 80
收藏 0

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>banner-slider自动轮播淡入淡出</title>

<style type="text/css">

.slider{ position:relative; float:left; width:992px; height:306px; margin-bottom:20px; border:4px solid #699ee0; overflow:hidden; z-index:1; }

.slider img{ width:998px; height:306px; }

.slider ul{ position:absolute; bottom:15px; right:50px; z-index:2;}

.slider li{ float:left; display:inline; width:13px; height:13px; margin-left:15px; cursor:pointer; background:url(../images/slider_btn.png) no-repeat 0 0; overflow:hidden; }

.slider .cur{ background:url(../images/slider_btn.png) no-repeat 0 -13px; background:#000; }

#slider-list a{position:absolute;} /*让四张图片都可以重叠在一起-,这里很重要,否则IE下没效果*/

</style>

</head>

<body>

<div class="slider">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<div id="slider-list">

<a href="x"><img src="x" alt="">img</a>

<a href="x"><img src="x" alt="">img</a>

<a href="x"><img src="x" alt="">img</a>

</div>

</div>

<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

//banner 轮播

var t = n = 0, count;

$(function(){

   count=$("#slider-list a").length;

   $("#slider-list a:not(:first-child)").hide();

   $(".slider li").click(function() {

       var i = $(this).text() - 1;//获取Li元素内的值,即1,2,3,4

       n = i;

       if (i >= count) return;

       $("#slider-list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);

       $(this).siblings().removeClass("cur").end().addClass("cur");

   });

   t = setInterval("showAuto()", 3000);

   $(".slider").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});

});

function showAuto()

{

   n = n >=(count - 1) ? 0 : ++n;

   $(".slider li").eq(n).trigger('click');

};

</script>

</body>

</html>


© 著作权归作者所有

0000001
粉丝 34
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
私信 提问
22个免费和高级WordPress的滑块插件

vSlider – WordPress Image Slider Plugin Easing Slider Nivo Slider Slidepost WordPress Slider Plugin, WordPress Slideshow Plugin WP – SlideDeck Premium WordPress Sliders WordPr......

红薯
2011/12/14
4.9K
4
当中img src="images/slider-img1.gif" alt=""更换了一样的图片 在IE就不显示背景图片

下了一个网站 当中img src="images/slider-img1.gif" alt=""更换了一样的图片 在IE就不显示背景图片 用原来的slider-img1.gif就可以显示 用同样的图片同样的名就IE不行 need fresh ideas?<><......

allenhu888
2014/04/03
1K
2
MEDICAL MULTISTORE OPENCART 自适应主题模板 ABC-0150

MEDICAL MULTISTORE OPENCART 自适应主题模板 ABC-0150 -Fully Responsive Theme -Two responsive Slider included Nivo Slider and Camera Slider .You can select your preferred slider f......

OpenCart中国
2015/03/31
60
0
ATTRACTIVE & ELEGANT NEW ELECTRONIC STORE OPENCART

ATTRACTIVE & ELEGANT NEW ELECTRONIC STORE OPENCART 自适应主题模板 ABC-0170 Key Features ============== cross-browser compatibility and SEO-friendly. Menu Active link is impleme......

OpenCart中国
2015/09/17
19
0
Medical Multistore OpenCart 自适应主题模板 ABC-0150

Medical Multistore OpenCart 自适应主题模板 ABC-0150 Medical Multistore OpenCart 自适应主题模板 ABC-0150 1 评价 如果您对本商品有什么问题或经验,请在此留下您的意见和建议! ¥189.0...

OpenCart中国
2015/08/20
34
0

没有更多内容

加载失败,请刷新页面

加载更多

Shell学习记录(持续更新)

一、shell定时备份数据库任务通用脚本 目标:根据定时任务启动脚本,执行数据库备份任务,按照日期进行每日备份,如已经备份则脚本停止,备份任务完成后将结果发送邮件提醒 1.执行数据库备份...

网络小虾米
今天
3
0
PHP计算两个经纬度地点之间的距离

/** * 求两个已知经纬度之间的距离,单位为米 * * @param lng1 $ ,lng2 经度 * @param lat1 $ ,lat2 纬度 * @return float 距离,单位米 * @author www.Alixixi.com */function get...

子枫Eric
今天
14
0
Linux—day 4

ch2 需要掌握的命令 (1)cat -n 1.txt (2)more 1.txt (3)head -n 15 initial-setup-ks.cfg (4)tail -n 17 initial-setup-ks.cfg;tail -f initial-setup-ks.cfg (5)cat -n anaconda-ks.c......

呵呵暖茶
今天
31
0
【Kubernetes社区之路】我的PR被抢了

2019年11月的某天,我无意间发现一个PR作者在自己的PR中抱怨自己的PR没被合入,而另一个比自己提交晚且内容几乎一样的PR则被合入了。 字里行间透露些许伤感外加无奈,原文如下: 作为一名开源...

恋恋美食
今天
40
0
阻塞队列

对于许多线程问题, 可以通过使用一个或多个队列以优雅且安全的方式将其形式化。生产者线程向队列插人元素, 消费者线程则取出它们。 使用队列, 可以安全地从一个线程向另 一个线程传递数据...

ytuan996
今天
48
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部