查看: 170|回复: 1

图片轮播代码参考

[复制链接]

图片轮播代码参考[复制链接]

zhaishao 发表于 2019-1-18 08:27:22 [显示全部楼层] 回帖奖励 |倒序浏览 |阅读模式 回复:  1 浏览:  170
主要是css和JS 的代码编打,特别是图片的宽度在css里面的写法,在html里面 要给图片一个class和id方便设置js代码,在自动轮播的效果下要设置 图片的方向和每一次移动的位置(即像素);在css里要给最外层的选择器设置宽和高 和图片的所在位置,然后再给装图片的class设置每一张图片加起来的总宽度…

开发工具与关键技术:DW(js 、 css)
作者:邱慧敏
撰写时间:2019.01.17
知识总结 轮播的基本样式
HTML 代码部分
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>轮播效果</title>
  6. <link rel="icon"  type="image/x-icon" href="images/微信图片14.jpg">
  7. <link rel="stylesheet" href="baobao-5.css">
  8. </head>
  9. <body>
  10.                 <!--轮播 先设置两大个div;大的div里面在放两个小的div 分别用来装img span;
  11.                 然后在外层再放 <a></a>标签用来装左右按钮,记得不能遗漏 hrdf=""javascript:;"> -->
  12. <div class="left_div" id="left_div">
  13.         <div id="container" class="container">
  14.                 <div id="list" class="list" style="left: -1080px;"><!--像素不可缺少 且为负数-->
  15.                         <img src="images/微信图片17.jpg" alt="">
  16.                         <img src="images/微信图片15.jpg" alt="">
  17.                         <img src="images/微信图片4.jpg" alt="">
  18.                         <img src="images/微信图片16.jpg" alt="">
  19.                         <img src="images/微信图片11.jpg" alt="">
  20.                         <img src="images/微信图片17.jpg" alt="">
  21.                         <img src="images/微信图片15.jpg" alt="">
  22.                 </div>
  23.                 <div id="buttons" class="buttons"><!--页码-->
  24.                         <span index="1" class="on">1</span>
  25.                         <span index="2">2</span>
  26.                         <span index="3">3</span>
  27.                         <span index="4">4</span>
  28.                         <span index="5">5</span>
  29.                 </div>
  30.                 <a id="prev" class="prev" href="javascript:;"><</a><!--按钮-->
  31.                 <a id="next" class="next" href="javascript:;">></a>
  32.         </div>
  33. </div>
  34. <script src="baobao-5.js"></script>
  35. </body>
  36. </html>
复制代码
CSS 样式代码
  1. @charset "utf-8";
  2. /* CSS Document */
  3. .left_div{
  4.         width: 1000px;
  5.         height: 100%;
  6.         margin: 0 auto;
  7. }
  8. .container{
  9.         width: 1080px;/*图片的宽*/
  10.         height: 1920px;/*高*/
  11.         margin: 0 auto;
  12.         overflow: hidden;/*超出部分隐藏*/
  13.         position: relative;
  14. }
  15. .container .list{
  16.         width: 7560px;/*五张图片的宽的总像素*/
  17.         height: 100%;
  18.         position: absolute;
  19. }
  20. .container img{/*图片的浮动和宽高*/
  21.         float: left;
  22.         width: 1080px;
  23.         height: 1920px;
  24. }
  25. .container a{
  26.         width: 60px;
  27.         line-height: 60px;
  28.         font-size: 45px;
  29.         text-align: center;
  30.         color: red;
  31.         background: #C3C3C3;
  32.         position: absolute;
  33.         top: 40%;
  34.         display: none;
  35.         text-decoration: none;
  36. }
  37. .container a.prev{
  38.         left: 0px;
  39. }
  40. .container a.next{
  41.         right: 0px;
  42. }
  43. .container .buttons{
  44.         position: absolute;
  45.         bottom: 8px;
  46.         right: 25px;
  47. }
  48. .container .buttons span{
  49.         width: 23px;
  50.         line-height: 23px;
  51.         border-radius: 50%;/*圆形的效果*/
  52.         float: left;
  53.         text-align: center;
  54.         background: #c3c3c3;
  55.         margin-left: 8px;
  56.         font-size: 18px;
  57.         color: red;
  58. }
  59. .container .buttons span.on{
  60.         color: green;/*发生移动的图片 伪类on 颜色发生改变*/
  61.         background-color: #8D7D7D;
  62. }
  63. .container:hover a{
  64.         display: block;
  65. }
  66. .left_div .list img{
  67.         cursor: pointer;
  68. }
  69. .left_div .buttons span{
  70.         cursor: pointer;/*手的图标出现*/
  71. }
