轮播图效果的实现 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 </head>
 7 <style>
 8 * {
 9     margin:0;
10     padding:0;
11 }
12 .ad {
13     width:1200px;
14     height:500px;
15     border:1px solid red;
16     margin:200px auto;
17     overflow:hidden;
18     position:relative;
19 }
20 .imgBox {
21     position:absolute;
22     left:0;
23     right:0;
24 }
25 .imgBox li {
26     list-style:none;
27     float:left;
28     width:1200px;
29     height:500px;
30 }
31 .imgBox img {
32     display:block;
33 }
34 .num {
35     position:absolute;
36     bottom:5px;
37     right:5px;
38 }
39 .num li {
40     list-style:none;
41     float:left;
42     width:20px;
43     height:20px;
44     background-color:#903;
45     margin-left:10px;
46     border-radius:10px;
47     cursor:pointer;
48 }
49 .num li.on {
50     background-color:#FF0;
51 }
52 </style>
53 <body>
54 <div class="ad">
55     <ul class="imgBox">
56         <li><img src="http://placehold.it/1200x500" /></li>
57         <li><img src="http://placehold.it/1200x500" /></li>
58         <li><img src="http://placehold.it/1200x500" /></li>
59         <li><img src="http://placehold.it/1200x500" /></li>
60     </ul>
61     <ul class="num">
62         <li></li>
63         <li></li>
64         <li></li>
65         <li></li>
66     </ul>
67 </div>
68 
69 <script src="http://vscss.com/dm/jquery.js"></script>
70 <script>
71     $(function(){
72         var $imgWidth = $('.imgBox').find('li').eq(0).width();
73         var len = $('.imgBox').find('li').length;
74         $('.imgBox').width($imgWidth*len);
75         var index = 0;
76         var timer =null;
77         var showImg = function(index){
78             $('.imgBox').stop(true,false).animate({"left":-$imgWidth*index},500)
79             $('.num li').removeClass('on')
80                         .eq(index).addClass('on');
81         };
82         $('.num').find('li').mouseover(function(){
83             index = $('.num').find('li').index(this);
84             showImg(index);    
85         }).eq(0).mouseover();
86         $('.ad').hover(function(){
87             clearInterval(timer);    
88         },function(){
89             timer = setInterval(function(){
90                 showImg(index);    
91                 index++;
92                 if(index==len){index=0;}    
93             },2000)    
94         }).trigger('mouseout');
95     });
96 </script>
97 </body>
98 </html>
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 </head>
  7 <style>
  8 * {
  9     margin:0;
 10     padding:0;
 11 }
 12 .adWrap {
 13     position:absolute;
 14     left:50%;
 15     margin-left:-960px;
 16 }
 17 .ad {
 18     width:1920px;
 19     height:500px;
 20     border:1px solid red;
 21     margin:200px auto;
 22     overflow:hidden;
 23     position:relative;
 24 }
 25 .imgBox {
 26     position:absolute;
 27     left:0;
 28     right:0;
 29 }
 30 .imgBox li {
 31     list-style:none;
 32     float:left;
 33     width:1920px;
 34     height:500px;
 35 }
 36 .imgBox img {
 37     display:block;
 38 }
 39 .num {
 40     position:absolute;
 41     bottom:5px;
 42     right:5px;
 43 }
 44 .num li {
 45     list-style:none;
 46     float:left;
 47     width:20px;
 48     height:20px;
 49     background-color:#903;
 50     margin-left:10px;
 51     border-radius:10px;
 52     cursor:pointer;
 53 }
 54 .num li.on {
 55     background-color:#FF0;
 56 }
 57 </style>
 58 <body>
 59 <div class="adWrap">
 60 <div class="ad">
 61     <ul class="imgBox">
 62         <li><img src="http://placehold.it/1920x500" /></li>
 63         <li><img src="http://placehold.it/1920x500" /></li>
 64         <li><img src="http://placehold.it/1920x500" /></li>
 65         <li><img src="http://placehold.it/1920x500" /></li>
 66     </ul>
 67     <ul class="num">
 68         <li></li>
 69         <li></li>
 70         <li></li>
 71         <li></li>
 72     </ul>
 73 </div>
 74 </div>
 75 
 76 <script src="http://vscss.com/dm/jquery.js"></script>
 77 <script>
 78     $(function(){
 79         var $imgWidth = $('.imgBox').find('li').eq(0).width();
 80         var len = $('.imgBox').find('li').length;
 81         $('.imgBox').width($imgWidth*len);
 82         var index = 0;
 83         var timer =null;
 84         var showImg = function(index){
 85             $('.imgBox').stop(true,false).animate({"left":-$imgWidth*index},500)
 86             $('.num li').removeClass('on')
 87                         .eq(index).addClass('on');
 88         };
 89         $('.num').find('li').mouseover(function(){
 90             index = $('.num').find('li').index(this);
 91             showImg(index);    
 92         }).eq(0).mouseover();
 93         $('.ad').hover(function(){
 94             clearInterval(timer);    
 95         },function(){
 96             timer = setInterval(function(){
 97                 showImg(index);    
 98                 index++;
 99                 if(index==len){index=0;}    
100             },2000)    
101         }).trigger('mouseout');
102     });
103 </script>
104 </body>
105 </html>

 

