<!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. 305. 岛屿数量 II
			
    题目: 假设你设计一个游戏,用一个 m 行 n 列的 2D 网格来存储你的游戏地图. 起始的时候,每个格子的地形都被默认标记为「水」.我们可以通过使用 addLand 进行操作,将位置 (row, c ...
    
			
    2. 
						
  2. C++-HDU3400-Line belt[三分]
			
    将军饮马问题的升级版 二维平面中要从A到D,给出两条线段AB,CD,分别在线段AB,CD,以及空白处的速度为P,Q,R 求最少用时 由于最优位置满足“凸性”,且两条线段可以等价,所以可以采取三分答案迭 ...
    
			
    3. 
						
  3. 解决jquery click事件执行两次
			
    js 解决办法 event.preventDefault() :阻止默认行为,可以用 event.isDefaultPrevented() 来确定preventDefault是否被调用过了 event ...
    
			
    4. 
						
  4. JavaScript变量的传递方式
			
    废话不多说,直接上案例: [案例] 1.访问变量 按值: function addM(num) { num += 5; return num; } var cnt = 10; var result = ...
    
			
    5. 
						
  5. STL初学
			
    标准模板库STL初学 线性数据结构 vector 一维向量,相当于数组 list 链表 map 映射,提供(Key,Value)式操作,相当于哈希表 string char字符串 queue 队列,先 ...
    
			
    6. 
						
  6. 【Unity|C#】基础篇(3)——类（class）/ 接口（interface）
			
    [学习资料] <C#图解教程>(第4~7章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu ...
    
			
    7. 
						
  7. 简写函数字面量（function literal）
			
    如果函数的参数在函数体内只出现一次,则可以使用下划线代替: val f1 = (_: Int) + (_: Int) //等价于 val f2 = (x: Int, y: Int) => x + ...
    
			
    8. 
						
  8. 算法竞赛入门经典第二版     蛇形填数  P40
			
    #include<bits/stdc++.h> using namespace std; #define maxn 20 int a[maxn][maxn]; int main(){ ;  ...
    
			
    9. 
						
  9. pikaqiu练习平台（SQL注入 ）
			
    sql注入漏洞 (危害是最大得) Sql注入 数据库注入漏洞,主要是开发人员在构建代码时,没有对输入边界进行安全考虑,导致攻击者可以通过合法的输入点提交一些精心构造的语句,从而欺骗后台数据库对其进行执 ...
    
			
    10. 
						
  10. gets(), getline(), cin.getline()
			
    gets(str), getline(cin, s), cin.getline(str, len),这三个函数都是读入一行字符串的函数,下面是这三个函数的区别 1. gets() 函数是 C 语言的函 ...
    
			
    11.