说明：引入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. 如何找出单链表中的倒数第k个元素

    方法一:快慢指针法 在查找过程中,设置两个指针,初始时指向首元结点(第一个元素结点). 然后,让其中一个指针先前移k步. 然后两个指针再同时往前移动.当先行的指针值为NULL时,另一个指针所指的位置就 ...

  2. Druid密码加密

    pom里引用: <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring ...

  3. navicat for mysql 注册码，简简单单，一个搞定(蔡军帅亲测有效)

    打开navicat for mysql接着打开帮助,选中注册, 把下面的复制上去就可以了 NAVH-WK6A-DMVK-DKW3 转载自:https://blog.csdn.net/qq_403845 ...

  4. ionic2 vscode运行调试

    一.环境搭建 1,安装ripple模拟器 如果已经注册了淘宝国内镜像使用下面命令 cnpm install -g ripple-emulator 显示结果如下: 2,安装vs code 下载地址htt ...

  5. How To Upgrade ASMLib Kernel Driver as Part of Kernel Upgrade? (文档 ID 1391807.1)

    How To Upgrade ASMLib Kernel Driver as Part of Kernel Upgrade? (文档 ID 1391807.1)

  6. [EasyUI]确认删除

    //删除方法 function del() { var obj = getSelected(); if (obj) { $.messager.confirm('确认', '确定要删除:' + obj. ...

  7. eclipse连接mysql数据库

    我这里在eclipse新建一个maven 项目做测试 首先我们要在本地电脑安装了mysql数据库和mysql驱动包 我的mysql数据库是通过phpstudy自带的 这个是驱动包 window–> ...

  8. 关于微信内置浏览器在ios上播放提示音的经验分享

    document.addEventListener("WeixinJSBridgeReady", function () { window.audio= new Audio() w ...

  9. Tomcat版本对照表

    导入程序前环境要先配好,环境要想配的正确,版本信息一定要了解. Tomcat版本   6.0 7.0 8.0 8.5 9.0 JDK ≥5.0   ≥6.0       ≥7.0     ≥7.0   ...

  10. gp工具的许可

    还是要在代码里许可 static class Program { [STAThread] static void Main() { ESRI.ArcGIS.RuntimeManager.Bind(ES ...