<!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. Python中pip的使用
			
    1.pip安装模块 pip install 模块名称 -i 安装源 pip install requests -i https://mirrors.aliyun.com/pypi/simple/
    
			
    2. 
						
  2. 项目转移时发生的错误<springboot+mybatis(xml逆向工程自动生成)>
			
    org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'app ...
    
			
    3. 
						
  3. JS高级---递归案例
			
    递归案例     递归案例: 求一个数字各个位数上的数字的和:  123   --->6 ---1+2+3 //递归案例:求一个数字各个位数上的数字的和: 123 --->6 ---1+2 ...
    
			
    4. 
						
  4. JDBC——抽取工具类
			
    目的:简化书写 分析: 1.注册驱动 2.获取连接对象 3.释放资源 1.注册驱动 2.获取连接对象 需求:不想传递参数,还能保证工具类的通用性解决方案:配置文件 jdbc.properties ur ...
    
			
    5. 
						
  5. 【Unity|C#】基础篇(4)——函数参数类型（值参/ref/out/params）
			
    [学习资料] <C#图解教程>(第5章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu.c ...
    
			
    6. 
						
  6. 3ds Max File Format (Part 6: We get signal)
			
    Let's see what we can do now. INode *node = scene.container()->scene()->rootNode()->find(uc ...
    
			
    7. 
						
  7. 简写函数字面量（function literal）
			
    如果函数的参数在函数体内只出现一次,则可以使用下划线代替: val f1 = (_: Int) + (_: Int) //等价于 val f2 = (x: Int, y: Int) => x + ...
    
			
    8. 
						
  8. Vue.js ---Hello---1
			
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
    
			
    9. 
						
  9. NG-ALAIN 边学边记2
			
    1. 下载Git上的源码  : https://github.com/ng-alain/ng-alain.git 2.解压文件: 3.进入到目录下: 4.打开CMD 切换到 E:\NgAlain\ng ...
    
			
    10. 
						
  10. 2019牛客多校第五场 G subsequence 1  dp+组合数学
			
    subsequence 1 题意 给出两个数字串s,t,求s的子序列中在数值上大于t串的数量 分析 数字大于另一个数字,要么位数多,要么位数相同,字典序大,位数多可以很方便地用组合数学来解决,所以只剩 ...
    
			
    11.