网页图片左右滚动特效实例
生活随笔
收集整理的這篇文章主要介紹了
网页图片左右滚动特效实例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
圖圖：
? ? 很多網(wǎng)站上都有這個單擊左右箭頭滾動圖片的效果；
看下代碼：
<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/javascript" src="js/jquery-1.8.3.js"></script><title>jq控制左右箭頭滾動圖片列表</title><style type="text/css">*{ margin:0; padding:0;font-size: 12px;}ul{ list-style:none;}.slider{ width:960px;border: 1px #708090 solid; padding:10px 20px;height: 130px;margin: 100px auto;position: relative;cursor: pointer;}#slider_pic{ width: 840px;margin:0 auto;overflow: hidden;height: 130px;position: relative;}.prev,.next{position: absolute;width: 20px;height: 20px;cursor: pointer;top:60px;background-color: #daa520; text-align: center;line-height: 20px;font-weight: bold;color: #fff;}.next{right: 20px;}.no_click{background-color: #808080;}#slider_pic li{float: left;margin-right: 10px;}#slider_pic ul{position: absolute;left: 0;}</style><script type="text/javascript">$(function(){var oPic=$('#slider_pic').find('ul');var oImg=oPic.find('li');var oLen=oImg.length;var oLi=oImg.width();var prev=$("#prev");var next=$("#next");oPic.width(oLen*210);//計算總長度var iNow=0;var iTimer=null;prev.click(function(){if(iNow>0){ iNow--;}ClickScroll();})next.click(function(){if(iNow<oLen-3){ iNow++}ClickScroll();})function ClickScroll(){iNow==0? prev.addClass('no_click'): prev.removeClass('no_click');iNow==oLen-3?next.addClass("no_click"):next.removeClass("no_click");oPic.animate({left:-iNow*210})}})</script></head><body><div class="slider"><span class="prev no_click" id="prev"><<</span><span class="next " id="next">>></span><div id="slider_pic"><ul><li><img src="images/tu1.jpg" width="200" height="130" /></li><li><img src="images/tu2.jpg" width="200" height="130" /></li><li><img src="images/tu3.jpg" width="200" height="130" /></li><li><img src="images/tu4.jpg" width="200" height="130" /></li><li><img src="images/tu5.jpg" width="200" height="130" /></li><li><img src="images/tu6.jpg" width="200" height="130" /></li><li><img src="images/tu7.jpg" width="200" height="130" /></li></ul></div></div></body></html>代碼說明：
? ? 兩層div，內(nèi)層放ul列表，每個列表項鏈接一個圖片；左右箭頭在外層div中，其span標簽的id分別為prev和next;
? ? 內(nèi)層div的css類為slider_pic，外層div的css類為slider；
? ? .no_click定義滾動到頭不可點擊的顏色；
? ? cursor:pointer定義鼠標光標為一只手的形狀；
? ? 滾動的基本代碼在ClickScroll()函數(shù)中，
? ? oPic.animate({left:-iNow*210})
? ? 調(diào)用jquery的animate函數(shù)，每點擊一下鼠標，增大或減小left屬性值；
? ? 如果左端已經(jīng)滾到頭，為prev添加css類'no_click'，否則移除該css類；
? ? 右端滾到頭，為next添加css類'no_click'，否則移除該css類。
總結(jié)
以上是生活随笔為你收集整理的网页图片左右滚动特效实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java Web的Struts2的多语种
- 下一篇： html and js 的隔行换背景色表