关闭

图片轮播图js、css

标签: 图片轮播图
215人阅读 评论(0) 收藏 举报
分类:

单张图片轮播图:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery左右箭头控制图片轮播代码</title>

<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
 body,ul,li,label,span{padding: 0; margin: 0;}
ul,li,label,span{list-style: none;}
body{font-size:12px;}

#demo1{
    position: relative;   
    margin: 50px auto;
    width: 700px;    
    border:1px solid #ccc;
}
#demo1 .img_list{overflow: hidden; position: relative; height: 260px;}
/* 根据图片的张数来设定ul的宽度 */
.img_list ul{ width: 3500px; position: absolute; height: 260px; left: 0px;}
.img_list li{ float: left; width: 700px; font-family : 微软雅黑,宋体; font-size : 1.3em; color : #ff0000;}
.img_list ul li img{ margin: 1px; width: 400px; height: 259px; float:left;}
.img_list ul li label{padding-top:30px; display:block; position:relative;}
.img_list ul li label a.images{display:block; width:15px; height:15px; position:absolute; top:0px; right:0px;}
.img_list ul li label a.images img{width:15px; height:15px;}

.img_list ul li label a.image{display:block; width:15px; height:15px; position:absolute; top:0px; right:30px;}
.img_list ul li label a.image img{width:15px; height:15px;}
/* 图片对应的按钮样式 */
.btn_list ul{ position: absolute; right: 10px; bottom: 15px; }
.btn_list li{ float: left; margin-right: 10px; color: #999; border: 1px solid #ccc; }
.btn_list li:hover,.btn_list li.on{ cursor: pointer; border: 1px solid #E204A4;}
.btn_list ul li img{ margin: 1px; width: 30px; height: 15px; display: block;}

/* 左右点击的按钮样式 */
#demo1 .toLeft,#demo1 .toRight{
    display: none;
    position: absolute;
    width: 20px;
    height: 30px;   
    top: 110px;   
    background: url(image/zbbg_24.png) no-repeat 0 -150px; /*替换成自己本地图片*/
}
#demo1 .toLeft{
    left: -40px;
}
#demo1 .toRight{
    right: -40px;
    background-position: -50px -150px;
}
</style>
</head> 
<body>  

<div id="demo1">
 <div class="img_list">
  <form>
   <ul>
    <li>
        <div>
      <span><img src="image/gsh_banner1.jpg"></span>
     </div>
     <label>
         <a href="javascript:void(0);" class="images"><img src="image/delete.png"></a>
       <span>姓名:</span>测试</br></br>
      <span>性别:</span>男</br></br>
      <span>描述:</span>测试测试测试测试测试
     </label>
    </li>
    <li>
     <div>
      <span><img src="image/gsh_banner3.jpg"></span>
     </div>
     <label>
      <a href="javascript:void(0);" class="images"><img src="image/delete.png"></a>     
      <span>姓名:</span>测试</br></br>
      <span>性别:</span>男1</br></br>
      <span>描述:</span>测试
     </label>
    </li>
    <li>
     <div>
      <span><img src="image/gsh_banner4.jpg"></span>
     </div>
     <label>
      <a href="javascript:void(0);" class="images"><img src="image/delete.png"></a>      
      <span>姓名:</span>测试</br></br>
      <span>性别:</span>男2</br></br>
      <span>描述:</span>测试
     </label>
    </li>
   </ul>
  </form>
 </div>
 <div class="btn_list">
   <ul></ul>
 </div>
 <a href="#" id="toLeft" class="link toLeft"></a>
 <a href="#" id="toRight" class="link toRight"></a>
</div>

 <script type="text/javascript">
var index = 0;
var timer = 0;
var ulist = $('.img_list ul ');
var blist = $('.btn_list ul ');
var list = ulist.find('li');
var llength = list.length;//li的个数,用来做边缘判断
var lwidth = $(list[0]).width();//每个li的长度,ul每次移动的距离
var uwidth = llength * lwidth;//ul的总宽度

function init(){
 //生成按钮(可以隐藏)
 addBtn(list);
 //显示隐藏左右点击开关
 $('.link').css('display', 'block');
 $('.link').bind('click', function(event) {
  var elm = $(event.target);
  doMove(elm.attr('id'));
  return false;
 });

 //初始化描述
 var text = ulist.find('li').eq(0).find('img').attr('alt');
 var link = ulist.find('li').eq(0).find('a').attr('href');
 $('.img_intro .text a').text(text);
 $('.img_intro .text a').attr('href',link);
 auto();
}

function auto(){
 //定时器
 timer = setInterval("doMove('toRight')",3000);

 $('.img_list li , .btn_list li ').hover(function() {
  clearInterval(timer);
 }, function() {
  timer = setInterval("doMove('toRight')",3000);
 });
}

function changeBtn(i){
 blist.find('li').eq(i).addClass('on').siblings().removeClass('on');
 var text = ulist.find('li').eq(i).find('img').attr('alt');
 var link = ulist.find('li').eq(i).find('a').attr('href');
 $('.img_intro .text a').text(text);
 $('.img_intro .text a').attr('href',link);
}

function addBtn (list){
 for (var i = 0; i < list.length; i++) {
  var imgsrc = $(list[i]).find('img').attr('src');           
  var listCon = '<li><img src="'+imgsrc+'""></li>';        
  $(listCon).appendTo(blist);
  //隐藏button中的数字
  //list.css('text-indent', '10000px');
 };
 blist.find('li').first().addClass('on');
 blist.find('li').click(function(event) {
  var _index = $(this).index();           
  doMove(_index);
 });
}

function doMove(direction){
 //向右按钮
 if (direction =="toRight") {
  index++;
  if ( index< llength) {
   uwidth = lwidth *index;
   ulist.css('left',-uwidth);
   //ulist.animate({left: -uwidth}, 1000);

  }else{
   ulist.css('left','0px');
   index = 0;
  };
 //向左按钮          
 }else if(direction =="toLeft"){
  index--;
  if ( index < 0) {
   index = llength - 1;               
  }
  uwidth = lwidth *index;
  ulist.css('left',-uwidth);
  //ulist.animate({left: -uwidth}, "slow");   
 //点击数字跳转 
 }else{
  index = direction;
  uwidth = lwidth *index;
  ulist.css('left',-uwidth);
 };
 changeBtn(index);
}
init();
</script>

</div>
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1039次
    • 积分:49
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档