js图片切换特效（寻网页中JS实现的图片切换特效）

本文目录

• 寻网页中JS实现的图片切换特效
• js+css 怎么实现图片切换
• js鼠标单击实现图片切换
• JS图片轮换效果

寻网页中JS实现的图片切换特效

我修改测试通过一个。但是有个问题。若改成鼠标悬停边缘滚下去，也就是onMouseOver。是停不下来的，会一直滚下去，因为无论怎么样都是鼠标碰触事件。所以我强烈建议用点击事件,onclick。js css image都是调用的。我都写到页面里了，你自己改下。图片地址我没改。本地测试的。自己换成你的图片。《!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"》《html》《head》《meta http-equiv="Content-Type" content="text/html; charset=utf-8"》《title》图片展示特效《/title》《style》body{ margin:20px auto; width:100%; height:auto;}#dHomePageCarousel {height:221px;width:670px;position:relative;margin:40px auto;}#dLocalHomesCarousel {height:131px;margin:0px 2px 3px 1px;overflow:hidden;position:relative;}.divCarouselInfo {color:#3C404E;font-size:12px;width:639px;height:64px;line-height:16px;margin-right:15px;padding-top:10px;position:relative;}.imgBorder{border:2px solid #fff;position:absolute;cursor:pointer;}.imgBorder:hover {border:2px solid #FFAA55;cursor:pointer;position:absolute;}.btnCarouselLT {background:url("../images/btn_nav_carousel.png") no-repeat scroll left top transparent;display:block;height:41px;overflow:hidden;position:absolute;cursor:pointer;top:17px;width:40px;}.btnCarouselRT {background:url("../images/btn_nav_carousel.png") no-repeat scroll right top transparent;display:block;height:41px;overflow:hidden;position:absolute;cursor:pointer;top:17px;width:40px;}img {border:medium none;}.author{ width:700px; margin:0 auto; height:auto; text-align:center;}《/style》《/head》《body onLoad="clearInterval(autoplay);"》《!-- 头开始 --》《!-- 滚动房源广告开始 --》《div id="dHomePageCarousel" style="padding-left:15px"》《div id=dLocalHomesCarousel》《img id="imgSmallLeft" class="imgBorder" style="height:50px; width:70px; left:10px; bottom:5px;" onClick="clearInterval(autoplay);moveD(’l’);"/》《img id="imgMiddleLeft" class="imgBorder" style="height:75px; width:100px; left:110px; bottom:5px;" onClick="clearInterval(autoplay);move(’l’);"/》《img id="imgBig" class="imgBorder" style="height:105px;width:140px; left:240px; bottom:5px;" onClick="openNewPage();"/》《img id="imgMiddleRight" class="imgBorder" style="height:75px; width:100px;left:410px;bottom:5px;" onClick="clearInterval(autoplay);move(’r’);"/》《img id="imgSmallRight" class="imgBorder" style="width:70px; height:50px; left:540px; bottom:5px;" onClick="clearInterval(autoplay);moveD(’r’);"/》《img id="imgHidden" class="imgBorder" style="width:10px; height:10px; left:-90px; bottom:5px;"/》《/div》《script type="text/javascript"》function AdItem(Photo,url) {this.Photo = Photo;this.url = url;}var ad = new Array();ad = new AdItem(’images/6.jpg’,’#’); ;var img = new Array();img = document.getElementById("imgSmallLeft");img = document.getElementById("imgMiddleLeft");img = document.getElementById("imgBig");img = document.getElementById("imgMiddleRight");img = document.getElementById("imgSmallRight");img = document.getElementById("imgHidden"); var position = 0;for(i=0;i《img.length;i++){img.Photo;}var cur = 2;adname.href = ad.url;《/script》《/div》《script type="text/javascript"》function roll(direction){var imgLength = img.length;var dataLength = ad.length;var start = position;if(’r’ == direction){for(var i=0; i《imgLength; i++){start = start + 1;if(start 》 (dataLength-1))start = start - dataLength;img.Photo;}position = position + 1;if(position 》 (dataLength-1))position = position - dataLength;}if(’l’ == direction){var a = true;for(var i=0; i《imgLength; i++){if(a){start = start - 1;if(start 《 0){start = start + dataLength;a = false;}if(start 《 (dataLength-1)){a = false;}}else{start = start + 1;if(start 》 (dataLength-1)){start = start - dataLength;a = true;}}//alert(position + " === " + i + " === " + start);img.Photo;if(start == (dataLength-1)){start = -1;}}position = position - 1;if(position 《 0)position = position + dataLength;}}function right(){i++;var img0H = parseFloat(img.style.height);var img0W = parseFloat(img.style.width);var img0L = parseFloat(img.style.left);var img1H = parseFloat(img.style.height);var img1W = parseFloat(img.style.width);var img1L = parseFloat(img.style.left);var img2H = parseFloat(img.style.height);var img2W = parseFloat(img.style.width);var img2L = parseFloat(img.style.left);var img3H = parseFloat(img.style.height);var img3W = parseFloat(img.style.width);var img3L = parseFloat(img.style.left);var img4H = parseFloat(img.style.height);var img4W = parseFloat(img.style.width);var img4L = parseFloat(img.style.left);var img5H = parseFloat(img.style.height);var img5W = parseFloat(img.style.width);var img5L = parseFloat(img.style.left);//解决IE兼容性问题if(navigator.userAgent.indexOf("MSIE")》0 && i%2==0) {img1W = img1W + 1;img2H = img2H + 1;img2L = img2L + 1;img3H = img3H + 1;img3L = img3L + 1;img4L = img4L + 1;img4W = img4W + 1;} img.style.height = (img0H - 2).toString() + "px";img.style.left = (img0L - 5).toString() + "px";img.style.width = (img0W - 3).toString() + "px"; img.style.height = (img1H - 1).toString() + "px";img.style.left = (img1L - 5).toString() + "px";img.style.width = (img1W - 1.5).toString() + "px"; img.style.height = (img2H - 1.5).toString() + "px";img.style.left = (img2L - 6.5).toString() + "px";img.style.width = (img2W - 2).toString() + "px"; img.style.height = (img3H + 1.5).toString() + "px";img.style.left = (img3L - 8.5).toString() + "px";img.style.width = (img3W + 2).toString() + "px"; img.style.height = (img4H + 1).toString() + "px";img.style.left = (img4L - 6.5).toString() + "px";img.style.width = (img4W + 1.5).toString() + "px"; img.style.height = (img5H + 2).toString() + "px";img.style.left = (img5L - 5).toString() + "px";img.style.width = (img5W + 3).toString() + "px";//alert(img.style.width);if(i》19){ clearInterval(hide); reset(); roll(’r’); isRunning = ’false’;}}function left(){i++;var img0H = parseFloat(img.style.height);var img0W = parseFloat(img.style.width);var img0L = parseFloat(img.style.left);var img1H = parseFloat(img.style.height);var img1W = parseFloat(img.style.width);var img1L = parseFloat(img.style.left);var img2H = parseFloat(img.style.height);var img2W = parseFloat(img.style.width);var img2L = parseFloat(img.style.left);var img3H = parseFloat(img.style.height);var img3W = parseFloat(img.style.width);var img3L = parseFloat(img.style.left);var img4H = parseFloat(img.style.height);var img4W = parseFloat(img.style.width);var img4L = parseFloat(img.style.left);var img5H = parseFloat(img.style.height);var img5W = parseFloat(img.style.width);var img5L = parseFloat(img.style.left);//解决IE兼容性问题if(navigator.userAgent.indexOf("MSIE")》0 && i%2==0) {img0W = img0W + 1;img1H = img1H + 1;img1L = img1L + 1;img2H = img2H + 1;img2L = img2L + 1;img3L = img3L + 1;img3W = img3W + 1;} img.style.height = (img0H + 1).toString() + "px";img.style.left = (img0L + 5).toString() + "px";img.style.width = (img0W + 1.5).toString() + "px"; img.style.height = (img1H + 1.5).toString() + "px";img.style.left = (img1L + 6.5).toString() + "px";img.style.width = (img1W + 2).toString() + "px"; img.style.height = (img2H - 1.5).toString() + "px";img.style.left = (img2L + 8.5).toString() + "px";img.style.width = (img2W - 2).toString() + "px"; img.style.height = (img3H - 1).toString() + "px";img.style.left = (img3L + 6.5).toString() + "px";img.style.width = (img3W - 1.5).toString() + "px"; img.style.height = (img4H - 2).toString() + "px";img.style.left = (img4L + 5).toString() + "px";img.style.width = (img4W - 3).toString() + "px"; img.style.height = (img5H + 2).toString() + "px";img.style.left = (img5L + 5).toString() + "px";img.style.width = (img5W + 3).toString() + "px";//alert(img.style.left);if(i》19){ clearInterval(hide); reset(); roll(’l’); isRunning = ’false’;}}var isRunning;function move(direction){ //alert(isRunning);if(isRunning != ’udefined’ && isRunning == ’true’)return;frequency = 20;if(navigator.userAgent.indexOf("MSIE")》0) {frequency = 15; } if(isFirefox=navigator.userAgent.indexOf("Firefox")》0){ frequency = 20; } i = 0;if(direction == ’r’){cur = cur + 1;img.style.left = "640px";hide = setInterval("right()", frequency);isRunning = ’true’;}if(direction == ’l’){cur = cur - 1;img.style.left = "-90px";var pos = position - 1;if(pos 《 0)pos = pos + ad.length;img.Photo;hide = setInterval("left()", frequency);isRunning = ’true’;}if(cur 》 (ad.length - 1))cur = 0;if(cur 《 0)cur = ad.length - 1;//alert(cur);adname.href = ad.url;if(navigator.userAgent.indexOf("Firefox")》0){adname.textContent = ad.name;adtel.textContent = ad.phone;adaddr.textContent = ad.address;adprice.textContent = ad.price;adtime.textContent = ad.time;} else {adname.innerText = ad.name;adtel.innerText = ad.phone;adaddr.innerText = ad.address;adprice.innerText = ad.price;adtime.innerText = ad.time;}}function moveC(direction){if(isRunning != ’true’){move(direction);clearInterval(movec);}}function moveD(direction){move(direction);if(’r’ == direction){movec = setInterval("moveC(’r’)",5);} else {movec = setInterval("moveC(’l’)",5);}}function reset(){img.style.width = "70px";img.style.height = "50px";img.style.left = "10px"; img.style.width = "100px";img.style.height = "75px";img.style.left = "110px"; img.style.width = "140px";img.style.height = "105px";img.style.left = "240px"; img.style.width = "100px";img.style.height = "75px";img.style.left = "410px"; img.style.width = "70px";img.style.height = "50px";img.style.left = "540px"; img.style.width = "10px";img.style.height = "10px";img.style.left = "-90px";}autoplay = setInterval("move(’r’)",2000);function openNewPage(){window.open(ad.url);}《/script》《!-- 滚动房源广告结束 --》《/body》《/html》

js+css 怎么实现图片切换

• 这个不用js实现，可以使用a标签和a标签的:hover 伪类。

  1. 使用a标签转化为块元素，并逐一设置背景图片，设置字体为灰色，

  2. :hover 伪类里写蓝色背景图片，设置字体为蓝色。

  如此你就可以做成这个效果了。

• 这个简单，就使用jQuery吧一个图片和文字 是一个div，比如《div class=’cntr’》首先我觉得你那些图标都是一个iconfont，而不是一张图片默认样式就是灰色，另外定义一个样式为：.active{ color:blue}$(’div.cntr’).click(function(e){ // 把当前’.active’的删掉 // 把当前点击的target加上.active这个Class})

js鼠标单击实现图片切换

1、提前准备一组图片，将图片名称设置一定规律：例如  img1.jpg、img2.jpg

2、编写鼠标点击事件

3、在鼠标点击时间里，判断鼠标点击次数

4、根据不同次数，显示不同的图片

《script type="text/javascript"》    $(function(){        var items=new Arrays("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg");        var i=0;        $("#bgImage").click(function(){            i++;            if(i》items.length){                i=1;            }            $(this).prop("src","img"+i+".jpg");        });    });《/script》

JS图片轮换效果

《!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "