文档章节

焦点图(轮播)

0000001
 0000001
发布于 2014/06/17 15:45
字数 180
阅读 269
收藏 4

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<div>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

<div>

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

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

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

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

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

</div>

</div>

<script language="javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.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
粉丝 35
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
27、有赞Vant组件库的引入及轮播图片预览的实现②

前言:上一章主要是安装并引入了vant组件库;这章我们完成商品详情页轮播图片的预览功能。其实图片预览功能自己写也很简单,我可能比较懒。。。 Github:https://github.com/Ewall1106/mall...

Ewall_
09/10
0
0
30款jQuery常用网页焦点图banner图片切换 下载

1、jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2、jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3、jQuery图片层叠旋转类似洗牌翻转图片幻灯片 查看演示 ...

awbeci
2013/09/18
0
0
13、优化轮播图组件与vue深度处理器

前言:上篇讲了vue里面轮播图组件的使用,还有有个小问题可以优化一下。 github:https://github.com/Ewall1106/mall 1、焦点问题 我们看到这里的焦点会有一个默认的颜色,改变这个焦点颜色也...

Ewall_
06/22
0
0
pixviewer.swf相关

做网站也蛮久了,有时候经常会遇到一些需要轮播的图片,现在网上比较流行的,使用比较方便的就是pixviewer.swf这段flash了,今天因为有人要在我们网站的焦点图片上投放广告,而这个焦点图就是...

simpower
2015/04/07
0
0
请高手帮忙分析、抓取一个轮播焦点图效果

里面有一个轮播焦点图效果,我把页面代码里涉及到的文件都下载到本地,但还是无法实现网上的效果 朋友们帮帮忙啊 http://www.mix-box.com.cn/join/helper.shtml...

gzdd
2014/07/11
45
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7安装rsync及两台机器进行文件同步

centos7安装rsync及两台机器进行文件同步 2017年12月21日 11:17:46 码农下的天桥 阅读数:2210 标签: centosrsync同步 更多 个人分类: 后端 所属专栏: 研发模式及运维 版权声明:本文为博...

linjin200
30分钟前
2
0
jpg、jpeg、png... 的区别

jpg、jpeg、png... 的区别 对于做设计这一行的人来说,这几个图片格式是最常用的,也是最常见的,几乎每一天都要与他们打交道。 刚刚入门的新人通常不知道在什么地方如何使用他们或者说如何更...

DemonsI
49分钟前
5
0
白话SpringCloud | 第十章:路由网关(Zuul)进阶:过滤器、异常处理

前言 简单介绍了关于Zuul的一些简单使用以及一些路由规则的简单说明。而对于一个统一网关而言,需要处理各种各类的请求,对不同的url进行拦截,或者对调用服务的异常进行二次处理等等。今天,...

oKong
54分钟前
3
0
Character的static方法

基本类型char的包装类是Character,使用的比较多,大家是比较熟悉的。 我只是觉得里面有很多static方法,平时不怎么用,学习一下怎么实现的,或许日后就用到了。 static int compare(char x,...

woshixin
今天
2
0
正则介绍_sed

10月17日任务 9.4/9.5 sed sed工具 匹配打印 -n 只打印匹配行,不然其他行也会打印出来 p 打印(配合-n使用) [root@centos7 tmp]# sed -n '/root/'p passwd root:x:0:0:root:/root:/bin/ba...

robertt15
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部