征集網銳志網絡淘途找素材上91
創意在線首頁
平面設計交互設計CG動漫工業設計建筑環境數碼影像創意搜
 首頁大賽征集資訊教程畫廊訪談作品集創企同盟設計招聘人才專區競賽臺專題論吧 找素材看酷站設計網址庫
教程網 Illustrator、Photoshop、CoreaDreaw、AI教程、PS教程
當前位置:首頁 > 教程 > 腳本特效 > 正文
簡單實用的圖片幻燈切換效果
作者: 來源: 發表時間:2010-7-8 13:56:24 瀏覽:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>簡單實用的圖片幻燈切換效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代碼加到<head>與</head>之間-->
<style type="text/css教程">
#container{width:422px;height:200px;border:5px #000000 solid;}
#container .left{width:340px;height:200px;float:left;background-color:#999999;overflow:hidden;}
#container .left ul{padding:0;margin:0;}
#container .left ul li{list-style:none;cursor:pointer;text-align:center;}
#container .right{width:80px;height:200px;float:right;background-color:gray;}
#container .right ul{margin:0;padding:0;}
#container .right ul li{list-style:none;width:80px;height:40px;line-height:40px;text-align:center;padding-top:5px;_padding-top:0px;_margin-top:4px;cursor:pointer;}
.on{border:1px white solid;}
#container img{border:none;}
</style>
<script type="text/javascript教程" src="http://www.111cn.net/effect/images/jquery-1.3.2.js"></script>
<script type="text/javascript教程">
$(function(){
  var len=$(".right li").length;
  var index=0;
  var time;
    $(".right li").mousemove(function(){
     index=$(".right li").index(this);
    show(index);
    }).eq(0).mousemove();
    $(".left").hover(function(){
        clearinterval(time);
   },function(){
    time=setinterval(function(){
      show(index)
   index++;
   if(index==len){index=0;}
   },2000);
   }).trigger("mouseleave");
})
function show(index){
  $(".left li").eq(index).fadein(100).siblings().fadeout(100);
  $(".right li").removeclass("on").eq(index).addclass("on");
}
</script>
</head>
<body>
預覽效果時左下角會提示錯誤,而且看不到效果,刷新一下就可以看到效果了;當然,在實際使用中,不會出現這樣的問題。<br>
<!--把下面代碼加到<body>與</body>之間-->
<div id="container">
  <div class="left">
    <ul>
      <li>圖片1<br>圖片說明1</li>
      <li>圖片2<br>圖片說明2</li>
      <li>圖片3<br>圖片說明3</li>
      <li>圖片4<br>圖片說明4</li>
    </ul>
  </div>
  <div class="right">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</div>
</body>
</html>


在線編輯:angel
本文鏈接:


推薦閱讀:
·2019第五屆“學院派獎”全國藝術與設計大展 征集公告
·2019第十三屆“創意中國”設計大獎征稿
·第十三屆《中國大學生美術作品年鑒》征稿開始
·青春唯美插畫培訓網絡遠程班正在招生
·20000元 余姚征集文化旅游宣傳LOGO與宣傳標語
·6000元 征集柯城區“一村萬樹”LOGO設計
·5000元 征集陜西政務服務形象標識
·3000元 2019中國•大圩馬拉松文化節吉祥物征集
免責聲明:本站刊載此文不代表同意其說法或描述,僅為提供更多信息。對本文有異議,請聯絡本站!
轉載要求:文章作者及來源信息必需保留。轉載之圖片、文件請不要盜鏈本站地址,且不準打上各自站點的水印!

近期推薦報道 返回首頁更多精彩等著你!

Photoshop| Photoshop調出郁金香圖片鮮艷的青攝影佳作| Kate Bellm性感的時尚人體攝影作
網頁設計| 2010世界杯最美網站設計Photoshop| Photoshop制作沾滿水花的藍色水晶
網頁設計| 德國asphyxia219網站作品欣賞海報設計| 不只水墨-設計大師靳埭強先生作品欣賞
插畫藝術| Marleen Weijman 艷麗插畫Photoshop| Photoshop制作水晶透明的立體按鈕
Photoshop| Photoshop給美女照片加上絢麗的彩網頁設計| 巴基斯坦naseemhaider網站作品
韓國站點 素材資源 藝術攝影 游戲娛樂 影視網站 建筑家居 FLASH站 旅游購物 明星網站 個性展示 網站教學 工 作 室 學校教育
設計門戶 優秀企業 時尚品牌 象素站點 數碼通信 設計公司 汽車網站 國外優秀 兒童網站 文化藝術 體育運動 美容健身 食品飲料
網站名稱:whaternet
網站地址:http://whaternet.com/
加入時間:2014-8-5 13:59:20
網站名稱:mnnaite
網站地址:http://www.mnnaite.com/static/
加入時間:2014-8-5 13:58:07
網站名稱:tijuanaflats
網站地址:http://tijuanaflats.com/
加入時間:2014-8-5 13:55:32
網站名稱:digital
網站地址:http://production-digital.com/
加入時間:2014-8-5 13:54:45
網站名稱:deutschesee
網站地址:http://www.deutschesee.de/
加入時間:2014-8-5 13:51:54
網站名稱:kennedy
網站地址:http://www.kennedyandoswald.com/
加入時間:2014-8-5 13:50:57
關于本站 | 聯系方式 | 商業服務 | 合作伙伴 | 站點地圖 | 免責聲明 | 版權聲明 | 在線投稿  
 
仙侠情缘APP