- <!DOCTYPE>
- <html>
- <head>
- <title>carrousel</title>
- <script src="js/jquery-3.2.1.js"></script>
- <style>
- body{
- padding:0px;
- margin:0px;
- }
- .lv-carrousel{
- width:100%;
- height:500px;
- margin:0 auto;
- overflow:hidden;
- font-size:0px;
- margin-top:-35px;
- }
- .lv-carrousel:before{
- content:"";
- display:block;
- height:35px;
- width:20px;
- background:url("images/left.png");
- position:relative;
- top:50%;
- margin-top:-17px;
- margin-left:10px;
- }
- .lv-carrousel:after{
- content:"";
- display:block;
- height:35px;
- width:20px;
- background:url("images/right.png");
- position:relative;
- bottom:50%;
- float:right;
- margin-right:10px;
- }
- .lv-carrousel-btn-group{
- height:20px;
- font-size:10px;
- background-color:green;
- text-align:center;
- margin-top:-55px;
- }
- .lv-carrousel-btn{
- height:10px;
- width:10px;
- background-color:#FFF;
- border-radius:5px;
- display:inline-block;
- margin:0 5px;
- }
- .lv-carrousel-btn.selected{
- width:20px;
- }
- </style>
- <script>
- var Carrousel = {
- width: 0,
- height: 0,
- size:0,
- current:1,
- timer:null,
- direction:1,
- init: function(){
- var _this = this;
- this.width = $(".lv-carrousel").width();
- this.height = $(".lv-carrousel").height();
- $(".lv-carrousel-row img").height(this.height);
- $(".lv-carrousel-row img").width(this.width);
- this.size = $(".lv-carrousel-row img").length;
- $(".lv-carrousel-row").width(this.width * this.size);
- $(".lv-carrousel").append('<div class="lv-carrousel-btn-group"></div>');
- for(var i=1; i<=this.size; i++){
- $(".lv-carrousel-btn-group").append('<div class="lv-carrousel-btn"></div>');
- }
- $(".lv-carrousel-btn-group .lv-carrousel-btn:nth-child(" + _this.current + ")").addClass("selected");
- $(".lv-carrousel-btn").click(function(){
- $(".lv-carrousel-btn").removeClass("selected");
- $(this).addClass("selected");
- _this.change($(this).index() + 1);
- });
- $(".lv-carrousel").click(function(event){
- var x = event.pageX;
- if(x <30){
- if(_this.current> 1){
- _this.change(_this.current - 1);
- }
- } else if(x>_this.width-30 && x<_this.width){
- if(_this.current <_this.size){
- _this.change(_this.current + 1);
- }
- }
- });
- $(".lv-carrousel").hover(function(){
- _this.stop();
- });
- $(".lv-carrousel").mouseleave(function(){
- _this.start();
- });
- this.start();
- },
- change:function(index){
- if(index != this.current){
- $(".lv-carrousel-row").animate({marginLeft: (-1 * this.width * (index-1) + "px")}, 500);
- $(".lv-carrousel-btn").removeClass("selected");
- $(".lv-carrousel-btn-group .lv-carrousel-btn:nth-child(" + index + ")").addClass("selected");
- this.current = index;
- }
- },
- start:function(){
- var _this = this;
- this.timer = setInterval(function(){
- if(_this.direction == 1){
- if(_this.current == _this.size){
- _this.direction = -1;
- _this.change(_this.current-1);
- } else {
- _this.change(_this.current+1);
- }
- } else if(_this.direction == -1){
- if(_this.current == 1){
- _this.direction = 1;
- _this.change(_this.current+1);
- } else {
- _this.change(_this.current-1);
- }
- }
- }, 1000);
- },
- stop:function(){
- clearInterval(this.timer);
- }
- };
- $(function(){
- Carrousel.init();
- });
- </script>
- </head>
- <body>
- <div class="lv-carrousel">
- <div class="lv-carrousel-row">
- <img src="images/1.jpg"/>
- <img src="images/2.jpg"/>
- <img src="images/3.jpg"/>
- <img src="images/4.jpg"/>
- <img src="images/5.jpg"/>
- </div>
- </div>
- </body>
- </html>
来源: https://www.cnblogs.com/lvniao/p/9113089.html