复制代码
JS 代码部分
  1. // JavaScript Document
  2. var blswitch=false;
  3. var index=1;
  4. var timer=null;
  5. window.function(){
  6.         var container=document.getElementById("container");
  7.         var prev=document.getElementById("prev");
  8.         var next=document.getElementById("next");
  9.         var buttons = document.getElementById("buttons").getElementsByTagName("span");
  10.         next.onclick=function(){/*右边按钮的点击事件*/
  11.                 if(blswitch){
  12.                         return false;
  13.                 }
  14.                 if(index===5){
  15.                         index=1;
  16.                 }else{
  17.                         index++;/*向右移动*/
  18.                 }
  19.                 animate(-1080);/*图片的像素*/
  20.                 showButton();/*每次图片的位置发生变化,底部的页码数也随之变化*/
  21.         };
  22.         prev.onclick=function(){/*左边按钮的点击事件*/
  23.                 if(blswitch){
  24.                         return false;
  25.                 }
  26.                 if(index===1){
  27.                         index=5;
  28.                 }else{
  29.                         index--;/*向左移动*/
  30.                 }
  31.                 animate(1080);/*像素*/
  32.                 showButton();/*每次图片的位置发生变化,底部的页码数也随之变化*/
  33.         };
  34.         for(var i=0;i<buttons.length;i++){
  35.                 buttons[i].onclick=function(){
  36.                         if(this.className==="on"){
  37.                                 return;
  38.                         }
  39.                         var myindex=this.getAttribute("index");
  40.                         var offset=-1080*(myindex-index);
  41.                         if(!blswitch){
  42.                                 animate(offset);
  43.                         }
  44.                         index=myindex;
  45.                         showButton();
  46.                 }
  47.         }
  48.         function play(){
  49.                 timer=setInterval(function(){
  50.                         next.onclick();
  51.                 },3000)/*以毫秒为单位*/
  52.         }
  53.         play();
  54.         function stoptime(){
  55.                 clearInterval(timer);
  56.         }
  57.         container.onmousemove = stoptime;/*鼠标移到图片上,轮播停止*/
  58.         container.onmouseout = play;/*移开继续开始*/
  59. };
  60. function animate(offset){
  61.         var list=document.getElementById("list");
  62.         var time=1080;
  63.         var interval=10;
  64.         var speed=offset/(time/interval);
  65.         var newleft=parseInt(list.style.left)+offset;
  66.         blswitch=true;
  67.         function go(){
  68.                 if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style.left)<newleft)){
  69.                         list.style.left=parseInt(list.style.left)+speed+"px";
  70.                         setTimeout(go,interval);
  71.                 }else{/*注意别打乱、错*/
  72.                         list.style.left=newleft+"px";
  73.                         if(newleft<-(1080*5)){
  74.                                 list.style.left=-1080+"px";
  75.                         }
  76.                         if(newleft>-1080){
  77.                                 list.style.left=-(1080*5)+"px";
  78.                         }
  79.                         blswitch=false;
  80.                 }
  81.         }
  82.         go();/*不可少*/
  83. }
  84. function showButton(){
  85.         var buttons=document.getElementById("buttons").getElementsByTagName("span");
  86.         for(var i=0;i<buttons.length;i++){
  87.                 if(buttons[i].className==="on"){
  88.                         buttons[i].className="";
  89.                         break;
  90.                 }
  91.         }
  92.         buttons[index-1].className="on";/*给伪类class为on的一个高亮效果*/
  93. }
复制代码
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1
QQ