<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    ul li{
        list-style:none;
    }
    .banner{
        width:100%;
        height:590px;
        position: relative;
    }
    .bimg{
        width:100%;
        height:590px;
        position: relative;
    }
    .bimg li{
        position: absolute;
        width: 100%;
        height: 590px;
        opacity: 0;
        transition: .3s;
        z-index: 0;
        background: red;
    }
    .bimg li.on{
        opacity: 1;
        z-index: 1;
    }

</style>
<body>
<div class="banner">
    <ul class="bimg">
        <li class="on" style="background:url('https://m.360buyimg.com/babel/jfs/t1/29896/20/13350/41922/5c9ed5d7E2e2b6412/8b81cde63fbac215.jpg')center center no-repeat">

        </li>
        <li style="background:url('https://m.360buyimg.com/babel/jfs/t1/23375/23/13064/94132/5c9dbd64E41cec9c9/a84a20b6fd02f06c.jpg')center center no-repeat">

        </li>
        <li style="background:url('https://m.360buyimg.com/babel/jfs/t1/20204/8/11496/97824/5c8f393cE5ebd698b/a6727f61aa8217b3.jpg')center center no-repeat">

        </li>
    </ul>
</div>
<div class="option">
    <a href="javascript:void(0);" onclick="left();">左</a>

    <ul class="hover-ul"><li>1</li><li>2</li><li>3</li></ul>
</div>
<script>
    $(function(){
        setInterval("auto_banner_do();",3000);

        //悬停 
        $(".hover-ul li").hover(function(){
            var len = $(".banner .bimg li").length;
            var index = $(".hover-ul li").index(this);
            index++;
            auto_banner(index);
        });
    });
    var banner_i = 2;
    function auto_banner_do(){
        auto_banner(banner_i);
        banner_i++;
    }

    function auto_banner(x){
        var len = $(".banner .bimg li").length;
        if( x>len ){
            x = 1;
        }
        $(".banner .bimg li").removeClass("on");
        $(".banner .bimg li").eq(x-1).addClass("on");
        banner_i=x;
    }

    //向左
    function left(){
        var len = $(".banner .bimg li").length;
        var index = $(".banner .bimg li").index($(".banner .bimg li.on"));
        auto_banner(index);
    }

</script>
</body>
</html>


 


												


											
js实现图片轮播图的更多相关文章
	

    
								
  1. 图片轮播图插件的使用 unslider！！！
		
    1.百度图片轮播图unslider,第一个就会出现jquery unslider轮播图,点击进去,下载网站提供的文件,解压,内部有我们需要使用的各种js,图片等. 2.在自己的eclipse或者int ...
    
		
    2. 
						
  2. jQuery与原生js实现banner轮播图
		
    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta  ...
    
		
    3. 
						
  3. 原生JS实现简易轮播图
		
    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
    
		
    4. 
						
  4. 原生js实现图片轮播思路分析
		
    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
    
		
    5. 
						
  5. js原生实现轮播图效果（面向对象编程）
		
    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
    
		
    6. 
						
  6. iOS 图片轮播图（自动滚动）
		
    iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...
    
		
    7. 
						
  7. JS+css3焦点轮播图PC端
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    8. 
						
  8. 原生 js 左右切换轮播图
		
    使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...
    
		
    9. 
						
  9. photoSlider-html5原生js移动开发轮播图-相册滑动插件
		
    简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. （C语言）学生成绩排序-期末考倒数第二题结构体数组排序
			
    假设学生的基本信息包括学号.姓名.三门课程成绩以及个人平均成绩,定义一个能够表示学生信息的结构类型.输入n(n<50)个学生的成绩信息,按照学生的个人平均分从高到低输出他们的信息.如果平均分相同 ...
    
			
    2. 
						
  2. Python之六：模块
			
    模块包含了大量的函数方法和变量,我们可以用下面的语句调用模块: import 模块名 这样我们就可以在后面的语句中使用模块中的函数或者变量了.调用时只需用    模块名.函数名的方式调用即可 from ...
    
			
    3. 
						
  3. golang channel 的一次内存错误
			
    起因 原因调查 原因分析 问题解决 总结 起因 今天在做数据库数据读取时, 首先通过多个 goroutine 将从数据库读取的数据写入 channel, 同时通过另一个 goroutine 从 cha ...
    
			
    4. 
						
  4. Dubbo的SPI机制与JDK机制的不同及原理分析
			
    从今天开始,将会逐步介绍关于DUbbo的有关知识.首先先简单介绍一下DUbbo的整体概述. 概述 Dubbo是SOA(面向服务架构)服务治理方案的核心框架.用于分布式调用,其重点在于分布式的治理. 简 ...
    
			
    5. 
						
  5. R 常用清洗函数汇总
			
    目录 1.which() 2.unique() 3.dplyr包 select() filter() arrange() group_by() mutate() transmutate() summa ...
    
			
    6. 
						
  6. cURL error 60: SSL certificate problem: unable to get local issuer certificate 解决方法
			
    微信开发的时,请求接口报错如下: cURL error 60: SSL certificate problem: unable to get local issuer certificate (see ...
    
			
    7. 
						
  7. 第一篇 网站基础知识 第7章 Tomcat分析
			
    7.1 Tomcat的顶层结构及启动过程 7.1.1 Tomcat的顶层结构 Tomcat中最顶层的容器叫Server,代表整个服务器,Server中包含至少一个Service,用于具体提供服务.Se ...
    
			
    8. 
						
  8. Angular项目目录
			
    0.模块介绍和基础知识 https://cloud.tencent.com/developer/section/1489514 1.如下图VSCode-- node_modules 第三方依赖包存放目 ...
    
			
    9. 
						
  9. Python之QRCode
			
    目录 一.基本介绍 介绍 QRCode二维码版本展示 QRCode方法 常用函数 二.安装QRCode 三.基本案例 生成普通二维码: 生成带有图片的二维码: 四.制作动态二维码 安装 myqr 和  ...
    
			
    10. 
						
  10. 使用PHP链接MySQL
			
    一.使用PHP查询MySQL数据库: 1.通过PHP来访问MySQL的步骤是: 连接到MySQL 选择操作的数据库 创建查询的字段 执行查询的语句 检索出结果并在网页上显示 断开与MySQL的连接 我 ...
    
			
    11.