vnsc威尼斯城官方网站jQuery图片轮播

超漂亮的jQuery图片轮播特效,使用了插件jCarousel,很棒的jQuery插件,支持带缩略图左右切换,支持Ajax加载数据,响应式布局,支持移动端触屏,强大的API参数配置功能以及函数回调功能,支持自定义动画速度和动画模式,支持轮播方向定义,还是很不错的,推荐学习和使用。

<html >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<title>图片轮播</title>
<style>
*{margin:0px;padding:0px;}
.one{
float:left;
position:relative;
left:0px;
top:0px;
margin-left:10px;
width:790px;
height:340px;
overflow:hidden;
}
.one ul li{
list-style:none;
}
.photo ul{
float:left;
position:absolute;
height:490px;
left:0px;
top:0px;
}
.photo ul li{
float:left;
padding:0px;
margin:0px;
}

vnsc威尼斯城官方网站 1

1.很多时候使用方法ul列表去展示。当然这也有一些好处,比如float对齐之类的。当然直接用p或者div也行。

vnsc威尼斯城官方网站,1.很多时候使用方法ul列表去展示。当然这也有一些好处,比如float对齐之类的。当然直接用p或者div也行。

vnsc威尼斯城官方网站 2

.arrow span{
display:block;
position:absolute;
width:30px;
height:60px;
line-height:60px;
text-align:center;
background:rgba(0,0,0,0.2);
z-index:1;
font-size:20px;
color:#fff;
top:40%;
cursor:pointer;
display:none;

 

 

  <script type="text/javascript">
        //图片轮播
        var bannerIndex = 0; bannerTimer = null;
        function banner() {
            ++bannerIndex;
            if (bannerIndex > 5) {
                bannerIndex = 0;
            }
            $(".turns li").eq(bannerIndex).find("a").addClass("circleCurrent").parent().siblings().find("a").removeClass("circleCurrent");
            $(".swiper-container li").eq(bannerIndex).show().siblings().hide();

        };

            $(document).ready(function () {
               // var swiper = new Swiper('.swiper-container', {
                //    pagination: '.swiper-pagination',
                 //   paginationClickable: true
              //  });

                //返回顶部
                $("#gotop").click(function () {
                    $("#content").animate({ scrollTop: "0px" }, 100);
                });

                bannerTimer = window.setInterval("banner()", 3000);
                //点击小点,切换图片
                $(".turns li").click(function () {
                    window.clearInterval(bannerTimer);
                    bannerTimer = null;
                    bannerIndex = $(this).index() - 1;
                    banner();
                    bannerTimer = window.setInterval("banner()", 3000);
                });

            });
 
    </script>

2.了解overflow属性。在溢出情况下的处理。其实轮播就是在不断的处理ul溢出的情况。

2.了解overflow属性。在溢出情况下的处理。其实轮播就是在不断的处理ul溢出的情况。

使用方法:
1.加载jQuery和插件

}
.arrow span:hover{
background:rgba(0,0,0,0.7);
}
.arrow .right{
right:0px;
}
.dot{
position:absolute;
z-index:!;
background:rgba(255,255,255,0.2);
font-size:26px;
bottom:15px;
left:300px;
border-radius:22px;
}
.dot ul{
margin:0px;
padding:0px;
}
.dot ul li{
float:left;
padding:0px;
margin:0px;
margin:0 5px;
cursor:pointer;
}
</style>
</head>

3 jQuery
animate的动画效果。当然如果不用这个也行。一个setInterval就能搞定它。不过jQuery还是做了一些封装。

3 jQuery
animate的动画效果。当然如果不用这个也行。一个setInterval就能搞定它。不过jQuery还是做了一些封装。

<link rel="stylesheet" type="text/css" href="jcarousel.basic.css">
<script type="text/javascript" src="libs/jquery/jquery.js"></script>
<script type="text/javascript" src="dist/jquery.jcarousel.min.js"></script>

