HTML5--图片轮播单张展示

来源:http://itssh.cn/post/900.html

图片轮播,单张效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片轮播效果</title>

<!--
@author:SM
    @email:sm0210@qq.com
    @desc:图片轮播单张展示
-->

<style type="text/css">
 html,body{
  padding:0px;
  margin:10px auto;
 }
 #wrapper{
  width:210px;
  height:100px;
  position:relative;
  overflow:hidden;
  margin:0 auto;
 
 }
 #inner{
  width:630px;
  position:absolute;
 }
 #inner div{
  width:200px;
  height:100px;
  margin:0 5px;
  background:#ccc;
  float:left;

 }
 .full-circle{
  background:#ccc;
 
  border-radius:5px;
 
  width:10px;
  height:10px;
  float:left;
  margin:5px;
 }
 .cur{
  background-color:#555;
 }
 #btns{
  width:60px;
  margin:0 auto;
 }
 
 #optrbtn{
  text-align:center;
  font-size:20px;
 }
 #optrbtn span {
  display:inline-table;
  border:1px solid red;
  width:50px;
  cursor:pointer;
  margin-right:5px;
 }
</style>

<script language="javascript" src="jquery-1.7.2.js"></script>
<script language="javascript">

$(function(){
   
    var curNum=0;
    var count=$("#inner").children('div').length;
    //左滑动
    $(".btnleft").click(function(){
   
   if(curNum>=count-1){
    return false;
   }
   
   curNum+=1;
   
   $("#inner").animate({
    left:'-=210'
   },500,function(){
    //curNum+=1;
    $(".full-circle").removeClass('cur');
    $(".full-circle").eq(curNum).addClass('cur');
   });
    });
    //右滑动
    $(".btnright").click(function(){
   
   if(curNum<=0){
    return false;
   }
   
   curNum-=1;
   
   $("#inner").animate({
    left:'+=210'
   },500,function(){
    //curNum-=1;
    $(".full-circle").removeClass('cur');
    $(".full-circle").eq(curNum).addClass('cur');
   });
    });
   
   
});

</script>

<!--
 原理:
    向左切换时减去一个图片DIV宽度距离
    向右切换时加上一个图片DIV距离
-->
</head>

<body>

<div id="main">
 <div id="wrapper">
     <div id="inner">
         <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>
   
    <div id="btns">
     <div class="full-circle cur"></div>
        <div class="full-circle"></div>
        <div class="full-circle"></div>
    </div>
   
</div>

<br>
<br>

<div id="optrbtn">
 <span class="btnleft">«</span>
    <span class="btnright">»</span>
</div>
</body>
</html>

来源:http://itssh.cn/post/900.html

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 167,324评论 24 705
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 10,171评论 4 57
  • 我从雨里走过一身湿润满眼弥望的雨细细丝丝嘶嘶淅淅 你呀你让我穿堂过不许我停留片刻 我生气的时候总是不断说反话要么沉...
    噢嘿是我阅读 100评论 0 0
  • 我是一名初级跑者,我挺喜欢跑步的。 工作后一直断断续续地跑步,如果说在珠海时是因为环境好,不出去转转可惜了这天气了...
    Zero2Hero阅读 342评论 0 2
  • 文/ 船vessel船 已是早春时节,一场绵绵的细雨把大地唤醒,一切都是那么的安静和舒润。 午后时分,天空慢慢放晴...
    ALittleBitWiser阅读 139评论 0 0