0顶

仿淘宝网左右切换内容图片效果

稿源：互联网 2022-04-24 00:21:35 点击： 3615 撤稿纠错

仿淘宝网左右切换内容图片效果，图片展示效果可以用这个脚本来实现。

以下讨论的是和特效相关的仿淘宝网左右切换内容图片效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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=utf-8" /> <title>佐佐制造---左右切换内容淘版 </title> <script type="text/javascript"> </script> <style type="text/css"> /* Reset style */ * { margin:0; padding:0; word-break:break-all; } body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size:1em; } a { color:#333; text-decoration:none; } a:hover { text-decoration:underline; } ul, li { list-style:none; } fieldset, img { border:none; } em, strong, cite, th { font-style:normal; font-weight:normal; } /* New_pro style */ #new_pro { position:relative; width:315px; height:225px; overflow:hidden; margin:50px 0 8px 50px; background:url(/UploadPic/2008-10/200810101543503.gif) no-repeat 0 0; } #new_pro h3 { height:25px; overflow:hidden; font-size:14px; line-height:27px; text-indent:15px; } #new_pro .current { display:block; } #new_pro .normal { display:none; } #new_pro ul { height:200px; overflow:hidden; padding:3px 0 0 5px; background:url(/UploadPic/2008-10/200810101543503.gif) no-repeat -357px 0; } #new_pro ul li { float:left; padding:4px 8px; } #new_pro ul li img { display:block; width:60px; height:60px; } #new_pro ul li span { display:block; width:60px; height:30px; overflow:hidden; margin-top:2px; line-height:15px; } #ranks_change_bar { position:absolute; top:5px; right:5px; } #ranks_change_bar a { display:block; float:left; width:12px; height:15px; overflow:hidden; margin:0 2px; background:url(/UploadPic/2008-10/200810101543503.gif) no-repeat; text-indent:-9999px; } #ranks_change_bar .previous { background-position:-775px -32px; } #ranks_change_bar .previous:hover { background-position:-775px -16px; } #ranks_change_bar .next { background-position:-788px -32px; } #ranks_change_bar .next:hover { background-position:-788px -16px; } #ranks_change_bar .pages_first { background-position:-775px 0 !important; } #ranks_change_bar .pages_last { background-position:-788px 0 !important; } </style> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function addClass(element,value) { if (!element.className) { element.className = value; } else { newClassName = element.className; newClassName+= " "; newClassName+= value; element.className = newClassName; } } function next() { var ranksChangeBarList = $('ranks_change_bar').getElementsByTagName('a'); var previousbar = ranksChangeBarList[0]; var nextbar = ranksChangeBarList[1]; var proList = $('new_pro').getElementsByTagName('ul'); var len = proList.length; for (var i=0; i<len; i++){ if (proList[i].className == 'current' ) { var currentNum = i; } } if(currentNum == len-1) return; if(currentNum == len-2) { addClass(nextbar,'pages_last'); proList[currentNum].className ='normal' proList[currentNum+1].className = 'current' } else { proList[currentNum].className ='normal' proList[currentNum+1].className = 'current' } previousbar.className= 'previous'; } function previous() { var ranksChangeBarList = $('ranks_change_bar').getElementsByTagName('a'); var previousbar = ranksChangeBarList[0]; var nextbar = ranksChangeBarList[1]; var proList = $('new_pro').getElementsByTagName('ul'); var len = proList.length; for (var i=0; i<len; i++){ if (proList[i].className == 'current' ) { var currentNum = i; } } if(currentNum == 0) return; if(currentNum == 1) { addClass(previousbar,'pages_first'); proList[currentNum].className ='normal' proList[currentNum-1].className = 'current' } else { proList[currentNum].className ='normal' proList[currentNum-1].className = 'current' } nextbar.className= 'next'; } </script> </head> <body> <div id="new_pro"> <h3>新品速递</h3> <ul class="current"> <li><a href="#"><img src="/UploadPic/2008-10/200810101543951.jpg" alt="" /></a><a href="#">Levi's经典铜扣款1</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101543732.jpg" alt="" /></a><a href="#">田园风格时尚纸巾盒</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544699.jpg" alt="" /></a><a href="#">清仓2件仅售78元!印第安人头像</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544511.jpg" alt="" /></a><a href="#">日本化妆棉特惠装222片</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544659.jpg" alt="" /></a><a href="#">宅男宅女最爱漫画</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544831.jpg" alt="" /></a><a href="#">居家特惠场畅想购</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544821.jpg" alt="" /></a><a href="#">天然螺旋藻来自程海湖</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544662.jpg" alt="" /></a><a href="#">善臣士平角分体泳衣</a></li> </ul> <ul class="normal"> <li><a href="#"><img src="/UploadPic/2008-10/200810101544659.jpg" alt="" /></a><a href="#">宅男宅女最爱漫画2</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544831.jpg" alt="" /></a><a href="#">居家特惠场畅想购</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544699.jpg" alt="" /></a><a href="#">清仓2件仅售78元!印第安人头像</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544511.jpg" alt="" /></a><a href="#">日本化妆棉特惠装222片</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544821.jpg" alt="" /></a><a href="#">天然螺旋藻来自程海湖</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544662.jpg" alt="" /></a><a href="#">善臣士平角分体泳衣</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101543951.jpg" alt="" /></a><a href="#">Levi's经典铜扣款</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101543732.jpg" alt="" /></a><a href="#">田园风格时尚纸巾盒</a></li> </ul> <ul class="normal"> <li><a href="#"><img src="/UploadPic/2008-10/200810101544699.jpg" alt="" /></a><a href="#">清仓2件仅售78元!3</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544659.jpg" alt="" /></a><a href="#">宅男宅女最爱漫画</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101543951.jpg" alt="" /></a><a href="#">Levi's经典铜扣款</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101543732.jpg" alt="" /></a><a href="#">田园风格时尚纸巾盒</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544511.jpg" alt="" /></a><a href="#">日本化妆棉特惠装222片</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544831.jpg" alt="" /></a><a href="#">居家特惠场畅想购</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544821.jpg" alt="" /></a><a href="#">天然螺旋藻来自程海湖</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544662.jpg" alt="" /></a><a href="#">善臣士平角分体泳衣</a></li> </ul> <ul class="normal"> <li><a href="#"><img src="/UploadPic/2008-10/200810101543732.jpg" alt="" /></a><a href="#">田园风格时尚纸盒44</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544511.jpg" alt="" /></a><a href="#">日本化妆棉特惠装222片</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544831.jpg" alt="" /></a><a href="#">居家特惠场畅想购</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544821.jpg" alt="" /></a><a href="#">天然螺旋藻来自程海湖</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544662.jpg" alt="" /></a><a href="#">善臣士平角分体泳衣</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544699.jpg" alt="" /></a><a href="#">清仓2件仅售78元</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101544659.jpg" alt="" /></a><a href="#">宅男宅女最爱漫画</a></li> <li><a href="#"><img src="/UploadPic/2008-10/200810101543951.jpg" alt="" /></a><a href="#">Levi's经典铜扣款</a></li> </ul> <div id="ranks_change_bar"><a href="#" class="previous pages_first" onclick="previous()">上一页</a><a href="#" class="next" onclick="next()">下一页</a></div> </div> </body> </html> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于仿淘宝网左右切换内容图片效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200810101077.shtml方便下次再访问哦。

·上一篇： 仿搜狐女人频道FLASH图片切换效果
·下一篇： 简单的js随机显示图片特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

仿淘宝网左右切换内容图片效果

文章分类LIST >>返回首页

最新游戏

最新新闻