参考：http://www.cnblogs.com/wangwangwangMax/p/5670952.html

* {
  padding:0px;
  margin:0px;
}

.swapImg {
   position:absolute;
   
}
.btn {
    position:absolute;
    height:90px;
    width:60px;
    background:rgba(0,0,0,0.5);/*设置背景颜色为黑色，透明度为50%*/
    color:#ffffff;
    text-align:center;
    line-height:90px;
    font-size:40px;
    top:155px;/*图片高度400/2-45*/
    cursor:pointer;
    /*display:none;*/
}

.btnRight {
    left:840px;/*图片宽度900-导航宽度60*/
}
#tabs {
    position:absolute;
    top:370px;
    margin-left:350px;
}
.tab {
   height:20px;
   width:20px;
   background:#05e9e2;
   line-height:20px;
   text-align:center;
   font-size:10px;
   float:left;
   color:#ffffff;
   margin-right:10px;
   border-radius:100%;
   cursor:pointer;
}
.bg {
   background:#00ff21;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>轮播图</title>
    <link href="css/LunBimg.css" rel="stylesheet" />
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/LunBimg.js"></script>
</head>
<body>
    <div id="allswapImg">
        <div class="swapImg"><img src="image/1.jpg" /></div>
        <div class="swapImg"><img src="image/2.jpg" /></div>
        <div class="swapImg"><img src="image/3.jpg" /></div>
        <div class="swapImg"><img src="image/4.jpg" /></div>
        <div class="swapImg"><img src="image/5.jpg" /></div>
        <div class="swapImg"><img src="image/6.jpg" /></div>
    </div>
    <div class="btn btnLeft"><</div>
    <div class="btn btnRight">></div>
    <div id="tabs">
        <div class="tab bg">1</div>
        <div class="tab">2</div>
        <div class="tab">3</div>
        <div class="tab">4</div>
        <div class="tab">5</div>
        <div class="tab">6</div>
    </div>
</body>
</html>

 

/// <reference path="_references.js" />

var i = 0;//全局变量
//定义一个变量用来获取轮播的过程
var time;
$(function ()
{
    //1.页面加载后,找到Class等于swapImg的第一个对象，让它显示，它的兄弟元素隐藏
    $(".swapImg").eq(0).show().siblings().hide();
    showTime();
    //当鼠标放到下标上显示该图片，鼠标移走继续轮播
    $(".tab").hover(
        function ()
        {
            //获取到当前鼠标所在的下标的索引
            i = $(this).index();
            show();
            //鼠标放上去之后，怎么停止呢？获取到变量的过程，清除轮播，把变量传进去
            clearInterval(time);
        }, function ()
        {
            showTime();
        });

    //要求四，当我点击左右切换
    $(".btnLeft").click(function ()
    {
        //1.点击之前要停止轮播
        clearInterval(time);
        //点了之后，-1
        if (i == 0)
        {
            i =6;
        }
        i--;
        show();
        showTime();
    });
    $(".btnRight").click(function () {
        //1.点击之前要停止轮播
        clearInterval(time);
        //点了之后，-1
        if (i == 5) {
            i = -1;
        }
        i++;
        show();
        showTime();
    });
   

});

function show() {
    //$("#allswapImg").hover(function ()
    //{
    //    $(".btn").show();
    //}, function ()
    //{
    //    $(".btn").hide();
    //});
    //fadeIn(300)淡入，fadeout(300)淡出，过滤时间0.3s
    $(".swapImg").eq(i).fadeIn(300).siblings().fadeOut();
    $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");
}

function showTime()
{
    time = setInterval(function () {
        i++;
        if (i == 6) {
            //只有6张图片，所以i不能超过6，如果i等于6时，我们就让它等于第一张
            i = 0;
        }
        show();
    }, 3000);
}

 

posted on 2016-05-29 20:28  jasonduanmu  阅读(556)  评论(0)  编辑  收藏  举报

导航