camroll_slider实现图片轮换幻灯片效果代码-html代码-BFW代码库

camroll_slider实现图片轮换幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：camroll_slider实现图片轮换幻灯片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
	<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/camroll_slider.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/camroll_slider.js"></script>
	<style>
    #my-slider {
      width: 100%;
      height: 404px;
      color: white;
    }

    @media (max-width: 640px) {
      #my-slider .crs-bar-roll-current {
        width: 38px;
        height: 38px;
      }

      #my-slider .crs-bar-roll-item {
        width: 30px;
        height: 30px;
      }
    }
  </style>
</head>
<body>
	<div >

	    <div id="my-slider" class="crs-wrap">
	      <div class="crs-screen">
	        <div class="crs-screen-roll">
	          <div class="crs-screen-item" style="background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png')">
	            <div class="crs-screen-item-content"><h1>Lorem...</h1></div>
	          </div>
	          <div class="crs-screen-item" style="background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png')">
	            <div class="crs-screen-item-content"><h1>Lorem...</h1></div>
	          </div>
	          <div class="crs-screen-item" style="background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png')">
	            <div class="crs-screen-item-content"><h1>Lorem...</h1></div>
	          </div>
	          <div class="crs-screen-item" style="background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.p.........完整代码请登录后点击上方下载按钮下载查看