HTML网站商城首页轮播图

来源：互联网发布：keep软件下载编辑：程序博客网时间：2024/05/01 03:09

这里写图片描述

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>轮播图</title><link  href="css/demo2.css" rel="stylesheet" type="text/css"/><script src="js/jquery-1.9.1.min.js"></script><script src="js/demo2.js"></script></head><body><div id="igs">   <div class="ig"><img src="images/ps123.Net_0007.jpg" width="1000" height="665" /></div>   <div class="ig"><img src="images/ps123.Net_0009.jpg" width="1000" height="665" /></div>   <div class="ig"><img src="images/ps123.Net_0011.jpg" width="1000" height="665" /></div>   <div class="ig"><img src="images/ps123.Net_0012.jpg" width="1000" height="665" /></div>   <div class="ig"><img src="images/ps123.Net_0018.jpg" width="1000" height="664" /></div>     </div>    <!--左右切换-->   <div class="btn btn1"><</div>     <div class="btn btn2">></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></body></html>

@charset "utf-8";/* CSS Document */*{    margin:0px;    padding:0px;}#igs{    margin:0 auto;    width:1000px;    height:665px;    line-height:665px;}.ig{    position:absolute;}.btn{    position:absolute;    width:60px;    height:100px;    color:#fff;    font-size:60px;    background:rgba(0,0,0,0.5);    text-align:center;    line-height:100px;    top:283px;    left:168px;    cursor:pointer;}.btn2{    left:1106px;}#tabs{    position:absolute;    top:570px;    left:560px;    float:right;}.tab{    color:#fff;    text-align:center;    background-color:#00F;    width:40px;    height:40px;    float:left;    border-radius:100%;    line-height:40px;    margin-left:10px;    cursor:pointer;}.bg{    background-color:#F00;}

// JavaScript Documentvar i=0;var timer;$(function(){    //显示第一张图片，其他图片隐藏 $(".ig").eq(0).show().siblings().hide();   ShowTime(); $(".tab").hover(function(){     i=$(this).index();     Show();     clearInterval(timer);     },function(){         ShowTime();         });      btn1Click();//往前翻页调用的方法      btn2Click();//往后翻页调用的方法});function btn1Click(){     $(".btn1").click(function(){     clearInterval(timer);     if(i==0){//进行判断，如果图片处在第一个则让i=5；然后i--；     i=5;      }      i--;      Show();//调用方法进行图片切换      ShowTime();     });    }function btn2Click(){     $(".btn2").click(function(){     clearInterval(timer);     if(i==4){     i=-1;     }     i++;      Show();      ShowTime();     });    }function Show(){         //切换图片的时候有过度效果，切换开始和切换结束时有0.3秒的过度效果     $(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);     $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");}function  ShowTime(){timer=setInterval(function(){     i++;     if(i==5){         i=0;         }   Show();     },4000);}

0 0