//需求:打开网页时,每秒钟自动切换下一张图片内容。也可以用鼠标点导航按钮进行图片切换

  


//代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="jquery.1.11.1.min.js"></script>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

.container{

width: 1000px;

height: 400px;

position: relative;

}

.wrapper{

height: 400px;

position: relative;

}

.wrapper li{

position: absolute;

width: 100%;

height: 100%;

display: none;

}

.wrapper .cur{

display: block;

}

.wrapper a{

display: block;

width: 100%;

height: 100%;

text-decoration: none;

}

img{

width: 100%;

height: 100%;

display: block;

}

.pagination{

position: absolute;

width: 200px;

height: 20px;

right: 100px;

bottom: 30px;

}

.pagination li{

float: left;

width: 10px;

height: 10px;

border-radius: 50%;

margin:0 5px;

background-color: #000;

border:2px solid #777;

}

.pagination .act{

background-color: #fff;

}

.prev,.next{

position: absolute;

width: 41px;

height: 67px;

background-image: url(img/icon-slides.png);

background-repeat: no-repeat;

top: 166px;

}

.prev{

background-position: -83px 0;

left: 0;

}

.prev:hover{

background-position: 0 0;

}

.next{

right: 0;

background-position: -124px 0;

}

.next:hover{

background-position: -42px 0;

}

</style>

</head>

<body>

<div class="container">

<ul class="wrapper">

<li class="cur"><a href="#"><img src="img/ban01.jpg" alt=""></a></li>

<li><a href="#"><img src="img/ban02.jpg" alt=""></a></li>

<li><a href="#"><img src="img/ban03.jpg" alt=""></a></li>

<li><a href="#"><img src="img/ban04.jpg" alt=""></a></li>

<li><a href="#"><img src="img/ban05.jpg" alt=""></a></li>

<li><a href="#"><img src="img/ban06.jpg" alt=""></a></li>

<li><a href="#"><img src="img/ban07.jpg" alt=""></a></li>

</ul>

<ul class="pagination">

<li class="act"></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

<a href="#" class="prev"></a>

<a href="#" class="next"></a>

</div>

<div style="margin-left: 30%;">网页轮播图效果1111111</div>

<script type="text/javascript">

// $(".wrapper li").eq(1).fadeIn(2000).siblings().fadeOut(2000);

// 当前li的索引

var index = 0;

function changeImg(num){

$(".wrapper li").eq(num).fadeIn().siblings().fadeOut();

$(".pagination li").eq(num).addClass("act").siblings().removeClass("act");

}

// changeImg(3);

function autoPlay(){

if (index==6) {

index=-1;

}

index++;

changeImg(index);

}

var timer = setInterval(autoPlay,2000);

$(".container").mouseover(function(){

clearInterval(timer);

}).mouseout(function(){

timer = setInterval(autoPlay,2000);

});

$(".prev").click(function(){

if (index==0) {

index=7;

}

index--;

changeImg(index);

});

$(".next").click(function(){

autoPlay();

});

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

var i = $(this).index();

index = i;

changeImg(index);

});

</script>

</body>

</html>

Jquery插件---渐隐轮播的更多相关文章

  1. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  2. jQuery.YesShow - 图片轮播插件(带图片放大功能)

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  3. jQuery补充,基于jQuery的bxslider轮播器插件

    基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> & ...

  4. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  5. jquery实现导航图轮播

    版权声明:作者原创,转载请注明出处! 下面的几个栗子是使用jquery实现Banner轮播的效果,直接将代码贴出来,从最初级没有任何优化和封装的写法,一直到最后一个栗子,一步步进行了优化,加大程序的可 ...

  6. 自适应图片宽度的jQuery焦点幻灯轮播代码

    自适应图片宽度的jQuery焦点幻灯轮播代码 注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放 演示   XML/HTML Code <div id="sli ...

  7. (转)jquery实现图片轮播

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

  8. Bootstrap的js插件之轮播(carousel)

    轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> < ...

  9. jQuery五屏轮播手风琴切换代码

    jQuery五屏轮播手风琴切换代码 在线演示本地下载

随机推荐

  1. nodejs下载

    nodejs历史版本 查看npm镜像库 npm config get registry 更改npm镜像库 npm config set registry https://registry.npm.ta ...

  2. Codeforces Round #600 (Div. 2) - B. Silly Mistake(模拟)

    题意:有一个公司,每天有员工进出,$a[i]>0$时表示$a[i]$这个员工进入公司,$a[i]<0$时表示$-a[i]$这个员工出公司,公司对进出办公室有一些严格的规定 员工每天最多只能 ...

  3. ES建立索引步骤, 1,index 2.mapping 3,别名

    1.建立索引PUT /index_trans_detail 2.建立mappingPOST /index_trans_detail/type_trans_detail/_mapping{ " ...

  4. 为小学生出四则运算题目.java

    import java.util.Scanner; import java.util.Random; public class test{ public static int s1 = new Ran ...

  5. SSD boot test script for(if)循环

    ;Author : Bing Song ;// ;Usage: modify log drictory according to actual drictory gettime timestr &qu ...

  6. 9 HTML DOM事件监听&版本兼容&元素(节点)增删改查

    事件监听: 语法:element.addEventListener(event, function, useCapture); event:事件的类型,触发什么事件,注意不需要on作为前缀,比如cli ...

  7. navicat12破解详细教程

    以管理员身份运行此注册机: 运行注册机 打开注册机后,1) Patch勾选Backup.Host和Navicat v12,然后点击Patch按钮: 默认勾选 找到Navicat Premium 12安 ...

  8. 吴裕雄--天生自然PythonDjangoWeb企业开发:解决Pythonno module named "XX"问题

    在项目中加入 sys.path.append('你的django项目路径') sys.path.append('python的site-packages路径')

  9. Zenefits CodeSprint:Knight or Knave

    题意是一堆人,从1到n编号,每个人i说一句话,x.x是正数表示i说x君是个好人,x是负数表示i说x君是坏人.问这个群体中最多能有多少好人,把这种情况用字典序的方式输出(好人用A表示,坏人用B表示),希 ...

  10. JS如何阻止事件冒泡

      <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx. ...