<!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. H5_0016：js获取网络中配置文件中的参数
			
         //获取网络配置文件中的参数      $.get("https://cdn.com/share.json", function(e) {       //console ...
    
			
    2. 
						
  2. vue实现网页简单计算器实例代码
			
    效果: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
    
			
    3. 
						
  3. Codeforce 141A - Amusing Joke （sort）
			
    So, the New Year holidays are over. Santa Claus and his colleagues can take a rest and have guests a ...
    
			
    4. 
						
  4. 事件&vue修饰符
			
    JavaScript 事件 HTML事件是发生在HTML元素上的事情.当在HTML页面帐使用JavaScript时,javascript可以触发这些事件 HTML 事件 HTML事件可以是浏览器的行为 ...
    
			
    5. 
						
  5. 杭电oj_2047——阿牛的EOF牛肉串（java实现）
			
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2047 思路:先是列出了四个,但是没发现规律,然后开始画递归树,在其中找到了规律,算出递归式为f(n)  ...
    
			
    6. 
						
  6. [TJOI2013] 攻击装置 - 二分图匹配
			
    给定 \(N \times N\) 棋盘,某些格子是障碍,问可以放置的互不侵犯的马的个数 黑白染色后建立二分图,求最大独立集 = 总点数 - 最大匹配数 注意把反边也连上会WA掉(脑抽一发血) #in ...
    
			
    7. 
						
  7. Java代码手段防止非法请求——防盗链
			
    Java代码手段防止非法请求,思路如下:        1. 获取到当前请求的域名,如www.a.com        2. 获取到请求资源的上一个地址        3. 判断上一个地址是否为空,如 ...
    
			
    8. 
						
  8. yii2表单提交CSRF验证
			
    Yii2表单提交默认需要验证CSRF,如果CSRF验证不通过,则表单提交失败,解决方法如下: 第一种解决办法是关闭Csrf public $enableCsrfValidation = false;  ...
    
			
    9. 
						
  9. 记录 shell学习过程（9）正则表达式 转自树明聊运维
			
    正则表达式 正则表达式介绍 特殊字符 POSIX特殊字符 一.正则表达式介绍 正则表达式是一种文本模式匹配,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符") ...
    
			
    10. 
						
  10. 记录 shell学习过程（1） 超简单的面向过程的2个shell 分区以及创建lvm
			
    分区 #!/usr/bin/env bash #fdisk /dev/sdb << EOF #n # # # #+600M #w #EOF 创建lvm pvcreate /dev/sdb  ...
    
			
    11.