图片滚动 初学JQuery

图片滑动效果一般用于首页的展示，这个按照别人的思路，自己扩充修改了下，纯属自己笔记。

JS代码

 1     <script src="jquery/jquery-2.1.1.js"></script>

 2     <script>

 3         var imgTotal = 8;    //总的图片数量

 4         var imgi = 1;        //默认第一张图片

 5         var autoRun;        //自动滚动

 6         function run(imgI) {      //传递图片编号

 7             imgi = imgI;          //赋值给全局变量  imgi

 8             switch (imgi) {       // 通过编号判断为哪幅图片

 9                 case 1:   //设定每个图片的标签

10                     $("#text1 p").html("<a href='images/pic1.jpg' target='_blank'>菊花〔拉丁学名：Dendranthema morifolium（Ramat. ）Tzvel.〕，常用chrysanthemum。菊花是菊科，菊属多年生草本... </a>"); break;

11                 case 2:

12                     $("#text1 p").html("<a href='images/pic2.jpg' target='_blank'>沙漠</a>"); break;

13                 default: $("#text1 p").text("this is text"); break;

14             }

15            

16             $("#divlinks").find("a").removeClass("aaa");     //取消A标签中的aaa类

17             $("#divlinks").find("a[title='" + imgi + "']").addClass("aaa");    //根据a标签的title 属性查找当前图片，设置aaa类

18             

19             if ($("#divimg").is(":animated")) { $("#divimg").stop(); }       //在执行现在动作之前，先停止之前的动作

20             $("#divimg").animate({ left: -(imgi - 1) * 1000 + "px" }, "1000");    //设置动画，向左移动1000+的宽度，一张图片宽度为1000PX,1秒钟移动完成

21 

22         }

23         function autorun() {      

24             run(imgi);

25             if (imgi == imgTotal) {       //最后一张图片  则将图片编号重置为1

26                 imgi = 1

27             } else {

28                 imgi++;                  //图片编号累加

29             }

30 

31         }

32         function picrun() {   //循环执行

33             run(1);             //保持第一次运行是执行第一张图片

34             autoRun = setInterval(autorun, "3000");      //无限循环 ，3秒间隔

35         }

36         $(document).ready(function () {

37             picrun();                                   //文档 加载完执行

38             $(".main").hover(function(){                  //鼠标在指定图片时， 停止滚动

39                 clearInterval(autoRun);

40             }, function () {

41                 autoRun = setInterval(autorun, "3000");   // 离开图片，继续上一次滚动

42             })

43         })

44 

45 

46 

47     </script>

View Code

CSS代码

 1     <style type="text/css">

 2         body {

 3             text-align: center;

 4         }

 5 

 6         .main {

 7             margin: auto;

 8             width: 1000px;      

 9             height: 400px;

10             position: relative;

11             border: 1px solid #000;

12              overflow:hidden;      //隐藏超出范围的图片

13         }

14 

15         .pic {

16             width: 10000px;            //设置极大宽度，不然自自图片无法正确FLOAT:LEFT

17             height: 400px;

18             background-color: #000000;

19             position: absolute;

20             top: 0px;

21         }

22 

23         .aaa {

24             background-color:#392940;

25         }

26 

27         .img {

28             float: left;

29             width: 1000px;

30             height: 400px;

31         }

32 

33         .text {

34             margin-left:20px;

35             color: #fff;

36             width: 500px;

37             height: 50px;

38             position: absolute;

39             left: 0px;

40             bottom: 0px;

41             text-align:left;

42         }

43         .text p a{

44             color:#fff;

45         }

46         .menu {

47             width: 1000px;

48             height: 50px;

49             position: absolute;

50             left: 0px;

51             bottom: 0px;

52             background-color: #000000;

53             opacity: 0.5;

54           

55         }

56 

57         .divlink {

58             position: absolute;

59             right: 0px;

60             bottom: 0px;

61             width: 430px;

62             height: 50px;

63         }

64 

65             .divlink a {

66                 font-weight: bold;

67                 text-decoration: none;

68                 text-align: center;

69                 line-height: 30px;

70                 display: block;

71                 border: 1px solid #fff;

72                 width: 30px;

73                 height: 30px;

74                 float: left;

75                 margin: 10px;

76                 color: #fff;

77             }

78             

79                 .divlink a:hover {

80                     background-color: #392940;

81                     opacity: 0.5;

82                 }

83     </style>

CSS

HTML代码

 1 <body>

 2     <div class="main">

 3         <div class="pic" id="divimg">

 4             <a href="images/pic1.jpg" target="_blank">

 5                 <img src="images/pic1.jpg" alt="" class="img" /></a>

 6             <a href="images/pic2.jpg" target="_blank">

 7                 <img src="images/pic2.jpg" alt="" class="img" /></a>

 8             <a href="images/pic3.jpg" target="_blank">

 9                 <img src="images/pic3.jpg" alt="" class="img" /></a>

10             <a href="images/pic4.jpg" target="_blank">

11                 <img src="images/pic4.jpg" alt="" class="img" /></a>

12             <a href="images/pic5.jpg" target="_blank">

13                 <img src="images/pic5.jpg" alt="" class="img" /></a>

14             <a href="images/pic6.jpg" target="_blank">

15                 <img src="images/pic6.jpg" alt="" class="img" /></a>

16             <a href="images/pic7.jpg" target="_blank">

17                 <img src="images/pic7.jpg" alt="" class="img" /></a>

18             <a href="images/pic8.jpg" target="_blank">

19                 <img src="images/pic8.jpg" alt="" class="img" /></a>

20         </div>

21         <div class="menu">

22             <div class="text" id="text1">

23                 <p>this is text</p>

24             </div>

25             <div class="divlink" id="divlinks">

26                 <a href="#" title="1" onclick="return run(1)" >1</a>

27                 <a href="#" title="2" onclick="return run(2)">2</a>

28                 <a href="#" title="3" onclick="return run(3)">3</a>

29                 <a href="#" title="4" onclick="return run(4)">4</a>

30                 <a href="#" title="5" onclick="return run(5)">5</a>

31                 <a href="#" title="6" onclick="return run(6)">6</a>

32                 <a href="#" title="7" onclick="return run(7)">7</a>

33                 <a href="#" title="8" onclick="return run(8)">8</a>

34             </div>

35         </div>

36     </div>

37 </body>

HTML

 

这个图片滚动的核心还是利用setInterval()方法，支持无限循环滚动。每次循环图片编号+1，到最一张图片重置编号。

最终效果还有由移动图片的距离产生：图片设置float:left,父窗体设置宽度为10000px，使图片横铺，每次方法执行，向左移动1000px，刚好为图片宽度，产生滚动效果

点击图片编号，直接跳转图片

具体见源码