说明：引入jquery.min.js

　　   将轮播图放入imgs文件夹

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#banner { position: relative; width: 478px; height: 286px; border: 1px solid #666; overflow: hidden; }

#banner_list img { border: 0px; }

#banner_bg { position: absolute; bottom: 0; background-color: #000; height: 30px; filter: Alpha(Opacity=30); opacity: 0.3; z-index: 1000; cursor: pointer; width: 478px; }

#banner_info { position: absolute; bottom: 0; left: 5px; height: 22px; color: #fff; z-index: 1001; cursor: pointer }

#banner_text { position: absolute; width: 120px; z-index: 1002; right: 3px; bottom: 3px; }

#banner ul { position: absolute; list-style-type: none; filter: Alpha(Opacity=80); opacity: 0.8; z-index: 1002; margin: 0; padding: 0; bottom: 3px; right: 5px; }

#banner ul li { padding: 0px 8px; float: left; display: block; color: #FFF; background: #6f4f67; cursor: pointer; border: 1px solid #333; }

#banner ul li.on { background-color: #000; }

#banner_list a { position: absolute; }

<!--

让四张图片都可以重叠在一起-->

</style>

<script src="../js/jquery-1.11.0.js"></script>

<script type="text/javascript">

var t = n =0, count;

$(document).ready(function(){

count=$("#banner_list a").length;

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

$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));

$("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});

$("#banner li").click(function() {

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

n = i;

if (i >= count) return;

$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));

$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})

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

document.getElementById("banner").style.background="";

$(this).toggleClass("on");

$(this).siblings().removeAttr("class");

});

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

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

})

function showAuto()

{

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

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

}

</script>

</head>

<body>

<div id="banner">

<div id="banner_bg"></div>

<!--标题背景-->

<div id="banner_info"></div>

<!--标题-->

<ul>

<li class="on">1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

<div id="banner_list">

<a href="#" target="_blank"><img src="imgs/p1.jpg" title="jquery插件库1" alt="jquery插件库1"/></a>

<a href="#" target="_blank"><img src="imgs/p2.jpg" title="jquery插件库2" alt="jquery插件库2"/></a>

<a href="#" target="_blank"><img src="imgs/p3.jpg" title="jquery插件库3" alt="jquery插件库3"/></a>

<a href="#" target="_blank"><img src="imgs/p1.jpg" title="jquery插件库4" alt="jquery插件库4"/></a>

</div>

</div>

</body>

</html>

jQuery轮播图--不使用插件的更多相关文章

  1. jquery轮播图片（无插件简单版）

    轮播图(第三版)[2016-2-26] 工作中用的,改写了半透明蒙版,可以兼容ie7 <script type="text/javascript" src="htt ...

  2. photoSlider-html5原生js移动开发轮播图-相册滑动插件

    简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...

  3. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  4. jQuery轮播图（手动点击轮播）

    下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边 ...

  5. jQuery轮播图（二）利用构造函数和原型创建对象以实现继承

    本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...

  6. jQuery轮播图（一）轮播实现并封装

    利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...

  7. jquery 轮播图实例

    实现效果:1.图片每2秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击右下角的小球时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化. 4.当图片发生轮播切换时 ...

  8. 《第31天：JQuery - 轮播图》

    源码下载地址:链接:https://pan.baidu.com/s/16K9I... 提取码:0ua2 写这篇文章,当做是对自已这一天的一个总结.写轮播图要准备的东西:三张尺寸大小一样的图片.分为三个 ...

  9. jquery 轮播图

    slider.js (function(){ /** parent //父容器 changeTime //每次间隔几秒切换下一条 leaveTime //鼠标从小图上离开过后几秒继续切换 index ...

随机推荐

  1. Kong（V1.0.2）loadbalancing

    介绍 Kong为多个后端服务提供了多种负载平衡请求的方法:一种简单的基于DNS-based的方法,以及一种更动态的环形负载均衡器ring-balancer,它还允许在不需要DNS服务器的情况下使用se ...

  2. Excel 2016 密码保护破解

    Excel 2016的密码保护可以区分为几个: 文件密码保护(Excel中叫做工作簿保护) 文件打开权限密码 文件修改权限密码 工作表保护 关于各个保护密码的设置方式请查阅其他资料,我的情况是之前自己 ...

  3. [org.springframework.context.annotation.ComponentScanBeanDefinitionParser] are only available on JDK 1.5 and higher 问题--MyEclipse设置JDK版本

    org.springframework.beans.factory.BeanDefinitionStoreException: Unexpected exception parsing XML doc ...

  4. scikit-learn框架学习笔记（一）

    sklearn于2006年问世于Google,是使用python语言编写的.基于numpy.scipy和matplotlib的一个机器学习算法库,设计的非常优雅,它让我们能够使用同样的接口来实现所有不 ...

  5. HDU1671 Phone List

    Phone List Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Probl ...

  6. Python科学计算和可视化

    一.Numpy NumPy(Numeric Python)系统是 Python 的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比 Python 自身的嵌套列表(nested list s ...

  7. SAP Solution Manager 能够连接到 SAP Service Marketplace

    使用 在该步骤中,您要确保 SAP Solution Manager 能够连接到 SAP Service Marketplace. 作业 SAP Support Portal(SAPOSS)的 RFC ...

  8. 搭建Django链接MySQL流程（python2版）

    之前生成选型python3,除了用的python3的pymysql模块之外其他的都是一样的. 1.首先搭建mysql(Mariadb)数据库(单点)         安装方式分为yum安装,rpm包安 ...

  9. python--对象实例化过程

    实例化过程: class luffy_stu: def __init__(self,name,age,sex): self.name = name self.age = age self.sex = ...

  10. 操作 实例 / dom

    响应式:数据改变时会触发其他联动.例如:模板中的数据绑定:计算属性的重新计算: ---------------------------------------------------- vm.$par ...