<body>
<div class=”one”>
<div>
<div class=”photo”>
<ul>
<li><img src=”image/1.png” alt=”1″ /></li>
<li><img src=”image/2.png” alt=”2″ /></li>
<li><img src=”image/3.png” alt=”3″ /></li>
<li><img src=”image/4.png” alt=”4″ /></li>
<li><img src=”image/5.png” alt=”5″ /></li>
<li><img src=”image/6.png” alt=”6″ /></li>
</ul>
</div>
<div class=”arrow”><span class=”iconfont
left”></span> <span class=”iconfont
right”></span></div>
<div class=”dot”>
<ul>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
</ul>
</div>
</div>
</div>
<script type=”text/javascript”
src=”” ></script>
<script>
$(document).ready(function(){
var ulWidth=$(‘.photo ul li’).length*$(‘.photo ul li’).eq(1).width();
$(‘.dot ul li’).first().css(‘color’,’#db192a’);
$(‘.photo ul’).width(ulWidth);
$(‘.photo,.arrow span’).hover(function(){$(‘.arrow span’).toggle()})
function jdshow(){
var index=-$(‘.photo ul’).position().left/$(‘.photo ul
li’).eq(1).width();
$(‘.dot ul li’).css(‘color’,’#fff’);
if(index==$(‘.photo ul li’).length-1){index=-1}
$(‘.dot ul li’).eq(index+1).css(‘color’,’#db192a’);

4 可能还需要一些基础的理解就是对定位的熟悉。margin和postion的了解。

4 可能还需要一些基础的理解就是对定位的熟悉。margin和postion的了解。

2.HTML内容

if($(‘.photo ul’).position().left==-(ulWidth-790)){
$(‘.photo ul’).css(‘left’,’790px’);//图片宽度
$(‘.photo ul’).clone().appendTo(‘.photo’);
$(‘.photo ul:first’).remove();
}
$(‘.photo ul’).animate({
left:’-=790px’,
},10);

5 之后就是循环轮播了,循环轮播需要对节点进行重新的修改。

5 之后就是循环轮播了,循环轮播需要对节点进行重新的修改。

<div class="jcarousel-wrapper">
<div class="jcarousel">
 <ul>
 <li><img src="../_shared/img/img1.jpg" width="600" height="400" alt="vnsc威尼斯城官方网站 3"></li>
 <li><img src="../_shared/img/img2.jpg" width="600" height="400" alt="vnsc威尼斯城官方网站 4"></li>
 <li><img src="../_shared/img/img3.jpg" width="600" height="400" alt="vnsc威尼斯城官方网站 5"></li>
 <li><img src="../_shared/img/img4.jpg" width="600" height="400" alt="vnsc威尼斯城官方网站 6"></li>
 <li><img src="../_shared/img/img5.jpg" width="600" height="400" alt="vnsc威尼斯城官方网站 7"></li>
 <li><img src="../_shared/img/img6.jpg" width="600" height="400" alt="vnsc威尼斯城官方网站 8"></li>
 </ul>
</div>
<a href="#" class="jcarousel-control-prev">‹</a>
<a href="#" class="jcarousel-control-next">›</a>
<p class="jcarousel-pagination">
</p>
</div>

}
setInterval(jdshow,2000);

 
 具体而言就是在轮播到最后一张图片的时候,修改节点,将第一个节点,添加到列表的最后一个位置。

 
 具体而言就是在轮播到最后一张图片的时候,修改节点,将第一个节点,添加到列表的最后一个位置。

3.函数调用

$(‘.arrow .right’).click(function(){
jdshow();
});
$(‘.arrow .left’).click(function(){
/*alert($(‘.jd-photo ul’).position().left);*/
var index=-$(‘.photo ul’).position().left/$(‘.photo ul
li’).eq(1).width();
$(‘.dot ul li’).css(‘color’,’#fff’);
$(‘.dot ul li’).eq(index-1).css(‘color’,’#db192a’);
if($(‘.photo ul’).position().left==0){
$(‘.photo ul’).css(‘left’,-ulWidth);
$(‘.photo ul’).clone().appendTo(‘.photo’);
$(‘.photo ul:first’).remove();
}
$(‘.photo ul’).animate({
left:’+=790px’,
},10);
});
$(‘.dot ul li’).click(function(){
var index=$(‘.dot ul li’).index(this);
$(‘.photo ul’).animate({
left:-index*790,
},10);
$(‘.dot ul li’).css(‘color’,’#fff’);
$(this).css(‘color’,’#db192a’);
});
})
</script>
</body>
</html>

 1 <div class="slide">
 2     <ul>
 3         <li><img src="images/slide01.jpg"></li>
 4         <li><img src="images/slide02.jpg"></li>
 5         <li><img src="images/slide03.jpg"></li>
 6     </ul>
 7     <ol>
 8         <li class="on">1</li><li>2</li><li>3</li>
 9     </ol>
10     <div class="prev btn">上一页</div>
11     <div class="next btn">下一页</div>
12 </div>            
 1 <div class="slide">
 2     <ul>
 3         <li><img src="images/slide01.jpg"></li>
 4         <li><img src="images/slide02.jpg"></li>
 5         <li><img src="images/slide03.jpg"></li>
 6     </ul>
 7     <ol>
 8         <li class="on">1</li><li>2</li><li>3</li>
 9     </ol>
10     <div class="prev btn">上一页</div>
11     <div class="next btn">下一页</div>
12 </div>            
 <script type="text/javascript">
 $(function(){
   $('.jcarousel').jcarousel(); 
     $('.jcarousel-control-prev')
       .on('jcarouselcontrol:active', function() {
         $(this).removeClass('inactive');

       })
       .on('jcarouselcontrol:inactive', function() {
         $(this).addClass('inactive');

       })
       .jcarouselControl({
         target: '-=1'
       });
     $('.jcarousel-control-next')
       .on('jcarouselcontrol:active', function() {

         $(this).removeClass('inactive');

       })
       .on('jcarouselcontrol:inactive', function() {
         $(this).addClass('inactive');
       })
       .jcarouselControl({
         target: '+=1'
      });

     $('.jcarousel-pagination')
        .on('jcarouselpagination:active', 'a', function() {
        $(this).addClass('active');
       })
       .on('jcarouselpagination:inactive', 'a', function() {
         $(this).removeClass('active');
      })
       .jcarouselPagination();
   });
 });

 

 

以上就是为大家推荐的jQuery图片轮播特效的关键代码,大家还需要进一步的完善,可以结合之前的文章进行学习,一定会有意想不到的收获。

 1 *{margin:0; padding:0;}
 2 ul,ol{list-style:none;}
 3 .slide{ width:100%; height: 382px; overflow: hidden; margin:20px auto 0; position:relative;}
 4.slide ul{ position:absolute; left:0; top:0; overflow: hidden;}
 5.slide ul li{ float:left; width:1920px; height: 500px;}
 6.slide ol{position:absolute; left:50%; bottom:20px; margin-left:-60px;}
 7.slide ol li{ float:left; width:34px; height: 8px; margin:0 5px; background:#c1c1c1; display:inline; text-indent:-999em;}
 8.slide ol li.on{ background: #48e574;}
 9.slide .btn{ display: block; width:80px; height: 40px; text-align:center; line-height:40px; background: #666; color: #fff; top:50%; margin-top: -20px; cursor: pointer;position: absolute;}
10.slide .prev{ left:0;}
11.slide .next{ right:0;}
 1 *{margin:0; padding:0;}
 2 ul,ol{list-style:none;}
 3 .slide{ width:100%; height: 382px; overflow: hidden; margin:20px auto 0; position:relative;}
 4.slide ul{ position:absolute; left:0; top:0; overflow: hidden;}
 5.slide ul li{ float:left; width:1920px; height: 500px;}
 6.slide ol{position:absolute; left:50%; bottom:20px; margin-left:-60px;}
 7.slide ol li{ float:left; width:34px; height: 8px; margin:0 5px; background:#c1c1c1; display:inline; text-indent:-999em;}
 8.slide ol li.on{ background: #48e574;}
 9.slide .btn{ display: block; width:80px; height: 40px; text-align:center; line-height:40px; background: #666; color: #fff; top:50%; margin-top: -20px; cursor: pointer;position: absolute;}
10.slide .prev{ left:0;}
11.slide .next{ right:0;}

您可能感兴趣的文章:

  • 基于JQuery的实现图片轮播效果(焦点图)
  • 基于jquery的图片轮播
    tab切换组件
  • 12款经典的白富美型—jquery图片轮播插件—前端开发必备
  • jQuery图片轮播的具体实现
  • jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
  • 原生js和jquery实现图片轮播特效
  • 原生js和jquery实现图片轮播淡入淡出效果
  • Jquery代码实现图片轮播效果(一)
  • jQuery超精致图片轮播幻灯片特效代码分享
  • jquery图片轮播特效代码分享
  • JQuery实现图片轮播效果
  • jQuery实现图片轮播特效代码分享
  • jQuery图片轮播滚动切换代码分享
  • jQuery实现宽屏图片轮播实例教程
  • 基于jQuery实现响应式圆形图片轮播特效

 

 

 1 $(function(){
 2  $('.slide ul li:first').clone().appendTo($('.slide ul'));//复制第一个li
 3     var left,t,index= 0,
 4      len = $('.slide ul li').length,//图片数量
 5      liW = $('.slide ul li').width(),//获取图片的宽度
 6      ulW = liW*len;//获取UL的宽度
 7      $('.slide ul').width(ulW);
 8 
 9      function moving(){
10        left = index*liW;
11         if(index >= len-1){
12           $('.slide ul').stop().animate({'left':-left},500,function(){
13              index=0;
14               $('.slide ul').css('left',0);
15               $('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
16           });
17          }else{
18            $('.slide ul').stop().animate({'left':-left},500);
19             $('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
20          };
21            console.log(index);
22          };
23          //下一图
24          $('.slide .next').click(function(){
25          index++;
26          if(index > len){
27            index=1;
28            $('.slide ul').css('left',0).stop().animate({'left':-index*liW},500);
29          }else{
30            moving();
31          }
32            $('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
33          });
34 
35           //上一图
36           $('.slide .prev').click(function(){
37             index--;
38              if(index<1){
39                if(index<0){
40                   index = len-2;
41                    $('.slide ul').css('left',-(len-1)*liW).stop().animate({'left':-(len-2)*liW},500);
42                 }else{
43                   left = index*liW;
44                    $('.slide ul').stop().animate({'left':-left},500,function(){
45                      index=len-1;
46                       $('.slide ul').css('left',-index*liW);
47                    });
48                  }
49                     $('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
50                 }else{
51                     moving();
52                 };
53             });
54 
55             //自动轮播
56             function automatic(){
57                 index++;
58                 moving();
59             };
60             $('.slide').hover(function(){
61                 clearInterval(t);
62             },function(){
63                 t =setInterval(automatic,3000);
64             }).trigger('mouseleave');
65         });
 1 $(function(){
 2  $('.slide ul li:first').clone().appendTo($('.slide ul'));//复制第一个li
 3     var left,t,index= 0,
 4      len = $('.slide ul li').length,//图片数量
 5      liW = $('.slide ul li').width(),//获取图片的宽度
 6      ulW = liW*len;//获取UL的宽度
 7      $('.slide ul').width(ulW);
 8 
 9      function moving(){
10        left = index*liW;
11         if(index >= len-1){
12           $('.slide ul').stop().animate({'left':-left},500,function(){
13              index=0;
14               $('.slide ul').css('left',0);
15               $('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
16           });
17          }else{
18            $('.slide ul').stop().animate({'left':-left},500);
19             $('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
20          };
21            console.log(index);
22          };
23          //下一图
24          $('.slide .next').click(function(){
25          index++;
26          if(index > len){
27            index=1;
28            $('.slide ul').css('left',0).stop().animate({'left':-index*liW},500);
29          }else{
30            moving();
31          }
32            $('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
33          });
34 
35           //上一图
36           $('.slide .prev').click(function(){
37             index--;
38              if(index<1){
39                if(index<0){
40                   index = len-2;
41                    $('.slide ul').css('left',-(len-1)*liW).stop().animate({'left':-(len-2)*liW},500);
42                 }else{
43                   left = index*liW;
44                    $('.slide ul').stop().animate({'left':-left},500,function(){
45                      index=len-1;
46                       $('.slide ul').css('left',-index*liW);
47                    });
48                  }
49                     $('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
50                 }else{
51                     moving();
52                 };
53             });
54 
55             //自动轮播
56             function automatic(){
57                 index++;
58                 moving();
59             };
60             $('.slide').hover(function(){
61                 clearInterval(t);
62             },function(){
63                 t =setInterval(automatic,3000);
64             }).trigger('mouseleave');
65         });

 

 

相关文章