网页图片左右滚动特效实例
生活随笔
收集整理的這篇文章主要介紹了
网页图片左右滚动特效实例
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
圖圖：
? ? 很多網(wǎng)站上都有這個(gè)單擊左右箭頭滾動(dò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控制左右箭頭滾動(dòng)圖片列表</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);//計(jì)算總長(zhǎng)度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列表，每個(gè)列表項(xiàng)鏈接一個(gè)圖片；左右箭頭在外層div中，其span標(biāo)簽的id分別為prev和next;
? ? 內(nèi)層div的css類為slider_pic，外層div的css類為slider；
? ? .no_click定義滾動(dòng)到頭不可點(diǎn)擊的顏色；
? ? cursor:pointer定義鼠標(biāo)光標(biāo)為一只手的形狀；
? ? 滾動(dòng)的基本代碼在ClickScroll()函數(shù)中，
? ? oPic.animate({left:-iNow*210})
? ? 調(diào)用jquery的animate函數(shù)，每點(diǎn)擊一下鼠標(biāo)，增大或減小left屬性值；
? ? 如果左端已經(jīng)滾到頭，為prev添加css類'no_click'，否則移除該css類；
? ? 右端滾到頭，為next添加css類'no_click'，否則移除該css類。
總結(jié)
以上是生活随笔為你收集整理的网页图片左右滚动特效实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java Web的Struts2的多语种
- 下一篇： html and js 的隔行换背景色表