jquery实现无缝轮播案例

岁月如歌_

已于 2023-12-28 11:42:40 修改

阅读量780

点赞数

文章标签： jquery 前端 javascript

于 2018-08-21 09:23:25 首次发布

本文链接：https://blog.csdn.net/namechenfl/article/details/81901444

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #scroll_wrap{
            margin: 100px 300px;
            width: 600px;
            height: 400px;
            position: relative;
            overflow: hidden;
        }
        ul{
            position: absolute;
            display: flex;
           
        }
        #scroll li{
            list-style: none;
            width: 600px;
            height:400px;
            text-align: center;
            color: #fff;
            font-size: 32px;
        }
        #scroll  li:nth-of-type(1){
            background: red;
        }
        #scroll  li:nth-of-type(2){
            background: green;
        }
        #scroll li:nth-of-type(3){
            background: blue;
        }
        #scroll li:nth-of-type(4){
            background: yellow;
        }
        #scroll li:nth-of-type(5){
            background: red;
        }
        .scrollbanner ul .select{
           background:blueviolet;
            
        }
        .scrollbanner ul{
            display: flex;
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        .scrollbanner ul li{
            list-style: none;
            width: 20px;
            height: 20px;
            margin-left:10px; 
            background: #fff;
            cursor: pointer;
        }
        .btn{
            position: absolute;
            width: 30px;
            height: 30px;
            color: aqua;
            font-size: 20px;
            line-height: 30px;
            text-align: center;
            background: #fff;
            cursor: pointer;
            display: none;
        }
        .pre{
            top: 50%;
            left: 10px;
        }
        .next{
            top: 50%;
            right: 10px;
        }
    </style>
</head>
<body>
    <div id="scroll_wrap">
        <ul id="scroll">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div class="btn pre">&lt;</div>
		<div class="btn next">&gt;</div>

			<div class="scrollbanner">
				<ul>
					 <!--<li class="select"></li>
					<li></li>
					<li></li>
					<li></li>-->
				</ul>
			</div>
    </div>
</body>
<script>
     var num = 0;
  var timer = null;
  var liNumber = $("#scroll li").length;
  // scrollbanner 的li 渲染
  let Html = "";
  for (var i = 0; i < liNumber; i++) {
    Html += `<li class="${i == num ? 'select' : ''}"></li>`
  }
  $(".scrollbanner ul").html(Html);
  // 把#scroll内的第一个li克隆然后在最后一个追加li
  $("#scroll").append($("#scroll li").eq(0).clone());
  // 定时器
  timer = setInterval(function () {
    foo();
  }, 2000);
  function foo() {
    //图片变化
    num++;
    var left1 = $("#scroll li").width();

    if (num == liNumber + 1) {
      num = 1;
      $("#scroll").css("left", 0);
    }
    if (num == -1) {
      num = liNumber - 1;
      $("#scroll").css("left", -left1 * (num + 1));
    }

    $("#scroll").stop().animate({ "left": -left1 * num }, 800);
    // 小图标变化
    if (num == liNumber) {
      $(".scrollbanner li").eq(0).addClass("select").siblings().removeClass("select");
    } else {
      $(".scrollbanner li").eq(num).addClass("select").siblings().removeClass("select");
    }
  }
    // 滑入轮播图按钮出现，轮播图静止，离开开启
	$("#scroll_wrap").mouseover(function () {
		clearInterval(timer);
		$(".btn").show();
	});
	$("#scroll_wrap").mouseout(function () {
		$(".btn").hide();
		timer = setInterval(function () {

			foo();
		}, 2000);
	});

    //前进后退按钮
	$(".pre").click(function () {
		num -= 2;
		foo();
	});
	$(".next").click(function () {
		foo();
	});
    //点击小图标变化至图片
     $(".scrollbanner li").click(function(){
         var i=$(this).index();
         num =i-1;
         foo()
     })
</script>
</html>

岁月如歌_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
jquery实现无缝轮播案例

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