python 轮播效果源代码

Posted 2021-01-29 青春叛逆者

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了python 轮播效果源代码相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<meta charset="utf-8">
<head>
<title>轮播效果</title>
    <style>
    *{
        margin: 0px ;
        padding: 0px;
        }

    body {
        background: green;
        }
    .box{
        width: 600px;
        height: 400px;
        margin: 50px auto;
        overflow:hidden;
        position: relative;
        }
    .ctrl{
        width: 50px;
        height: 50px;
        color: red;
        font-size: 50px;
        text-align:center;
        line-height:50px;
        background: none;
        border: none;
        outline: none;
        cursor: pointer;
        position: absolute;
        z-index: 10;
        top: 40%;
        display: none;
        }
    .next {
                right: 0;
            }
    .content{
        width: 1800px;
        height: 400px;
        position: relative;
        left:-600px;
        }
    img {
              display: block;
            float: left;
            width: 600px;
            height: 400px;
        }
    .dot{
        width: 100%;
        height: 50px;
        background: aqua;
        position: relative;
        bottom: 50px;
        text-align: center;
        line-height: 50px;
    }
     .dot div {
     display: inline-block;
     width: 14px;
     height: 14px;
     background: white;
     border: 1px solid red;
     border-radius: 8px;
     }
     .dot .selected{
     background: purple;
     font-weight: bold;
     }
    </style>
</head>
<body>
<div class="box">
     <button class="ctrl prev"><</button>
     <button class="ctrl next"> > </button>
    <div class="content">
        <img src="03.jpg" >#写你自己的图片路径就可以了
        <img src="01.jpg" >
        <img src="02.jpg" >
    </div>
    <div class="dot">
         <div  class="selected"></div>
         <div></div>
         <div></div>


    </div>

</div>
</body>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script >
$(function() {
    //记录现实的序号
    var index=0

$(‘.box‘).hover(function() {
  $(‘.ctrl‘).show(300)
},function() {
   $(‘.ctrl‘).hide(300)
})
//prev 按钮
$(‘.prev‘).click(function() {
    //若内容正在动画，则立即返回
    if ($(‘.content‘).is(‘:animated‘)){
        return
    }
  $(‘.content‘).animate({left:0},‘slow‘,‘linear‘,function() {
    //动画结束后，将最后一张图查到最开头
      $(‘.content‘).prepend($(‘img:last‘))
      //重新设置偏移
       $(‘.content‘).css(‘left‘,‘-600px‘)
       //记录图片序号
       if(--index==-1){
           index=2
       }
       $(‘.dot div‘).eq(index).addClass(‘selected‘).siblings().
       removeClass(‘selected‘)
  })
     $(‘.dot div‘).eq(index).click()

})
 //next 按钮
 $(‘.next‘).click(function() {
     //若内容正在动画，则立即返回
     if ($(‘.content‘).is(‘:animated‘)){
         return
     }
   $(‘.content‘).animate({left:‘-1200px‘},‘slow‘,‘linear‘,function() {
     //动画结束后，将最后一张图查到最开头
       $(‘.content‘).append($(‘img:first‘))
       //重新设置偏移
        $(‘.content‘).css(‘right‘,‘-600px‘)
        if(++index==3)  {
           index=0
        }
         $(‘.dot div‘).eq(index).addClass(‘selected‘).siblings().
         removeClass(‘selected‘)
   })


 })

})
</script>
</html>

以上是关于python 轮播效果源代码的主要内容，如果未能解决你的问题，请参考以下文章

js原生 JavaScript轮播图渐变淡入淡出效果实现（附代码）

原生js-实现轮播图效果

一行代码快速实现今日头条网易新闻焦点图自动循环轮播效果

下载了一个轮播效果的css文件，请问怎样搬到淘宝店铺做出轮播效果，谢谢！

js代码实现鼠标移动到上面一个效果，鼠标离开效果保持

JavaScript实现轮播图效果