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

　　

//代码如下

<!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. Linux kali安装或更新之后出现乱码

    打开终端,输入以下命令,之后重启. apt-get install ttf-wqy-zenhei

  2. 解决RStudio（非conda安装）在使用Anaconda中的R环境时，缺失“ libbz2-1.dll ”而不能正常启动问题

    1.问题描述 当非conda安装的RStudio,在调用Anaconda中的R环境时,报如下错误: 2.解决办法 下载同版本的R,对Anaconda中R相应的文件进行替换(图标中标注的部分) R3.5 ...

  3. Python 之并发编程之manager与进程池pool

    一.manager 常用的数据类型:dict list 能够实现进程之间的数据共享 进程之间如果同时修改一个数据,会导致数据冲突,因为并发的特征,导致数据更新不同步. def work(dic, lo ...

  4. 了解 C++

    C++的历史 C++由C语言发展演变而来,最初被称为"带类的C" 1983年正式取名为C++ 1998年11月被国籍标准化组织(ISO)批准为国际标准 2003年10月15日发布了 ...

  5. JS经典理解例子

    1. var name = 'the window'; var obj = { name:"my obj", getNameFunc:function(){ return func ...

  6. java 8时间使用LocalDateTime,ZonedDateTime,LocalDate

    前言 java 8的时间已经能够满足日常的使用,也方便理解.joda-time作为一个有优秀的时间组件也不得不告知使用者在java 8以后使用自带的时间 LocalDateTime以及ZonedDat ...

  7. ApacheDbUtilsUpdate

    ApacheDbUtilsUpdate package p1; import com.DataSourceUtil; import org.apache.commons.dbutils.QueryRu ...

  8. [原]OpeanLayers3 For ArcGIS MapServer

    由于OpenLayers3比较新,百度能找到的demo很少,自己不得不参考官方给出的Examples来依葫芦画瓢了,地图服务采用的局方给的ArcGIS MapServer,先上图: 这个例子是按照官方 ...

  9. [GWCTF 2019]mypassword

    这道题(不只这道题以后也一定)要注意控制台中的信息,给出了login.js代码,会把当前用户的用户名和密码填入表单 注册个账号,登录之后给提示不是注入题 浏览一下网站功能,feedback页面可以提交 ...

  10. Maven项目-Tomcat - 方法无法为jsp编译类ClassFormatException的解决

    解决方法: