<!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. 回味Ubuntu10.10致敬Gnome桌面
			
    目录 Ubuntu10.10可用源 Ubuntu10.10更新语言包 输入法支持 浏览器选择 文件下载 压缩文件中文乱码的处理 视频播放 科学计算 搭建Lamp环境 实现文件分享 主题美化 Ubunt ...
    
			
    2. 
						
  2. KC开发组官方网站
			
    KC开发组,简称KC,又叫KC Team,是Kong Che Team(空车开发组)的缩写 是由ordosyz(某乡村小学)的CSP2019退役OIer(信息学奥林匹克竞赛选手) 于2020年2月23 ...
    
			
    3. 
						
  3. IDEA 接口调试插件 HTTP Client
			
    界面客户端 使用手册 https://www.jetbrains.com/help/idea/testing-restful-web-services.html 打开方式 Tools -> HT ...
    
			
    4. 
						
  4. Yarn报错：Could not find any valid local directory for nmPrivate/
			
    原因: yarn.nodemanager.local-dirs和hadoop的hadoop.tmp.dir参数对应文件位置不一致 解决办法: 将hdfs-site.xml中hadoop.tmp.dir ...
    
			
    5. 
						
  5. Educational Codeforces Round 81 (Rated for Div. 2) C. Obtain The String
			
    题目链接:http://codeforces.com/contest/1295/problem/C 题目:给定字符串s,t.  给定一个空串z,需要按照规则把z构造成 string z == stri ...
    
			
    6. 
						
  6. R 常用清洗函数汇总
			
    目录 1.which() 2.unique() 3.dplyr包 select() filter() arrange() group_by() mutate() transmutate() summa ...
    
			
    7. 
						
  7. adworld MISC002 | Linux的挂载文件系统的运用
			
    EXT3是第三代扩展文件系统(英语:Third extended filesystem,缩写为ext3),是一个日志文件系统,常用于Linux操作系统. Plan 1: 直接将附件使用mount命令挂 ...
    
			
    8. 
						
  8. hdu1005 矩阵快速幂
			
    #include<iostream> #include<cstdio> #include<cstring> #include<set> #include ...
    
			
    9. 
						
  9. Vuex项目实战store
			
    首先简单了解一下什么是Vuex? Vuex是一个专为Vue.js应用程序开发的状态管理模式.采用集中式存储来管理应用所有组件的状态. 以下是对vuex的使用的简单介绍: 一.安装 npm i vuex ...
    
			
    10. 
						
  10. Wannafly Camp 2020 Day 3A 黑色气球
			
    #include <bits/stdc++.h> using namespace std; int a[1005][1005],n,x[1005]; int main() { scanf( ...
    
			
    11.