查看: 2560|回复: 0

[DIV/CSS] 前端小白案例-商品轮播图制作

发表于 2018-4-6 08:00:00

前端小白案例-商品轮播图制作
知识点:html加CSS布局、html加css布局思维,定位、浮动详解。

html代码

  1. <div class="banner">
  2. <div class="pic">
  3. <ul id="pic">
  4. <li style="background-image:url('images/VIP_img1.jpg');left:0;"></li>
  5. <li style="background-image:url('images/VIP_img2.jpg')"></li>
  6. <li style="background-image:url('images/VIP_img3.jpg')"></li>
  7. <li style="background-image:url('images/VIP_img4.jpg')"></li>
  8. <li style="background-image:url('images/VIP_img5.jpg')"></li>
  9. </ul>
  10. </div>
  11. <div class="text">
  12. <ul id="text-list">
  13. <li>都市丽人品牌日<span>|</span></li>
  14. <li>都市丽人集团年度钜献<span>|</span></li>
  15. <li>哈森集团冬靴节 满498减50<span>|</span></li>
  16. <li>运动大牌 最高满298减60<span>|</span></li>
  17. <li>爱在唯品家 最高满298减80</li>
  18. </ul>
  19. </div>
  20. <div class="car"></div>
  21. </div>
复制代码

css代码

  1. <style>
  2. *{margin:0;padding:0;}
  3. .banner{
  4. width:1146px;
  5. height:440px;
  6. padding:15px 15px 0 15px;
  7. background:#fff;
  8. border:1px solid #eaeaea;
  9. margin:50px auto;
  10. position:relative;
  11. }
  12. .banner .pic{
  13. width:1146px;
  14. height:400px;
  15. position:relative;
  16. overflow:hidden;
  17. }
  18. .banner .pic ul li{
  19. list-style:none;
  20. width:100%;
  21. height:400px;
  22. position:absolute;
  23. top:0;
  24. left:100%;
  25. }
  26. .banner .text ul li{
  27. list-style:none;
  28. width:229px;
  29. text-align:center;
  30. float:left;
  31. color:#666;
  32. font-size:12px;
  33. font-family:'微软雅黑';
  34. line-height:35px;
  35. cursor:pointer;
  36. }
  37. .banner .text ul li span{
  38. float:right;
  39. color:#ddd;
  40. }
  41. .banner .car{
  42. width:229px;
  43. height:3px;
  44. background:#e6057d;
  45. position:absolute;
  46. bottom:-3px;
  47. left:15px;
  48. }
  49. </style>
复制代码

javascript代码:

  1. <script src="js/move.js"></script>
  2. <script>
  3. var Car = document.getElementsByClassName('car')[0];//运动条
  4. var oPic = document.getElementById('pic');
  5. var aPicli = oPic.getElementsByTagName('li');//图片序列
  6. var otext = document.getElementById('text-list');
  7. var otextli = otext.getElementsByTagName('li');//文字序列
  8. var index = 0;
  9. for(var i=0;i<otextli.length;i++){
  10. otextli[i].index = i;
  11. otextli[i].onclick = function(){
  12. var lastIndex = index;
  13. var nowLeft = this.index*229+15;
  14. var left = 1146;
  15. index = this.index;
  16. //运动条动画
  17. move( Car , "left" , nowLeft , 20 );
  18. if ( index > lastIndex )
  19. {
  20. left = -left;
  21. };
  22. aPicli[index].style.left = -left+'px';
  23. //移出图片动画
  24. move( aPicli[lastIndex] , 'left' , left , 50 );
  25. //移入图片动画
  26. move( aPicli[index] , 'left' , 0 , 50 );
  27. }
  28. };
  29. </script>
复制代码


回复

使用道具 举报