说明：引入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. Nginx的编译安装及选项

    编译安装Nginx1.安装常见的工具和库(GCC.PCRE.zlib.OpenSSL) Nginx是一个由C语言编写的,所以需要一个编译工具如GNU的GCC[root@www ~]# yum inst ...

  2. Python3学习的准备工作

    简单好用的桌面开发平台:ubuntu 16.x/18.x 或 LinuxMint 18.x 开发工具:新版操作系统都自带有Python3.5及更高版本 其实作为初学者,不要迷信版本,也不必着急升级成最 ...

  3. 公司-半导体：Micron

    ylbtech-公司-半导体:Micron 美光科技有限公司(Micron Technology, Inc.)是高级半导体解决方案的全球领先供应商之一.通过全球化的运营,美光公司制造并向市场推出DRA ...

  4. 2018-2019-2 20175311 实验二 《Java开发环境的熟悉》实验报告

    2018-2019-2 20175303 实验二 <Java开发环境的熟悉>实验报告 一.实验准备 1.了解掌握实验所要用到的三种代码 伪代码 产品代码 测试代码 2.IDEA中配置单元测 ...

  5. package.json文件解析

    1.用途:管理你所安装的npm包的依赖,在开发过程中能清楚的查询安装的包的版本以及项目中使用的包依赖,便于开发组成员共享. 2.创建:可以手动创建也可以通过npm init 自动创建. 3.配置项: ...

  6. python slenium 中CSS定位

    以百度为例 一.通过id.class定位 1.#id:python:driver.find_element_by_css_selector('input#kw') 2..class:python:dr ...

  7. 逆向工程vgenerator(三)

    前言 该项目的最后一篇博文,最终构建,写入文件,整体项目流程将在本片文章中写出. jdbcType /** *@author vvxtoys *mysql单位 -> jdbcType */ pa ...

  8. RobotFramework + Appium 移动自动化实现

    本次我们移动自动化实现路线大致是这样的:  Python语言基础  —> Robot Framework测试框架  —> Android SDK和Genymotion模拟器  —>  ...

  9. Android 开发 Activity里获取View的宽度和高度 转载

    原文地址:https://blog.csdn.net/chenbaige/article/details/77991594 前言: 可能很多情况下,我们都会有在activity中获取view 的尺寸大 ...

  10. Spring Boot——Linux 启动方式

    1.前台启动:(ctrl+c会关闭程序) java -jar    ****.jar 2.后台启动:(& 后台启动) java -jar    ****.jar & 3.控制台输出启动 ...